jQuery is a Javascript library that simplifies JavaScript™ and AJAX (Asynchronous JavaScript + XML, Asynchronous Javascript and XML) programming. Unlike other Javascript libraries, jQuery has its own philosophy that makes it easy for you to write code. This article will lead you to understand the philosophy of jQuery, discuss its features and functions, and provide some ajax examples and how to use plug-ins to extend jQuery.
1. What is jQuery?
jQuery is an excellent Javascript library. It was born in 2006 and was created by John Resig. Whether you are a JavaScript novice but want to try out the complexity of DOM (Document Object Model) and Ajax, or you are a JavaScript expert but are tired of repeating the boring DOM and Ajax scripts, jQuery will be your best choice Your best choice.
jQuery will help you keep your code simple and concise. You no longer have to write a lot of repetitive loops or DOM call scripts. Using jQuery, you will quickly find the key points and express your ideas with the least code.
The philosophy of jQuery is actually very simple: simple and reusable. When you understand and agree with this idea, you can begin to realize how easy and enjoyable using jQuery can make your programming!
2. Some Simple Concepts
Here is a simple example to show you how jQuery affects the code you write. What you do is actually very simple, such as adding a click response event to all links in a certain area on the page. You can use general Javascript and DOM to write it. See Listing 1 for the code:
Listing 1. DOM scripting without jQuery
var external_links = document.getElementById('external_links');var links = external_links.getElementsByTagName('a');for (var i=0;i < links.length;i++) {var link = links.item(i);link.onclick = function() {return confirm('You are going to visit: ' + this.href);};} If you use jQuery, the implementation is as follows: Listing 2. DOM scripting with jQuery$('#external_links a').click( function() {return confirm('You are going to visit: ' + this.href);}); Surprised, right? With jQuery, you can quickly find the key points and express only what you need to express without being wordy. There is no need to loop through these elements, the click() function takes care of it all. And you don't need to write too much code to manipulate the DOM. All you need is to use a few characters to define the element you are looking for. Let's take a look at how this code works, with a few tricks. First, look at the $() function—one of the most useful and powerful functions in jQuery. Most of the time, you use this function to select elements from the document. In this example, use this function to pass For strings in Cascading Style Sheets (CSS) syntax, jQuery can easily find this element. If you know a little bit about basic CSS selectors, I think this syntax should look quite familiar. In Listing2, # external_links is used to find elements with the id external_links. The following space means that jQuery needs to find all <a> elements within the #external_links element. It is a bit difficult to express it in spoken language - it is also quite troublesome to write in DOM script , however, in CSS, nothing is simpler than this. The $() function returns a jQuery object containing all elements that match the css selector. The concept of a jQuery object is like an array, but it may contain many jQuery objects. function. For example, you can call the click function to bind a click event response to each element in a jQuery object.
You can also pass an element or an array of elements to the $() function, which will add all Elements are packed into a jQuery object. You may want to apply this feature to objects like windows. For example, you might use this function to load events, like this:
window.onload = function() {// do this stuff when the page is done loading}; If using jQuery, you can write like this:
$(window).load(function() {// run this when the whole page has been downloaded}); As you know, waiting for a window to load is extremely painful because the entire page must be loaded, including everything on the page Image. In some cases, you need to load the image first, but most of the time, you may only need to see the hypertext markup (HTML). jQuery solves this problem by creating a very special event ready on the document , the usage method is as follows: $(document).ready(function() {// do this stuff when the HTML is all ready}); This code creates a jQuery object of the document element, and then calls it when the html DOM document is ready This instance. You can call this function an unlimited number of times. In addition,
In true jQuery style coding, there is also a shorthand form of this function. Simply pass a function to the $() function:
$(function() {// run this when the HTML is done downloading}); So far, I have shown you three different ways to use the $() function. The fourth way, you can use a String Creates an element. The result is a jQuery object containing this element. Listing 3 shows an example of adding a paragraph to the page:
Listing 3. Creating and appending a simple paragraph
$('<p></p>'). html('Hey World!').css('background', 'yellow').appendTo("body"); As you can see from the above example, another very powerful feature of jQuery is method chaining (method chaining), every time you call a method on a jQuery object, this method will also return a jQuery object. This means that if you need to call multiple methods on a jQuery object, you do not have to write css selectors repeatedly. It can look like this:
$('#message').css('background', 'yellow').html('Hello!').show();3.jQuery makes Ajax extremely simple. Using jQuery, Ajax cannot become any simpler. . jQuery has a series of functions that can make simple things really simple and make complex things as simple as possible. A common use of Ajax is to load a piece of html code into a certain area on the page. To To do this, you simply select the element and use the load() function. Here is an example of updating some statistics. $('#stats').load('stats.html'); Typically, you might You need to pass some parameters to the server-side page. As you may have guessed, it is very simple to use jQuery. You can choose to use $.post() or $.get(), of course, depending on your specific needs. If necessary, You can pass an optional data object and a callback function. Listing 4 is a simple example of sending data and using a callback function:
Listing 4. Sending data to a page with Ajax
$.post('save.cgi', {text: 'my string',number: 23}, function() {alert('Your data has been saved.');}); If you really want some complex Ajax code, use the $.ajax() function . You can specify the data type as xml, html, script or json, jQuery will automatically prepare the results for you and your callback function can use the data immediately. You can also set beforeSend, error, success, and complete callback functions to Give the user some more hints about the ajax experience. In addition, there are some parameters that allow you to set the timeout for ajax requests, or the "last changed" status of a page. Listing5 shows an example of getting an xml document and using the method I mentioned above. A simple example of some parameters:
Listing 5. Complex Ajax made simple with $.ajax()
$.ajax({url: 'document.xml',type: 'GET',dataType: 'xml',timeout: 1000, error: function(){alert('Error loading XML document');},success: function(xml){// do something with xml}}); When you successfully get xml feedback, you can use jQuery to Traverse the xml document, just like you do with html. This makes it very simple to manipulate an xml file and integrate the content into the page. Listing6 extends the success function, according to each <item> in the xml document on the page Added a list item.
Listing 6. Working with XML using jQuery
success: function(xml){$(xml).find('item').each(function(){var item_text = $(this). text();$('<li></li>').html(item_text).appendTo('ol');});}