jquery Learning Notes

1. How JQuery works 1.1. Start using jquery

JQuery itself has only one JS file, so to use it, just as with other JS files, it can be used directly into it.

<script type= "Text/javascript" src= "Jquery-1.8.3.js" ></script>

However, it is important to note that most of the features of JQuery need to work according to the DOM model of the document, so it first needs to be parsed correctly into the DOM model structure of the entire document. For this, in general, the work we do with jQuery requires that the entire document be fully loaded by the browser before it starts:

<script>
$ (document). Ready (function() {
  alert (' Hello world! ');
  $ ("P"). Click (function(event) {
    alert (' Thanks for visiting! ');
  }
); </script>

$ is a function that is defined in jQuery, and it can be easily and conveniently taken to the relevant node. $ (document). Ready is an event binding, which is called after the document has been loaded.

The fact that $ () equals jquery () is a shorthand for the core function of jquery.

After the JavaScript code, the default is written in the $ (document). Ready for this event binding.

Of course, $ (document). Ready () can be simply written as $ ().

As I said before, $ is a variable name used in jquery, and if for some reason you can't let jQuery use it, you can do this with jquery.noconflict (), whose return value is the object of jquery.

Jquery.noconflict ();
= jquery.noconflict ();

1.2. The conversion between a jquery object and a DOM object

Typically, a JQuery object is obtained by using $ (). It encapsulates the operation of many Dom objects, but it differs from DOM objects. For example, if you want to use obj.innerhtml, it can only be used if obj is a DOM object, and correspondingly, if it is a JQuery object you should use Obj.html ().

Go from DOM object to JQuery object: $ (obj).

Go from a JQuery object to a DOM object: obj[0].

A more formal conversion from a jquery object to a DOM is a get () method that uses the jquery object:

<ul>
  <li id= "foo" >foo</li>
  <li id= "Bar" >bar</li>
</ul>

$ (' Li '). get ();
[<li id= "foo", <li id= "Bar";]

$ (' li '). Get (0);
<li id= "foo" >

$ (' li '). Get ( -1);
<li id= "Bar" >

2. A wide selection of selectors

The full list is in  http://api.jquery.com/category/selectors/ . 2.1. General Selector $ ("*") Selects all node ("#id") ID selectors, noting some of these special characters, such as  . (". Class") class selector ("tag") Select child element ("ancestor descendant") by label selection (' Parent > Child ') Select a direct sub-element: Focus gets the focused element:first-child  : Last-child Select first/Last child element:first : Last intercept first/FINAL qualifying element ("Prev + next") Direct sibling Element ("prev ~ siblings") sibling element: Nth-child () index selection, index starting from 1  : Nth-child (Odd)  : Nth-child (even)  : Nth-child (4n) 2.2. Property selector [name~=] The value "] property includes a word [name=" value "] property that is exactly equal to the specified value [name!=" Value "] property is not equal to the specified value [name] includes the element with the specified property 2.3. Control Selector : Checke D Select all the elements that are in: Selected the selected element:d isabled : Enabled Select the disabled/not disabled element: Hidden select the hidden element, not only the   [type= "hidden"]  nbsp Display:none:visible visible Controls,  visibility:hidden  and   opacity:0  are also considered to be visible.

: Input:button:checkbox:file:image:p Assword:radio:reset:submit:text Specific control, the image control is [type= "image"] 2.4. Other selectors [name= "Value"][name2= "value2"] multiple and Conditions ("Selector1, Selector2, Selectorn") multiple OR Conditions: not () negative selection (': Contains (" Text ")" contains the element with the specified content: eq (): LT (): GT (): Even:odd list index selection (negative numbers not supported) (': Has (selector) ') eligible for re-filtering: header selection like H1,h2,h3 these title elements Vegetarian: only-child element with only one child element: Empty null element, that is, no content and No child element:p arent non-empty element 3. Node Roaming

Full list in http://api.jquery.com/category/traversing/

With the selector above, we can get the node that we want to handle. But in general, we also want to get some relative nodes of the current node for the next step, such as "All child nodes", "Next sibling node" and something like that. 3.1. Call chain processing . Add () Adds a new object to the existing node sequence. Andself () joins the original sequence at any time in the call chain. EQ () specifies the index pick node, which supports negative numbers. Filter (). is (). not (). Fin D (). First (). Last (). have () sequence selection. End () chain Point backtracking

<ul class= "First" >
   <li class= "foo" >list item 1</li>
   <li>list Item 2</li>
   <li class= "Bar" >list item 3</li>
</ul>
<ul class= "Second" >
   <li class= "foo" >list Item 1</li>
   <li>list item 2</li>
   <li class= "bar" >list Item 3</li>
</ul>

$ (' Ul.first '). Find ('. Foo '). css (' background-color ', ' Red ').
  end (). Find ('. Bar '). CSS (' Background-color ', ' green ');

3.2. Child nodes. Children () All child nodes, can be added filter conditions,. Children (selector) 3.3. Sibling nodes. siblings (). Next (). Nextall (). Nextuntil (). Prev (). Prevall (). Prevuntil (). closest () sibling node selection 3.4. Parent node. Parent (). Parents (). Parentsuntil () parent node selection 4. Element control related 4.1. The difference between attributes and properties

Attributes is the conceptual category of attribute nodes in XML structures:

<body onload= "Prettyprint ()" ></body>

The above code represents the Body node, which has a attributes named OnLoad.

Properties are the conceptual category of object attributes for DOM objects. This generally does not have an intuitive performance, but it can always be accessed, such as:

$ (' body '). Get (0). TagName;
BODY

Although attributes and properties are different conceptual categories, they have common access attribute names for some special properties, such as id&