Home > Developer > Web Develop
1. What is jquery
[1] jquery was created by American John Resig and has attracted many JavaScript gurus from around the world to join its team.
[2] jquery is another excellent JavaScript framework following prototype. Its purpose is--write Less,do more!
[3] It is a lightweight JS library (only 21k after compression), this is not the other JS library, it is compatible with CSS3, but also compatible with a variety of browsers
[4] jquery is a fast, concise JavaScript library that makes it easier for users to handle htmldocuments, events, animate, and easily provide Ajax interactivity to websites.
[5] The big advantage of jquery is that its documentation is full, and that the various applications are detailed, as well as a number of mature plugins to choose from.
2. What is a Juery object
JQuery jquery wrapper domjquery object is exclusive . jquery object , Span class= "S5" > Then it can use jquery
$ ("#test"). html () means: Gets the HTML code within the element with ID test. where HTML () is the method in jquery This code is equivalent to using the DOM implementation code: document.getElementById ("test"). InnerHTML; Although jquery objects are created after wrapping a DOM object, jquery cannot use any of the methods of the DOM object, nor does the DOM object use the methods in jquery. Random use will error var $variable = JQuery Object var variable = dom Object $variable[0]:jquery object to DOM object $ ("#msg"). html (); $ ("#msg") [0].innerhtmlBasic syntax for jquery:$ (selector). Action ()
3. Find elements
3.1 Selector
3.1.1 Basic Selector$ ("*") $ ("#id") $ (". Class") $ ("element") $ (" . Class,p,div")$ (". Outer div") $ (". Outer>div") $ (". Outer+div") $ ( ". outer~div")$ ("Li:first") $ (" Li:eq (2)") $ ("Li:even") $ ( "LI:GT (1)")$ (' [id= ' Div1 "] ') $ (' [" alex= "SB"][id])$ ("[type= ' text ']")----->$ (": Text") note applies only to the input tag : $ ("input:checked")Example:
<! DOCTYPE html>//Basic Selector //$ ("#d1"). CSS ("Color", ' red ') //$ (". C1"). CSS ("Color", ' red ') //$ ("P"). CSS ("Color", ' green ') //$ ("#d1, div"). CSS ("Color", ' green ' ) //Combo Selector //$ (". Outer. C3"). CSS ("Color", ' red ') //Filter //$ (". C1:first"). CSS ("Color", ' red ') //$ (". C1:last"). CSS ("Color", ' red ') //$ (". C1:eq (i)"). CSS ("Color", ' red '); //$ (". C1:GT (1)"). CSS ("Color", ' red ') //Property Selector //$ ("[egon= ' dog '][alex]"). CSS ("Color", ' red ') //Form selector: Applies to form labels only //$ ("[type= ' text ']"). Val ("Hello") //$ (": Text"). Val ("Hello") //Filter //var i=3; //$ (". C1"). EQ (i). CSS ("Color", ' red ') //Console.log ($ ("#d1"). Hasclass ("C1"))//True //Find Filters //Look down //$ ("#d1"). Nextall (). CSS ("Color", ' red ') //$ ("#d1"). Next (). CSS ("Color", ' red ') //$ ("#d1"). Nextuntil ("#p6"). CSS ("Color", ' Red ' ) //Look up //$ ("#p5"). Prev (); //$ ("div"). Prevall (); //$ ("div"). Prevuntil () //Find all the brothers tags //$ ("#d1"). Siblings (). CSS ("Color", ' red ') //Find : Finding descendants children: finding a son //Console.log ($ (". Outer"). Children (). length);//2 //$ (". Outer"). Children (". C3"). CSS ("Color", "Red" ) //Console.log ($ (". Outer"). Find ()); // //$ (". Outer"). Find (". c3"). CSS ("Color", "Red" ) //find the parent tag//$ ("#d3"). Parent (). parent ();//$ ("#d3"). Parents ();//$ ("#d3"). Parentsuntil (". Outer")</script></body>View Code3.1.6. Form Property Selector
: Enabled :d isabled : Checked : Selected
<body><form> <input type= "checkbox" value= "123" checked> <input type= "checkbox" value= "456" Che cked> <select> <option value= "1" >Flowers</option> <option value= "2" selected= "selected" >Gardens</option> <option value= "3" selected= "selected" >Trees</option> <option value= "3" Selected= "selected" >Trees</option> </select></form><script src= "Jquery.min.js" ></ Script><script>//Console.log ($ ("input:checked"). length); 2 //Console.log ($ ("option:selected"). length); Only one is selected by default, so you can only lenth:1 $("Input:checked"). each (function() {Console.log ($ ( This). Val ())})</script></body>View Code3.2 Filters
3.2.1 Filter Filter$ ("li"). EQ (2) $ ("Li"). First () $ ("ul Li"). Hasclass ("test")
3.2.2 Find FiltersFind child Tags: $ ("div"). Children (". Test") $ ("div"). Find (". Test") looks down the sibling tag: $ (". Test"). Next () $ (". Test"). Nextall () $ (". Test"). Nextuntil () look up brother tag: $ ("div"). Prev () $ ("div"). Prevall () $ ("div"). Prevuntil () Find all Brothers Tags: $ ("div"). Siblings () finds the parent tag: $ (". Test"). Parent () $ (". Test"). Parents () $(". Test"). Parentuntil ()
Front-end Base--jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
