Home > Developer > Web Develop
1. Download a jquery.js file
2. Introduction of Jquery.js File
1 <script type= "Text/javascript" src= "__public__/js/jquery-1.7.2.min.js" ></script>2 <script type= "Text/javascript" >3 $ (function() {45/// There's a way to use jquery here. 6 7 8 }); 9 </script>3. Using jquery to provide methods
Pre-school, a way to cram for a bit of jquery. Here, I from a practical point of view to cram, not from the basic point of view to cram. Because the basics are available in the jquery Learning manual.
Example 1. Click an event for an HTML element (using the attribute level)
1 < type= "checkbox" name= "access[]" ID= "App_1_1" Value= "1_1" level= "1"/>
jquery is expressed as follows:
1 $ (' input[level=1] '). Click (function() {234 5 });Example 2. Select tags in HTML autonomously and arbitrarily
$ (' #id '). Siblings () All sibling nodes of the current element
$ (' #id '). Prev () current element before a sibling node
$ (' #id '). Prevaall () All sibling nodes before the current element
$ (' #id '). Next () The first sibling node after the current element
$ (' #id '). Nextall () All sibling nodes after the current element
These three methods can add selectors, give the selection criteria, you can find the sibling node you specified.
Such as:
1 var inputs_all=$ (this). Parents (' Div.app '). Find (' input ');$ (This) indicates the object that is currently clicked;
. Parents (' Div.app ') represents the ancestor of the object, <div class= the HTML element node of the "app" ></div>;
. Find (' input ') represents the <input/> label for all HTML elements under the object.
So, Inputs_all is a collection of all the <input/> tags found.
Click on the top-level input, select, then all are selected, not selected, then all are not selected.
1$ (' input[level=1] '). Click (function(){2 varinputs_all=$ ( This). Parents (' Div.app '). Find (' input ');3 if($( This). attr (' checked ') = = "Checked") {4Inputs_all.attr (' checked ', ' checked ');5}Else{6Inputs_all.removeattr (' checked ');7 }8});
$ (this). attr (' checked ') indicates the property value of the currently clicked object;
Inputs_all.attr (' checked ', ' checked ') indicates that all <input/> tags of the Inputs_all object are added with a checked attribute and assigned a value of checked. That is <input checked= "checked"/>
Inputs_all.removeattr (' checked ') indicates that all <input/> tags of the Inputs_all object remove a checked attribute. That is <input/>
This is the best practice.
1 var all_born_children=$ (this). Parents (' DT '). Next (' Span.method '). Find (' input '); 2 var born_parent=$ (this). Parents (' span.action '). Prev (). Find (' input '); 3 var born_brothers=$ (this). Parents (' DL '). Siblings (). Children (' DT '). Find (' input ');4, the simple debugging method of jquery
The debug output code is as follows: Write the following method within the jquery click event
1 varTbody = "";//Debug Code2$.each (Born_brothers,function(n,value) {3Alert (n+ ' +value);//Debug Code4 varTRS = "";//Debug Code5TRS + = "<tr><td>" + value.checked +cunzai2+ "</td></tr>";//Debug Code6Tbody + = TRS;//Debug Code7 });8$ ("#project"). Append (tbody);//Debug Code9 //write output position in body tagTen //<div id= "project" > Output here </div>
Also, add the <body> tag to the
1 <Div id= "project"> here output </Div >
The full code for jquery is as follows: To turn on jquery debugging, remove the front//debug code
1$ (' input[level=2] '). Click (function(){2 varall_born_children=$ ( This). Parents (' DT '). Next (' Span.method '). Find (' input ');3 varborn_parent=$ ( This). Parents (' span.action '). Prev (). Find (' input ');4 varborn_brothers=$ ( This). Parents (' DL '). Siblings (). Children (' DT '). Find (' input ');5 6 7 //var tbody = "";//debug Code8 varCunzai2=0;9$.each (Born_brothers,function(n,value) {Ten One if(value.checked==true){ Acunzai2++; - } - //alert (n+ ' +value);//debug Code the //var trs = "";//debug Code - //TRS + = "<tr><td>" + value.checked +cunzai2+ "</td></tr>";//debug Code - //tbody + = trs;//Debug Code - + }); - //$ ("#project"). Append (tbody);//debug Code + A at if($( This). attr (' checked ') = = "Checked") { -All_born_children.attr (' checked ', ' checked '); -Born_parent.attr (' checked ', ' checked '); -}Else{ -All_born_children.removeattr (' checked '); - if(cunzai2==0) { inBorn_parent.removeattr (' checked '); -}Else{ toBorn_parent.attr (' checked ', ' checked '); + } - } the *});
Now practice practiced hand to see. In doubt, please contact: QQ e-mail: [Email protected]
Methods and tricks for using 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
