jQuery is a JavaScript library that allows web developers to add extra features to their websites. It is available open source and is provided free of charge under the MIT license. In recent years, jQuery has become the most popular JavaScript library used in web development.
JQuery example
To implement jQuery, a web developer needs to reference a JavaScript file in the HTML code of the web page. Some websites host their own local copy, while others simply link to a library hosted by Google or the server. For example, a web page can load the jQuery library using the following line in the <head> section of HTML (jQuery example and cookie):
<script type = "text / javascript"
SRC = "// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
JQuery and Ajax examples
After loading the library, the web page can call any function supported by the library. Common examples include changing text, processing form data, moving elements on a page, and performing animations. jQuery can also work with Ajax code and scripting languages such as PHP and ASP to access data from a database. Because jQuery runs on the client side (not the web server), it can update information on the web page in real time without reloading the page. A common example is autocompletion, in which the search form automatically displays general data when you enter a query.
Library benefits
In addition to the free license, another major reason jQuery has gained such popularity is its cross-browser compatibility. Because each browser renders HTML, CSS, and JavaScript differently, it can be difficult for a web developer to make a website the same across all browsers. Instead of writing custom functions for each browser, the web developer can use one jQuery function, which will work in Chrome, Safari, Firefox and Internet Explorer. Support for multiple browsers has forced many developers to switch from standard JavaScript to jQuery, as this greatly simplifies the coding process.
Description
JQuery syntax is used to simplify document navigation, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides developers with the ability to create plugins on top of the JavaScript library. This allows programmers to create abstract constructs for interaction and animation at a low level, advanced effects and high-level, thematic widgets. The modular approach to jQuery library allows you to create powerful dynamic web pages and web applications.
A set of basic functions:
- selection of DOM elements;
- bypass and manipulation using the selection mechanism;
- new style of programming;
- merging algorithms and DOM data structures.
The style influenced the architecture of other JavaScript frameworks such as YUI v3 and Dojo, and also stimulated the creation of a standard Selectors API.
Microsoft and Nokia supply jQuery on their platforms. Microsoft includes it with Visual Studio for use with ASP.NET AJAX and ASP.NET MVC, and Nokia has integrated it into the web time widget development platform.
Overview
jQuery is a library of elements with a document object model (DOM). The DOM is a representation of the tree structure of all elements of a web page. jQuery simplifies the syntax for finding, selecting, and managing these DOM elements. A library can be used to search for an element in a document with a certain property (for example, all elements with the h1 tag), change one or more of its attributes (color, visibility), or accept a response to an event (for example, by clicking the mouse).
Development
The library uses such popular JavaScript features as fade ins and fade outs when hiding elements, animating and working with jQuery CSS elements. jQuery also provides an event-handling paradigm that goes beyond selecting and manipulating DOM elements. Event assignment and callback function determination are performed in one step in one place in the code.
Principles of development using jQuery (examples):
- Separating JavaScript and HTML - The library provides simple syntax for adding event handlers to the DOM using JavaScript, instead of adding HTML event attributes to invoke JS functions. Thus, he encourages developers to completely separate JavaScript code from HTML markup.
- Conciseness and clarity - promotes conciseness and clarity with tools such as chains and abbreviated function names.
- Elimination of cross-browser incompatibilities - JavaScript engines of different browsers are slightly different, so the JS code that works for one browser may not work for another. Like other JavaScript toolkits, jQuery handles all these cross-browser inconsistencies and provides a consistent interface that works across browsers.
- Extensibility - new events, elements and methods can be easily added and then reused as a plugin.
History
jQuery was originally released in January 2006 at BarCamp NYC by John Resig and was influenced by the early cssQuery library of Dean Edwards. It is currently supported by a development team led by Timmy Willison (with the jQuery selector engine, Sizzle, which is led by Richard Gibson).
Features
The library includes the following functions:
- Select DOM elements using the Sizzle open source multi-server selector mechanism
- Highlighting a DOM manipulation project based on CSS selectors that uses the names and attributes of elements, such as id and class, as criteria for selecting nodes in the DOM;
- activity;
- effects and animations;
- ajax;
- deferred and promising objects for controlling asynchronous processing;
- JSON parsing;
- Extensibility through plugins
- utilities such as feature detection;
- compatibility methods that are initially available in modern browsers, but need earlier versions, such as inArray () and each (), multi-browser (not to be confused with cross-browser).
Using
The jQuery library is a single JavaScript file containing all its common DOM functions, events, effects, and Ajax. It can be included in a web page by linking to a local copy or to one of the many copies available on public servers. The library has a Content Delivery Network (CDN) hosted by MaxCDN.
JQuery example in PHP:
<script src = "jquery.js"> </script>
Styles
jQuery has two usage styles:
- Through the $ function, which is the factory method for the jQuery object. These functions, often called commands, are integer because they all return jQuery objects.
- Through $ - prefix functions. These are utility functions that do not directly affect the object.
Access to jQuery and managing multiple DOM nodes usually begins with a call to the $ function using the CSS selector string . This returns a jQuery object that references all the relevant elements in the HTML page.
Conflict Free
jQuery enables .noConflict () mode, which frees up the control of the $ function. This is useful if jQuery is used with other libraries that also use $ as an identifier. In conflict-free mode, developers can use libraries as a replacement for $ without losing functionality.
Advanced functionality
Callback functions for handling events on elements that are not yet loaded can be registered inside .ready () as anonymous functions. These handlers will be called only when the event is triggered. For example, the following code adds a handler for clicking on an img image element:
$ (function () {
$ ('img'). on ('click', function () {
// handle the click event on any img element on the page
});
}).
Some functions return specific values (for example, $ ('# input-user-email'). Val ()). In these cases, the chain does not work because the value does not refer to the jQuery object.
Create new items
In addition to accessing DOM nodes through a hierarchy of objects, it is also possible to create new elements if the string passed as an argument to $ () looks like HTML. For example, the line finds an HTML selector with ID cards and adds an option item with a VAG value and Volkswagen text:
$ ('# select carmakes')
.append ($ ('<option />')
.attr ({value: VAG})
.append (Volkswagen)).
Utilities
$ Prefixed jQuery functions are utility functions that affect global properties and behavior. The following example uses the each () function, which iterates through arrays:
$ .each ([1,2,3], function () {
console.log (this is + 1);
});
This post jQuery example writes 2, 3, 4 to the console.
Ajax
You can execute cross-browser Ajax requests using $ .ajax () jQuery, an example of which are related methods for loading and processing remote data:
$ .ajax ({
type: POST,
url: '/process/submit.php',
data: {
Name: John
location: Boston,
},
}). done (function (msg) {
alert ('Data Saved:' + msg);
}). fail (function (xmlHttpRequest, statusText, errorThrown) {
alert (
'Failed to send your message. \ N \ n'
+ 'XML Http Request:' + JSON.stringify (xmlHttpRequest)
+ ', \ nStatus Text:' + statusText
+ ', \ nError Thrown:' + errorThrown);
});
In this example, the server name is data name = John and location = Boston for /process/submit.php. When this request completes, the function is called to alert the user. If the request fails, it will warn the user about the error, the status of the request, and the specific error.
Plugins
The jQuery architecture allows developers to create plug-in code to extend various functions. There are thousands of plug-ins available on the Internet that span a range of features, such as Ajax helpers, web services, dynamic lists, XML and XSLT tools, drag and drop, events, cookie handling, and modal windows.
Alternative search engine plugins exist, such as jquer.in, which use more specialized approaches, such as listing only plugins that meet certain criteria (for example, those that have a public code repository). The developer provides the Learning Center, a jQuery resource for beginners that can help users understand JavaScript and get started developing plugins.
jQuery UI
jQuery UI is a collection of GUI widgets, animated visual effects, and themes implemented using jQuery CSS (JavaScript libraries), cascading style sheets, and HTML. According to the JavaScript analytics service, Libscore, the jQuery user interface is used on over 197,000 of the best websites, making it the second most popular JS library. The most famous of them are Pinterest, PayPal, IMDb, The Huffington Post and Netflix.
jQuery UI is a free and open source software distributed by the Foundation under the MIT license. It was first published in September 2007.
jQuery Mobile
jQuery Mobile is a touch-optimized web infrastructure (also known as mobile infrastructure). The main focus in the development is on creating an infrastructure compatible with the wide range of smartphones and tablet computers needed for the growing digital technology market. Compatible with other mobile application platforms such as PhoneGap, Worklight and many others.