Basic and Application of JQuery

Source: Internet
Author: User

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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.