Basic and Application of JQuery
<Reference>1. What is it? The role of DOM: provides a dynamic way to operate HTML elements. JQuery is an excellent js library. A tool used to operate HTML elements. Relationship between jQuery and DOM: DOM-tree. JQuery is a collection of multiple DOM models. Core design concepts of jQuery: write less, do more; DOM: document. getElementById ("id"); jQuery obtains the id value: $ ("# id"); $ = disadvantages of jQuery: efficiency will decrease. Note: jQuery and DOM can be mixed. 2005 was born ------- 11 years ago. 2. What are the functions? 1. Obtain the HMTL element --- id, name, tag ...... 2. dynamically change the css style and attributes on the page. <P color = "red"> type 2: <script type = "text/javascript" src = ". /js/jquery-1.7.2.min.js "> </script> Step 3: Test; 4. selector basic Selector
- Id selector: $ ("# p1" ).css ({"color": "red", "font-size": "50px "});
- Class selector: $ (". p1" ).css ("color", "red ");
- Label selection: $ ("p" ).css ("color", "blue ");
- Filter after selection: $ ("p [class = 'p1']" ).css ("color", "blue ");
- Wildcard selector: $ ("div *" ).css ("color", "blue"); (Note that there is a space key before the asterisk)
- Group selector: $ ("h2, # div1,. p2, [title = 'p2']" ).css ("color", "yellow ");
Pseudo-class selector: there is a ":" (colon) specific position selector before the selector: first,: last,: eq ()
- $ ("Tr: last" ).css ("background-color", "red"); -------- the last row of the table turns red
- $ ("Tr: first" ).css ("background-color", "red ");
- $ ("P" ).eq(0).css (); ----- get the first <P> tag
Specify Range selector: (use multiple tables)
- : Even, // odd number of rows
- : Odd, // even number of rows
- Gt (),
- Lt ()
Note: specifying a Range selector is very convenient for table use. <Script type = "text/javascript"> $ (function () {// automatically loaded with the page // $ ("# p1" ).css ({"color ": "red", "font-size": "20px"}); // $ (". p2 ").css (" color "," red "); // $ (" p [class = 'p1'] ").css (" color "," blue "); // $ ("div *" ).css ("color", "green"); // $ ("h2, # div1 ,. p2, [title = 'p2 '] ").css (" color "," yellow "); // $ (" tr: first ").css (" background-color ", "red"); // $ ("tr: last" ).css ("background-color", "green"); // $ ("tr" ).eq(1).css ("Background-color", "blue"); // $ ("tr: even" ).css ("background-color", "blue"); // $ ("tr: odd "background .css (" background-color "," green "); $ (" tr: gt (1) "background .css (" background-color "," blue "); $ ("tr: lt (1)" ).css ("background-color", "red") ;}); </script> 5. Attribute and css operation attribute operations: attr (); css style operations: css ("", ""); css ({"": "", ":" "}); 6. Get text and value? Text: text (); <p> hello </p> $ ("# p3"). text () value val (): mainly for values in form elements. 7. Event Control jQuery sets a unified bind interface to add Event Control for each matching tag. Case: Click the p tab to make the font red. 1. event registration bind $ ("p "). bind (); 2. toggle can bind two methods for click. 3. hover: It can simulate hover events and move the mouse up and move the mouse away. 8. Comprehensive cases. Case 1: Use jQuery to determine whether the password is consistent. <Script type = "text/javascript" src = "js/jquery-1.7.2.min.js"> </script> <script type = "text/javascript"> $ (function () {$ ("# username "). focus (function () {if ($ ("# username "). val () = "Enter the user name") $ (this ). val ("") ;}); $ ("# username "). blur (function () {if ($ ("# username "). val () = "") $ (this ). val ("Enter the user name") ;}; $ ("# pwd "). focus (function () {if ($ ("# pwd "). val () = "enter the password") $ (this ). val ("");}); $ ("# Pwd "). blur (function () {if ($ ("# pwd "). val () = "") $ (this ). val ("Enter Password"); if ($ ("# pwd "). val () ==$ ("# username "). val () {$ ("# s1 "). text ("available username" ).css ("color", "green");} else {$ ("# s1 "). text ("User Name unavailable" ).css ("color", "red ");}});}); </script>