jQuery Archives - Artificial Intelligence https://www.aiuniverse.xyz/tag/jquery/ Exploring the universe of Intelligence Thu, 27 Jul 2023 12:57:17 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 What is jQuery and How jQuery Works & Architecture? https://www.aiuniverse.xyz/jquery-works-and-architecture/ https://www.aiuniverse.xyz/jquery-works-and-architecture/#respond Thu, 27 Jul 2023 12:38:50 +0000 https://www.aiuniverse.xyz/?p=17485 What is jQuery ? jQuery is a lightweight, fast, small, and feature-rich JavaScript library that helps web developers work with HTML and make their websites more interactive Read More

The post What is jQuery and How jQuery Works & Architecture? appeared first on Artificial Intelligence.

]]>

What is jQuery ?

jQuery is a lightweight, fast, small, and feature-rich JavaScript library that helps web developers work with HTML and make their websites more interactive and dynamic. It simplifies tasks like changing content, handling user actions, creating animations, and fetching data from the server without reloading the page. With jQuery, developers can achieve more with less code and ensure their websites work well across different browsers.

What is top use cases of jQuery ?

Some top use cases of jQuery include:

1. DOM manipulation:  jQuery provides a number of methods for manipulating the DOM, such as selecting elements, adding and removing elements, and changing the content of elements.

2. Event handling: jQuery provides a number of methods for handling events, such as mouse clicks, keyboard presses, and form submissions.

3. Animation: jQuery provides a number of methods for animating elements, such as fading in and out, sliding, and rotating.

4. AJAX requests:  jQuery provides a number of methods for making AJAX requests, which allow you to exchange data with a server without reloading the page.

5. UI components: jQuery offers a wide range of UI components like date pickers, sliders, and tooltips.

What are feature of jQuery ?

Some of the key features of jQuery include:

  • Shorthand syntax: jQuery’s syntax is much shorter and more concise than standard JavaScript, making it easier to write and read.
  • Efficiency: jQuery is very efficient, making it a good choice for performance-sensitive applications.
  • Cross-platform compatibility: jQuery is cross-platform, meaning that it can be used on any platform that supports JavaScript.
  • Extensive library: jQuery has a large and extensive library of methods, making it a powerful tool for web development.

What is the workflow of jQuery ?

The workflow of jQuery typically involves:

1. Include the jQuery library in your HTML file using a `<script>` tag.

2. Select HTML elements using jQuery selectors.

3. Perform actions or manipulate the selected elements using jQuery methods and functions.

4. Handle events triggered by the user or browser.

5. Make AJAX requests to retrieve or send data to servers.

How jQuery Works & Architecture?

How to Install and Configure jQuery ?

To install and configure jQuery, follow these steps:

  1. Download the jQuery library:
  • Visit the official jQuery website at https://jquery.com/.
  • Click on the “Download” button to get the latest version of jQuery.
  • Choose either the compressed or uncompressed version based on your preference.
  1. Include jQuery in your HTML file:
  • Copy the downloaded jQuery file into your project directory.
  • Add the following line within the <head> section of your HTML file:
    <script src="path/to/jquery.js"></script>
  • Replace “path/to/jquery.js” with the actual path to the jQuery file.
  1. Verify the installation:
  • Open your HTML file in a web browser.
  • Right-click on the page and select “Inspect” or press Ctrl + Shift + I to open the browser’s Developer Tools.
  • In the Developer Tools, navigate to the “Console” tab.
  • Type jQuery or $ into the console and press Enter. If jQuery is correctly installed, it should return the jQuery version number.

You have now installed jQuery and can start using its libraries and functions in your web project. Remember to properly link to the jQuery file in any HTML file where you need to use jQuery functionality.

Step by Step Tutorials for jQuery for hello world program

For a step-by-step tutorial and a “Hello, World!” program using jQuery, here’s a basic example:

Step 1: Create an HTML file, for example, “index.html”.

Step 2: Include the jQuery library by adding the following code inside the `<head>` tag:


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Step 3: Add a `<script>` section below the jQuery inclusion to write your JavaScript code. For example:


<script>
$(document).ready(function() {
  // This function will be executed once the DOM is fully loaded
  $("button").click(function() {
    // This function will be executed when a button is clicked
    alert("Hello, World!");
  });
});
</script>

Step 4: Add a `<button>` element in the body of your HTML file:


<body>
  <button>Click me</button>
</body>

Step 5: Save and open the HTML file in a web browser. Whenever the button is clicked, it will trigger an alert saying “Hello, World!”.

In Another Example

Here is a step-by-step tutorial for creating a “Good Morning” program using jQuery:

  1. Create a new HTML file.
  2. Add the following code to the HTML file:

HTML

<html>
 <head>
  <title>Good Morning</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 </head>
 <body>
  <h1>Good Morning</h1>
 </body>
</html>
  1. Save the HTML file.
  2. Open the HTML file in a web browser.

You should see the text “Good Morning” displayed on the web page.

The post What is jQuery and How jQuery Works & Architecture? appeared first on Artificial Intelligence.

]]> https://www.aiuniverse.xyz/jquery-works-and-architecture/feed/ 0 How to get data in dropdown on change event using jQuery https://www.aiuniverse.xyz/how-to-get-data-in-dropdown-on-change-event-using-jquery/ https://www.aiuniverse.xyz/how-to-get-data-in-dropdown-on-change-event-using-jquery/#respond Thu, 05 Aug 2021 12:46:27 +0000 https://www.aiuniverse.xyz/?p=15262 First let’s go to your Laravel project and your blade file & this modal is past And your laravel project and your blade file & this function fetchData Read More

The post How to get data in dropdown on change event using jQuery appeared first on Artificial Intelligence.

]]>

First let’s go to your Laravel project and your blade file & this modal is past

And your laravel project and your blade file & this function fetchData is past

And your Laravel project and your Controller file & this function  is past

The post How to get data in dropdown on change event using jQuery appeared first on Artificial Intelligence.

]]> https://www.aiuniverse.xyz/how-to-get-data-in-dropdown-on-change-event-using-jquery/feed/ 0 How to use jQuery to Generate Modal Pop-Up when Clicked in text on fetchData https://www.aiuniverse.xyz/how-to-use-jquery-to-generate-modal-pop-up-when-clicked-in-text-on-fetchdata/ https://www.aiuniverse.xyz/how-to-use-jquery-to-generate-modal-pop-up-when-clicked-in-text-on-fetchdata/#respond Sat, 31 Jul 2021 13:03:50 +0000 https://www.aiuniverse.xyz/?p=15207 First let’s go to your blade file and you blade file fetchData Function and <tr> add this code when on text Next add use your class detailTrip Read More

The post How to use jQuery to Generate Modal Pop-Up when Clicked in text on fetchData appeared first on Artificial Intelligence.

]]>

First let’s go to your blade file and you blade file fetchData Function and <tr> add this code when on text

Next add use your class detailTrip to pop-Up jQuery on click Function

Next add use your pop-Up madal to pop-Up View page pop-Up

Now refresh browser and you can see click on pop-Up successfully added in your fetchData Function .

Refresh=> https://stackoverflow.com/questions/21511593/show-data-in-the-textbox-using-javascript

The post How to use jQuery to Generate Modal Pop-Up when Clicked in text on fetchData appeared first on Artificial Intelligence.

]]> https://www.aiuniverse.xyz/how-to-use-jquery-to-generate-modal-pop-up-when-clicked-in-text-on-fetchdata/feed/ 0 TOP 11 WEB FRAMEWORKS USED BY DEVELOPERS IN 2019 https://www.aiuniverse.xyz/top-11-web-frameworks-used-by-developers-in-2019/ https://www.aiuniverse.xyz/top-11-web-frameworks-used-by-developers-in-2019/#respond Sat, 23 Nov 2019 05:56:28 +0000 http://www.aiuniverse.xyz/?p=5358 Source:-analyticsindiamag.com Web frameworks are usually used by the developers to ease the building process of web applications. They help developers to concentrate more on the task rather Read More

The post TOP 11 WEB FRAMEWORKS USED BY DEVELOPERS IN 2019 appeared first on Artificial Intelligence.

]]> Source:-analyticsindiamag.com

Web frameworks are usually used by the developers to ease the building process of web applications. They help developers to concentrate more on the task rather than the complex coding part. According to the Stack Overflow Developer Survey 2019, among nearly 90,000 developers, 63,585 developers chose the most loved web frameworks where jQuery, React.js and Angular secured the first, second and third positions respectively.

In this article, we list down the 11 most popular web frameworks that have been used by the developers in 2019.

(The frameworks are listed down in the order of their popularity)
1| jQuery

Created in 2006, jQuery is a free and open-source JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, among others. This library simplifies the interaction between JavaScript and Document Object Model (DOM). The other features of this library are cross-browser support, AJAX support, CSS3 selectors and basic XPath syntax support, among others. As of May 2019, this library has been used by 72% of the 10 million most popular websites.
W3Schools
2| React

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. This framework lets a developer compose complex UIs from small and isolated pieces of code called “components”. It can be used as a base in the development of a single-page as well as a mobile application.
3| Angular(previously Angular JS)

Created by the Angular Team at Google and a group of developers community, Angular is a TypeScript-based open-source web application framework. This development platform can be used for building mobile and desktop web applications using TypeScript/JavaScript and other languages. It uses a hierarchy of components as its primary architectural characteristic and has a different expression syntax for property and event bindings.
4| ASP.NET

ASP.NET is an open-source, cross-platform framework for building web applications as well as services with .NET and C#. Created by Microsoft, this framework allows developers to build dynamic web applications. It enables real-time bi-directional communication between server and client. For building web applications, ASP.NET extends the .NET platform with tools and libraries such as web-page templating syntax, known as Razor for building dynamic web pages using C#, the base framework for processing web requests, libraries for common web patterns and other such.
5| Express

Express is an open-source web application framework for Node.js. This is a minimal and flexible Node.js web application framework which provides a robust set of features for web and mobile applications. The features of this framework include allowing to dynamically render HTML Pages based on passing arguments to templates, setting up of middlewares and much more.
6| Spring

Spring is an application framework written in Java programming language. This framework provides a comprehensive programming and configuration model for modern Java-based enterprise applications – on any kind of deployment platform. It includes a number of modules to provide services such as aspect-oriented programming, convention over configuration, data access, database connectivity and much more.
7| Vue

Vue is a popular framework in JavaScript. It is an open-source progressive framework for building user interfaces and is designed in such a manner that the core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.
See Also
Opinions
Natural Language Processing vs Natural Language Understanding: What’s The Difference

8| Django

Django is a high-level Python-based open-source web development framework for backend web applications. In one of our articles, we discussed the final release of Django 3.0 which will bring a number of intuitive features. This framework is designed to satisfy the complex requirements of experienced web developers.
9| Flask

Flask is a lightweight WSGI Python web application framework. This framework became widely popular as an alternative to Django projects with the monolithic structure and dependencies. It is classified as a microframework because it does not require particular tools or libraries.
10| Laravel

Laravel is a web application framework with syntax written in PHP language. Some of the features of Laravel are a modular packaging system with a dedicated dependency manager, different ways for accessing relational databases, built-in authentication and authorisation, MVC support and Object-Oriented approach, Artisan Console, Eloquent ORM and other such.
11| Ruby on Rails

Ruby on Rails is one of the most popular frameworks written in Ruby. This is an open-source server-side web application framework which is a model–view–controller (MVC) framework that provides default structures for a database, web pages, etc. It is a framework for building websites and it combines the Ruby programming language with HTML, CSS, and JavaScript to create a web application that runs on a web server.

The post TOP 11 WEB FRAMEWORKS USED BY DEVELOPERS IN 2019 appeared first on Artificial Intelligence.

]]> https://www.aiuniverse.xyz/top-11-web-frameworks-used-by-developers-in-2019/feed/ 0