The first knowledge of jquery

What is jquery? jquery is a multi-browser-compatible JavaScript library. jquery can greatly simplify JavaScript programming, and its purpose is: "Write less,do more." jquery contains the following content:

1. HTML element selection
2. HTML element manipulation
3. CSS Actions
4. HTML event functions
5. JavaScript effects and animations
6. HTML DOM Traversal and modification
7. Ajax

Download Link: jquery official website

jquery Object

jquery objects are objects that are created after wrapping a DOM object through jquery, andjquery is unique to jquery. If an object is a jquery object , then it can use the method in jquery: For example, $ ("#i1"). html ().

$ ("#i1"). html () means: Gets the HTML code for an element with an ID value of I1, where HTML () is the method in jquery. equivalent to document.getElementById ("I1") in JavaScript. InnerHTML; Although the jquery object is created after wrapping the DOM object, the jquery object cannot use any of the DOM object's methods, nor does the DOM object use jquery or the methods in jquery. The difference between jquery and JavaScript in declaring variables:

1 var $variable = jquery object 2var variable = dom Object 3 $variabl [0]     // jquery objects converted to DOM objects

Take the example above for the use of jquery objects and DOM objects:

1 $ ("#i1"). html ();    // jquery objects can use the jquery method 2 $ ("#i1") [0].innerhtml;    // DOM objects using the DOM method

jquery basic Syntax $ (selector). Action () find label > Selector ID selector:

$ ("#id");

Class selector:

$ (". ClassName");

Tag Selector:

$ ("TagName");

Combo selector:

$ ("#id,. Classname,tagname")  

Hierarchy selector:

$ ("#id a");    // Find all the A tags below the ID, and the middle spaces represent the descendants. $ ("#id > A");    // find the first A-label

Basic selector:

: First    //  Number one: EQ (index)    // Index equal to the element that is indexed : Last    //  last one

Property selector:

<input type= "text" ><input type= "password" ><input type= "checkbox" >$ ("Input[type =" CheckBox '] ");    // input label to the checkbox type

FilterNext element:

1 $ ("#id"). Next ();    // filter out the next element 2 $ ("#id"). Nextall ();    // filter out all of the following elements 3 $ ("#id"). Nextuntil ("#i2");    // filter out all of the following elements to find the ID i2 terminated

Previous element:

$ ("#id"). Prev ();    // filter out the previous element $ ("#id"). Prevall ();    // filter out all of the above elements $ ("#id"). Prevuntil ("#i2");    // filter out all of the following elements to find the ID i2 terminated

Father elements:

1 $ ("#id"). Parent ();    // the parent () method returns the immediate parent element of the selected element.  2 $ ("#id"). Parentsall ();    // Parentsall () returns all ancestor elements of the selected element 3 $ ("#id"). Parentsuntil ();    // the Parentsuntil () method returns all ancestor elements between selector and stop. 

Child elements and sibling elements:

$ ("#id"). Children ();    // all child elements $ ("#id"). siblings ();    // all sibling elements

Find elements:

$ ("id"). Find ()

Actions > properties are used for custom properties:

attr () removeattr ()

For checkboxes and radio

Prop () Removeprop ()

Attention:there is a bug in the 1.x and 2.x version of jquery when using attr to copy the checkbox, which is not the case in the 3.x version of jquery. For compatibility, we try to use a specific prop () when dealing with checkboxes and radio, and do not use attr ("Checked", "checked"). Practice Questions:1. Find the ID on this page is i1The label
$ ("#i1")
2. Find all of the pages on this page h2Label $ ("H2")
3. Find all of the pages on this page inputLabel $ ("input")
4. Find this page in all style classes c1The label $ (". C1")
5. Find this page in all style classes btn-defaultThe label $ (". Btn-default")
6. Find this page in all style classes c1The label and all h2Label $ (". C1,h2")
7. Find this page in all style classes c1The label and ID are p3The label $ (". C1, #p3")
8. Find this page in all style classes c1The label and all style classes have btnThe label $ (". C1,btn")
9. Find this page formAll of the labels inputLabel $ ("Form input")
10. Find this page labelUnder the label inputLabel Sub-label $ ("Label>input")
11. Locate the page next to labelLabel's inputLabel $ ("Label+input")
12. Find the ID in this page p2After the label, all and its peers. liTags $ ("#p2 ~li")
13. Locate the ID value f1The label below the first input tag $ ("#f1 Input:first")
14. Locate the ID value my-checkboxThe label below the last input tag $ ("#my-checkbox input:last")
15 Locate the ID value my-checkboxThe label below is not selected for the input tag $ ("#my-checkbox input:not (': Checked ')")
16. Find all that contain inputLabel's labelLabel
$ ("Label:has (input)")

The first knowledge of jquery