Technical point 4: jquery

Irving the procedural ape 2020-11-09 19:27:33
technical point jquery


jQuery

One 、jQuery Introduce

1. What is? jQuery?

jQuery, seeing the name of a thing one thinks of its function , That is to say JavaScript And query (Query), It's just auxiliary JavaScript Developed js Class library .

2.jQuery The core idea

Its core idea is write less,do more( Write less , To do more ), So it implements a lot of browser compatibility issues .

3.jQuery The popularity of

jQuery Now it has become the most popular JavaScript library , Before the world 10000 Of the most visited sites , There are more than 55% In the use of jQuery.

4.jQuery The benefits of

① Open source 、 free ;

② The grammar design is simple , Can make development more convenient ;

Two 、jQuery First experience

demand : Use jQuery Bind a button to a click event ?

Code example :

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery Click events </title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("#btn").click(function () { alert("jQuery Click event for "); }); }); </script></head><body> <button id="btn"> Button </button></body></html>

The effect is as follows :

 

 

3、 ... and 、jQuery Core function

$ yes jQuery Core function of , Can finish jQuery Many functions of .$() It's called $ This function .1、 The incoming parameter is [ function ] when : Indicates after the page is loaded . amount to window.onload = function(){}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery Click events </title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { // Equivalent to window.onload = function(){} }); </script></head><body> </body></html>
2、 The incoming parameter is [ HTML character string ] when : Will create this for us html Label object .
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery Click events </title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { var $div = $("<div> I am a div</div>"); $div.appendTo("body"); }); </script></head><body></body></html>

The effect is as follows :

 

 

3、 The incoming parameter is [ Selector string ] when : $(“#id Property value ”);id Selectors , according to id Query tag object $(“ Tag name ”); Tag name selector , Query the tag object according to the specified tag name $(“.class Property value ”); Type selector , According to class Property query tag object
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery Click events </title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { // Select the tag according to the tag name alert($("div")); // according to id Check the tab $("#btn01").click(function () { alert("jQuery Of id Selectors "); }); // according to class Check the tab $(".cla01").click(function () { alert("jQuery Of class Selectors "); }); }); </script></head><body> <div> I am a div</div> <button id="btn01"> Button 1</button> <button class="cla01"> Button 2</button></body></html>
 4、 The incoming parameter is [ DOM object ] when : Will take this. dom Object to jQuery object .
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery Click events </title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { var btnObj = document.getElementById("btn01"); alert(btnObj); alert($(btnObj)); }); </script></head><body> <div> I am a div</div> <button id="btn01"> Button 1</button> <button class="cla01"> Button 2</button></body></html>

The effect is as follows :

 

 

 

 

Four 、jQuery Objects and dom Object distinction

1、 What is? jQuery object , What is? dom object

 

 

 

 

2、 problem :jQuery What is the nature of the object ?

jQuery The object is dom An array of objects + jQuery Provides a series of function functions .
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery Click events </title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { var $btn = $("button"); console.log($btn); for (var i = 0; i < $btn.length; i++) { console.log($btn[i]); } }); </script></head><body> <button> Button 1</button> <button> Button 2</button> <button> Button 3</button></body></html>

The effect is as follows :

 

 

3、jQuery Objects and Dom Object usage differences

jQuery Object cannot be used DOM Properties and methods of objects DOM Objects can't use jQuery Properties and methods of objects

4、Dom Objects and jQuery Object rotation

dom Object to jQuery object (* a key )

① To have a first DOM object

②$( DOM object ) It can be transformed into jQuery object

jQuery Object to dom object (* a key )

① To have a first jQuery object

②jQuery object [ Subscript ] Take out the corresponding DOM object

5、 ... and 、jQuery Selectors (***** a key )

1、 Basic selector (**** a key )

 

  Add :

p.myclass: The tag name must be p, and class The value of the property is myclass.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="../script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { //1. choice id by one The elements of "background-color","#bbffaa" $("#btn1").click(function () { $("#one").css("background-color","#bbffaa"); }); //2. choice class by mini All elements of $("#btn2").click(function () { $(".mini").css("background-color","#bbffaa"); }); //3. choice The element name is div All elements of $("#btn3").click(function () { $("div").css("background-color","#bbffaa"); }); //4. Select all elements $("#btn4").click(function () { $("*").css("background-color","#bbffaa"); }); //5. Choose all span Elements and id by two The elements of $("#btn5").click(function () { $("span,#two").css("background-color","#bbffaa"); }); }); </script> </head> <body><!-- <div> <h1> Basic selector </h1> </div> --> <input type="button" value=" choice id by one The elements of " id="btn1" /> <input type="button" value=" choice class by mini All elements of " id="btn2" /> <input type="button" value=" choice The element name is div All elements of " id="btn3" /> <input type="button" value=" choice All the elements " id="btn4" /> <input type="button" value=" choice be-all span Elements and id by two The elements of " id="btn5" /> <br> <div class="one" id="one"> id by one,class by one Of div <div class="mini">class by mini</div> </div> <div class="one" id="two" title="test"> id by two,class by one,title by test Of div <div class="mini" title="other">class by mini,title by other</div> <div class="mini" title="test">class by mini,title by test</div> </div> <div class="one"> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini" title="tesst">class by mini,title by tesst</div> </div> <div style="display:none;" class="none">style Of display by "none" Of div</div> <div class="hide">class by "hide" Of div</div> <div> contain input Of type by "hidden" Of div<input type="hidden" size="8"> </div> <span class="one" id="span">^^span Elements ^^</span> </body></html>

2、 Hierarchy selector (**** a key )

 

 

Code example :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="../script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ //1. choice body In all of the div Elements $("#btn1").click(function(){ $("body div").css("background", "#bbffaa"); }); //2. stay body Inside , choice div Subelement $("#btn2").click(function(){ $("body>div").css("background", "#bbffaa"); }); //3. choice id by one Next div Elements $("#btn3").click(function(){ $("#one + div").css("background", "#bbffaa"); }); //4. choice id by two All of the following elements of div Brother element $("#btn4").click(function(){ $("#two ~ div").css("background", "#bbffaa"); }); }); </script> </head> <body> <!-- <div> <h1> Hierarchy selector : Select elements according to their hierarchical relationships </h1> ancestor descendant : parent > child : prev + next : prev ~ siblings : </div> --> <input type="button" value=" choice body In all of the div Elements " id="btn1" /> <input type="button" value=" stay body Inside , choice div Subelement " id="btn2" /> <input type="button" value=" choice id by one Next div Elements " id="btn3" /> <input type="button" value=" choice id by two All of the following elements of div Brother element " id="btn4" /> <br><br> <div class="one" id="one"> id by one,class by one Of div <div class="mini">class by mini</div> </div> <div class="one" id="two" title="test"> id by two,class by one,title by test Of div <div class="mini" title="other">class by mini,title by other</div> <div class="mini" title="test">class by mini,title by test</div> </div> <div class="one"> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini" title="tesst">class by mini,title by tesst</div> </div> <div style="display:none;" class="none">style Of display by "none" Of div</div> <div class="hide">class by "hide" Of div</div> <div> contain input Of type by "hidden" Of div<input type="hidden" size="8"> </div> <span id="span">^^span Elements ^^</span> </body></html>

3、 Filter selector  

Basic filter :

 

  Code example :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="../script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ function anmateIt(){ $("#mover").slideToggle("slow", anmateIt); } anmateIt(); }); $(document).ready(function(){ //1. Select first div Elements $("#btn1").click(function(){ $("div:first").css("background", "#bbffaa"); }); //2. Choose the last div Elements $("#btn2").click(function(){ $("div:last").css("background", "#bbffaa"); }); //3. choice class Not for one All of the div Elements $("#btn3").click(function(){ $("div:not(.one)").css("background", "#bbffaa"); }); //4. Select even index values div Elements $("#btn4").click(function(){ $("div:even").css("background", "#bbffaa"); }); //5. Select an odd index value div Elements $("#btn5").click(function(){ $("div:odd").css("background", "#bbffaa"); }); //6. Select index value greater than 3 Of div Elements $("#btn6").click(function(){ $("div:gt(3)").css("background", "#bbffaa"); }); //7. Select the index value equal to 3 Of div Elements $("#btn7").click(function(){ $("div:eq(3)").css("background", "#bbffaa"); }); //8. Select index value less than 3 Of div Elements $("#btn8").click(function(){ $("div:lt(3)").css("background", "#bbffaa"); }); //9. Choose all the title elements $("#btn9").click(function(){ $(":header").css("background", "#bbffaa"); }); //10. Select all the elements that are currently executing the animation $("#btn10").click(function(){ $(":animated").css("background", "#bbffaa"); }); //11. Select the last one that doesn't perform animation div Elements $("#btn11").click(function () { $("div:not(:animated):last").css("background", "#bbffaa"); }); }); </script> </head> <body> <!-- <div> :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated </div> --> <input type="button" value=" Select first div Elements " id="btn1" /> <input type="button" value=" Choose the last div Elements " id="btn2" /> <input type="button" value=" choice class Not for one All of the div Elements " id="btn3" /> <input type="button" value=" Select even index values div Elements " id="btn4" /> <input type="button" value=" Select an odd index value div Elements " id="btn5" /> <input type="button" value=" Select index value greater than 3 Of div Elements " id="btn6" /> <input type="button" value=" Select the index value equal to 3 Of div Elements " id="btn7" /> <input type="button" value=" Select index value less than 3 Of div Elements " id="btn8" /> <input type="button" value=" Choose all the title elements " id="btn9" /> <input type="button" value=" Select all the elements that are currently executing the animation " id="btn10" /> <input type="button" value=" Select the last one that doesn't perform animation div" id="btn11" /> <h3> Basic selector .</h3> <br><br> <div class="one" id="one"> id by one,class by one Of div <div class="mini">class by mini</div> </div> <div class="one" id="two" title="test"> id by two,class by one,title by test Of div <div class="mini" title="other">class by mini,title by other</div> <div class="mini" title="test">class by mini,title by test</div> </div> <div class="one"> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini" title="tesst">class by mini,title by tesst</div> </div> <div style="display:none;" class="none">style Of display by "none" Of div</div> <div class="hide">class by "hide" Of div</div> <div> contain input Of type by "hidden" Of div<input type="hidden" size="8"> </div> <div id="mover"> Executing animated div Elements .</div> </body></html>

Content filter : 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="../script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ function anmateIt(){ $("#mover").slideToggle("slow", anmateIt); } anmateIt(); }); /** :contains(text) :empty :has(selector) :parent */ $(document).ready(function(){ //1. choice Contains text 'di' Of div Elements $("#btn1").click(function(){ $("div:contains('di')").css("background", "#bbffaa"); }); //2. The selection does not contain child elements ( Or text elements ) Of div Empty elements $("#btn2").click(function(){ $("div:empty").css("background", "#bbffaa"); }); //3. Choose to contain class by mini Elemental div Elements $("#btn3").click(function(){ $("div:has(.mini)").css("background", "#bbffaa"); }); //4. The selection contains child elements ( Or text elements ) Of div Elements $("#btn4").click(function(){ $("div:parent").css("background", "#bbffaa"); }); }); </script> </head> <body> <input type="button" value=" choice Contains text 'di' Of div Elements " id="btn1" /> <input type="button" value=" The selection does not contain child elements ( Or text elements ) Of div Empty elements " id="btn2" /> <input type="button" value=" Choose to contain class by mini Elemental div Elements " id="btn3" /> <input type="button" value=" The selection contains child elements ( Or text elements ) Of div Elements " id="btn4" /> <br><br> <div class="one" id="one"> id by one,class by one Of div <div class="mini">class by mini</div> </div> <div class="one" id="two" title="test"> id by two,class by one,title by test Of div <div class="mini" title="other">class by mini,title by other</div> <div class="mini" title="test">class by mini,title by test</div> </div> <div class="one"> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini" title="tesst">class by mini,title by tesst</div> </div> <div style="display:none;" class="none">style Of display by "none" Of div</div> <div class="hide">class by "hide" Of div</div> <div> contain input Of type by "hidden" Of div<input type="hidden" size="8"> </div> <div id="mover"> Executing animated div Elements .</div> </body></html>

Property filter :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div,span,p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana;}div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px;}div.hide { display: none;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript"> /**[attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attrSel1][attrSel2][attrSelN] */ $(function() { //1. Choose to include attribute title Of div Elements $("#btn1").click(function() { $("div[title]").css("background", "#bbffaa"); }); //2. selection attribute title The value is equal to 'test' Of div Elements $("#btn2").click(function() { $("div[title='test']").css("background", "#bbffaa"); }); //3. selection attribute title Value is not equal to 'test' Of div Elements (* There is no attribute title Will also be selected ) $("#btn3").click(function() { $("div[title!='test']").css("background", "#bbffaa"); }); //4. selection attribute title value With 'te' Start Of div Elements $("#btn4").click(function() { $("div[title^='te']").css("background", "#bbffaa"); }); //5. selection attribute title value With 'est' end Of div Elements $("#btn5").click(function() { $("div[title$='est']").css("background", "#bbffaa"); }); //6. selection attribute title value contain 'es' Of div Elements $("#btn6").click(function() { $("div[title*='es']").css("background", "#bbffaa"); }); //7. First select the attribute id Of div Elements , And then in the results Select Properties title value contain 'es' Of div Elements $("#btn7").click(function() { $("div[id][title*='es']").css("background", "#bbffaa"); }); //8. selection contain title Property value , And title Property value is not equal to test Of div Elements $("#btn8").click(function() { $("div[title][title!='test']").css("background", "#bbffaa"); }); });</script></head><body> <input type="button" value=" Choose to include attribute title Of div Elements ." id="btn1" /> <input type="button" value=" selection attribute title The value is equal to 'test' Of div Elements ." id="btn2" /> <input type="button" value=" selection attribute title Value is not equal to 'test' Of div Elements ( There is no attribute title Will also be selected )." id="btn3" /> <input type="button" value=" selection attribute title value With 'te' Start Of div Elements ." id="btn4" /> <input type="button" value=" selection attribute title value With 'est' end Of div Elements ." id="btn5" /> <input type="button" value=" selection attribute title value contain 'es' Of div Elements ." id="btn6" /> <input type="button" value=" Composite property selector , First select the attribute id Of div Elements , And then in the results Select Properties title value contain 'es' Of div Elements ." id="btn7" /> <input type="button" value=" selection contain title Property value , And title Property value is not equal to test Of div Elements ." id="btn8" /> <br> <br> <div class="one" id="one"> id by one,class by one Of div <div class="mini">class by mini</div> </div> <div class="one" id="two" title="test"> id by two,class by one,title by test Of div <div class="mini" title="other">class by mini,title by other</div> <div class="mini" title="test">class by mini,title by test</div> </div> <div class="one"> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini" title="tesst">class by mini,title by tesst</div> </div> <div style="display: none;" class="none">style Of display by "none" Of div</div> <div class="hide">class by "hide" Of div</div> <div> contain input Of type by "hidden" Of div<input type="hidden" value="123456789" size="8"> </div> <div id="mover"> Executing animated div Elements .</div></body></html>

Visibility filter :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="../script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ function anmateIt(){ $("#mover").slideToggle("slow", anmateIt); } anmateIt(); }); /** :hidden :visible */ $(document).ready(function(){ //1. Select all visible div Elements $("#btn1").click(function(){ $("div:visible").css("background", "#bbffaa"); }); //2. Choose all the invisible div Elements // invisible :display Property is set to none, or visible Set to hidden $("#btn2").click(function(){ $("div:hidden").show("slow").css("background", "#bbffaa"); }); //3. Choose all the invisible input Elements $("#btn3").click(function(){ alert($("input:hidden").attr("value")); }); }); </script> </head> <body> <input type="button" value=" Select all visible div Elements " id="btn1"> <input type="button" value=" Choose all the invisible div Elements " id="btn2" /> <input type="button" value=" Choose all the invisible input Elements " id="btn3" /> <br> <div class="one" id="one"> id by one,class by one Of div <div class="mini">class by mini</div> </div> <div class="one" id="two" title="test"> id by two,class by one,title by test Of div <div class="mini" title="other">class by mini,title by other</div> <div class="mini" title="test">class by mini,title by test</div> </div> <div class="one"> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini">class by mini</div> <div class="mini" title="tesst">class by mini,title by tesst</div> </div> <div style="display:none;" class="none">style Of display by "none" Of div</div> <div class="hide">class by "hide" Of div</div> <div> contain input Of type by "hidden" Of div<input type="hidden" value="123456789" size="8"> </div> <div id="mover"> Executing animated div Elements .</div> </body></html>
Form filter :

 

 

Form object property filter :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript" src="../script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ //1. On the form You can use input Assignment operation $("#btn1").click(function(){ $(":text:enabled").val("New Value"); }); //2. On the form Unavailable input Assignment operation $("#btn2").click(function(){ $(":text:disabled").val("New Value Too"); }); //3. Get the number of multiple check boxes selected Use size() Method to get the number of elements in the selected element collection $("#btn3").click(function(){ alert($(":checkbox:checked").size()) }); //4. Get multiple boxes , Every selected value value $("#btn4").click(function(){ var str = ""; var eles = $(":checkbox:checked"); console.log(eles); for(var i=0;i<eles.size();i++){ str += "【"+$(eles[i]).val()+"】"; } alert(str) }); //5. Get the selected content of the drop-down box $("#btn5").click(function(){ var str = ""; // Notice the peculiarity of this selector , because select Inside option It's the real selection , // therefore :selected Selectors and select[name='test'] The relationship between selectors is a child parent relationship // You have to select the descendant in the same way as the basic selector var els = $("select option:selected"); console.log(els); for(var i=0;i<els.size();i++){ str += "【"+$(els[i]).val()+"】"; } alert(str) }); }) </script> </head> <body> <h3> Form object property filter selector </h3> <button id="btn1"> On the form You can use input Assignment operation .</button> <button id="btn2"> On the form Unavailable input Assignment operation .</button><br /><br /> <button id="btn3"> Get the number of multiple check boxes selected .</button> <button id="btn4"> Get the content selected in the multi selection box .</button><br /><br /> <button id="btn5"> Get the selected content of the drop-down box .</button><br /><br /> <form id="form1" action="#"> Available elements : <input name="add" value=" Text boxes are available 1"/><br> Unavailable elements : <input name="email" disabled="disabled" value=" No text boxes are available "/><br> Available elements : <input name="che" value=" Text boxes are available 2"/><br> Unavailable elements : <input name="name" disabled="disabled" value=" No text boxes are available "/><br> <br> Checkbox : <br> <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1 <input type="checkbox" name="newsletter" value="test2" />test2 <input type="checkbox" name="newsletter" value="test3" />test3 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4 <input type="checkbox" name="newsletter" value="test5" />test5 <br><br> The drop-down list 1: <br> <select name="test" multiple="multiple" style="height: 100px" id="sele1"> <option> Zhejiang </option> <option selected="selected"> liaoning </option> <option> Beijing </option> <option selected="selected"> tianjin </option> <option> Guangzhou </option> <option> hubei </option> </select> <br><br> The drop-down list 2: <br> <select name="test2"> <option> Zhejiang </option> <option> liaoning </option> <option selected="selected"> Beijing </option> <option> tianjin </option> <option> Guangzhou </option> <option> hubei </option> </select> </form> </body></html>

6、 ... and 、jQuery Element screening

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>DOM Inquire about </title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="../script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ function anmateIt(){ $("#mover").slideToggle("slow", anmateIt); } anmateIt(); //(1)eq() Select the index value equal to 3 Of div Elements $("#btn1").click(function(){ $("div").eq(3).css("background-color","#bfa"); }); //(2)first() Select first div Elements $("#btn2").click(function(){ //first() Pick the first element $("div").first().css("background-color","#bfa"); }); //(3)last() Choose the last div Elements $("#btn3").click(function(){ //last() Pick the last element $("div").last().css("background-color","#bfa"); }); //(4)filter() stay div Select an even index in $("#btn4").click(function(){ //filter() Filter The input is a selector string $("div").filter(":even").css("background-color","#bfa"); }); //(5)is() Judge #one Is it :empty or :parent //is Used to detect jq Whether the object matches the specified selector $("#btn5").click(function(){ alert($("#one").is(":empty")); }); //(6)has() choice div Contained in the .mini Of $("#btn6").click(function(){ //has(selector) Selector string Does it include selector $("div").has(".mini").css("background-color","#bfa"); }); //(7)not() choice div in class Not for one Of $("#btn7").click(function(){ //not(selector) The choice is not selector The elements of $("div").not(".one").css("background-color","#bfa"); }); //(8)children() stay body Choose all class by one Of div Subelement $("#btn8").click(function(){ //children() Select all the child elements $("body").children("div.one").css("background-color","#bfa"); }); //(9)find() stay body Choose all class by mini Of div Elements $("#btn9").click(function(){ //find() Select all the descendant elements $("body").find("div.mini").css("background-color","#bfa"); }); //(10)next() #one Next div $("#btn10").click(function(){ //next() Select the next sibling element $("#one").next("div").css("background-color","#bfa"); }); //(11)nextAll() #one All the back span Elements $("#btn11").click(function(){ //nextAll() Select all the elements that follow $("#one").nextAll("span").css("background-color","#bfa"); }); //(12)nextUntil() #one and span Between the elements $("#btn12").click(function(){ // $("#one").nextUntil("span").css("background-color","#bfa") }); //(13)parent() .mini Parent element of $("#btn13").click(function(){ $(".mini").parent().css("background-color","#bfa"); }); //(14)prev() #two The last one of div $("#btn14").click(function(){ //prev() $("#two").prev("div").css("background-color","#bfa") }); //(15)prevAll() span All in front div $("#btn15").click(function(){ //prevAll() Select all the elements above $("span").prevAll("div").css("background-color","#bfa") }); //(16)prevUntil() span Go forward until #one The elements of $("#btn16").click(function(){ //prevUntil(exp) Find all the previous siblings until you find exp stop it $("span").prevUntil("#one").css("background-color","#bfa") }); //(17)siblings() #two All the sibling elements $("#btn17").click(function(){ //siblings() Find all the sibling elements , Including the front and the back $("#two").siblings().css("background-color","#bfa") }); //(18)add() Choose all span Elements and id by two The elements of $("#btn18").click(function(){ $("span").add("#two").css("background-color","#bfa"); }); }); </script> </head> <body> <input type="button" value="eq() Select the index value equal to 3 Of div Elements " id="btn1" /> <input type="button" value="first() Select first div Elements " id="btn2" /> <input type="button" value="last() Choose the last div Elements " id="btn3" /> <input type="button" value="filter() stay div Select an even index in " id="btn4" /> <input type="button" value="is() Judge #one Is it :empty or :parent" id="btn5" /> <input type="button" value="has() choice div Contained in the .mini Of " id="btn6" /> <input type="button" value="not() choice div in class Not for one Of " id="btn7" /> <input type="button" value="children() stay body Choose all class by one Of div Subelement " id="btn8" /> <input type="button" value="find() stay body Choose all class by mini Of div Progeny element " id="btn9" /> <input type="button" value="next()#one Next div" id="btn10" /> <input type.........
版权声明
本文为[Irving the procedural ape]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple