First knowledge of jquery

The Lightweight JS Library

Compatible with various browsers +CSS3

Tradition: js+dhtm JQ: Frees up the programming of the client,

Environment construction

Go to the official website to get the latest version of http://jquery.com/download/, it is important to note that jquery is 2 series version 1.x and 2.x, the main difference is that 2.x is no longer compatible with IE6, 7, 8 browsers, this is to be compatible with mobile development 。 Because of the reduced code, this version is smaller and faster than the JQuery 1.x.

If developers are concerned about older versions of IE users, they can only use JQuery 1.9 and previous versions. We are using the 1.9 version of this course for compatibility issues. Each series of JQuery is divided into: compressed version (compressed) and development (development), we use the development process (development version for Code modification and debugging), the project on-line release using compressed version (because the compact version volume is smaller, more efficient).

jquery is a JavaScript scripting library that does not require a special installation, but only in the pages

<! DOCTYPE html>
Alert pops up the above information to show that the environment has been built successfully.
Jqueryhelloworld Experience
When the page is loaded, "Hello!" is displayed centered on the page. Learning JQuery through the web is the best way to do it.
<! DOCTYPE html>

Code Analysis:
$ (document). The role of ready is to wait until the nodes in the document of the page are loaded, and then execute the subsequent code , because we may depend on one element of the page when executing the code. We want to make sure that this element is actually loaded before it can be used correctly.
jquery Objects and Dom objects
For beginners who are only beginning to touch the jquery library, we need to know a little bit:
jquery objects are not the same as DOM objects
It's probably 1:30. What are jquery objects and which are DOM objects, the following highlights the jquery object, and the conversion between the two.
With a simple example, it is easy to distinguish between jquery objects and DOM objects:
<p id= "Imooc" ></p>
We want to get the DIV element with this ID IMOOC on the page and add a text to the text node: "Hello!" Learning jquery through the Web is the best way to do this, and make the text color red.
Normal processing, handled by standard javascript:
var p = document.getElementById (' Imooc ');p. InnerHTML = ' Hello! Learning jquery through the Web is the best way to ';p. Style.color = ' red ';
The DOM element obtained by the document.getElementById ("Imooc") method provided by the native DOM model is a DOM object, and the text and color are processed through the innerHTML and style properties.
The processing of jquery:
var $p = $ (' #imooc '); $p. html (' Hello! Learning jquery through the Web is the best way to '). CSS (' Color ', ' red ');
A $p jquery object is obtained through the $ (' #imooc ') method, $p is a class array object. This object contains the DOM object information, and then encapsulates a lot of operation methods, call their own method HTML and CSS, the result is consistent with the standard JavaScript processing results.
By using standard JavaScript to manipulate the DOM against the Jquyer Operation DOM, it is not difficult to find:

 
  

  
   
 
    
The object that is wrapped by the jquery method is a class array object. It's completely different from Dom objects, and the only similarity is that they all work with the DOM.
 
    
Working with the DOM through jquery allows developers to focus more on the development of business logic without needing to know exactly which DOM node has those methods, and does not need to be concerned with the compatibility of different browsers, and we develop through the API provided by jquery, and the code is much shorter.
 
   
 
  
PS: Everyone here to make a general impression on OK, there will be in-depth explanation.
jquery objects converted into DOM objects
The jquery library is essentially JavaScript code, which simply wraps the JavaScript language to provide better and more convenient DOM processing and functionality that is often used in development. We can use jquery as well as mix JavaScript native code with it. In many scenarios, we need jquery and Dom to be able to convert each other, both of which are operational DOM elements, jquery is a class array object, and the DOM object is a separate DOM element.
How do I turn a jquery object into a DOM object?
Use array subscripts to read DOM objects in jquery
HTML code
<div> element One </div><div> element two </div><div> element three </div>
JavaScript code
var $div = $ (' div ')//jquery object var div = $div [0]//Convert to DOM object div.style.color = ' red '//Manipulate DOM object properties
Find all DIV elements (3) with jquery, because the jquery object is also an array structure, you can find the first DIV element through an array subscript index, and modify the color of the first DIV element by returning the Div object, calling its Style property. One thing to note here is that the index of the array starts at 0, that is, the first element subscript is 0
The Get () method that comes with jquery
The jquery object itself provides a. Get () method that allows us to directly access the associated DOM nodes in the jquery object, providing an index of an element in the Get method:
var $div = $ (' div ')//jquery object var div = $div. Get (0)//via Get method, convert to DOM object div.style.color = ' red '//Manipulate DOM object properties
In fact, we open the source code, to see that the Get method is to use the first way to deal with, just packaged into a get to make developers more direct and convenient use.
Dom objects into jquery objects
Compared to jquery into the DOM, more of the development is the processing of a DOM object into a jquery object. $ (parameter) is a versatile method that produces different effects by passing different parameters.
If the argument passed to the $ (DOM) function is a DOM object, the jquery method wraps the DOM object into a new jquery object
After the normal DOM object is processed into a jquery object through the $ (DOM) method, we can invoke the jquery method.
HTML code
<div> element One </div><div> element two </div><div> element three </div>
JavaScript code
var div = document.getelementsbytagname (' div '); Dom object var $div = $ (div); jquery object var $first = $div. First (); Find the first DIV element $first.css (' Color ', ' red '); Set the color of the first element
The elements of all DIV nodes are obtained through getelementsbytagname, and the result is a DOM collection object, but this object is a set of number combinations (3 div elements). The $ (div) method is used to convert the jquery object by invoking the first and CSS methods in the JQuery object to find and change its color.
First knowledge of jquery