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
3.jQuery The popularity of
4.jQuery The benefits of
① Open source 、 free ;
② The grammar design is simple , Can make development more convenient ;
Two 、jQuery First experience
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
<!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>
<!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 :
<!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>
<!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 ?
<!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
4、Dom Objects and jQuery Object rotation
① To have a first DOM object
②$( DOM object ) It can be transformed into jQuery object
① 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
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>
<!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="button" value="nextAll()#one All the back span Elements " id="btn11" /> <input type="button" value="nextUntil()#one and span Between the elements " id="btn12" /> <input type="button" value="parent().mini Parent element of " id="btn13" /> <input type="button" value="prev()#two The last one of div" id="btn14" /> <input type="button" value="prevAll()span All in front div" id="btn15" /> <input type="button" value="prevUntil()span Go forward until #one The elements of " id="btn16" /> <input type="button" value="siblings()#two All the sibling elements " id="btn17" /> <input type="button" value="add() Choose all span Elements and id by two The elements of " id="btn18" /> <h3> Basic selector .</h3> <br /><br /> The text box <input type="text" name="account" disabled="disabled" /> <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"><b>class by mini,title by other</b></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> <span id="span1">^^span Elements 111^^</span> <div> contain input Of type by "hidden" Of div<input type="hidden" size="8"> </div> <span id="span2">^^span Elements 222^^</span> <div id="mover"> Executing animated div Elements .</div> </body> </html>
7、 ... and 、jQuery Property operations for
1.html()
obtain :
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("button").click(function () { // obtain alert($("div").html()); }); }); </script> </head> <body> <div> I am a div label <span> I am a div Medium span</span></div> <button> Operation input box </button> </body> </html>
The effect is as follows :
Set up :
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("button").click(function () { // Set up $("div").html("<p> Paragraph Tags </p>"); }); }); </script> </head> <body> <div> I am a div label <span> I am a div Medium span</span></div> <button> Operation input box </button> </body> </html>
The effect is as follows :
2.text()
obtain :
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("button").click(function () { // obtain alert($("div").text()); }); }); </script> </head> <body> <div> I am a div label <span> I am a div Medium span</span></div> <button> Operation input box </button> </body> </html>
The effect is as follows :
Set up :
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("button").click(function () { // Set up $("div").text("<p> Paragraph Tags </p>"); }); }); </script> </head> <body> <div> I am a div label <span> I am a div Medium span</span></div> <button> Operation input box </button> </body> </html>
The effect is as follows :
3.val()
obtain :
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("button").click(function () { // obtain alert($(":text").val()); }); }); </script> </head> <body> <input type="text" value="abc" /> <button> Operation input box </button> </body> </html>
The effect is as follows :
Set up :
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("button").click(function () { // Set up $(":text").val("hello"); }); }); </script> </head> <body> <input type="text" value="abc" /> <button> Operation input box </button> </body> </html>
The effect is as follows :
val() Method operation radio 、 check 、 The drop-down list :
Operation radio :
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $(":radio").val(["radio2"]); }); </script> </head> <body> The radio : <input name="radio" type="radio" value="radio1" />radio1 <input name="radio" type="radio" value="radio2" />radio2 </body> </html>
The effect is as follows :
Operation check :
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $(":checkbox").val(["checkbox2","checkbox3"]); }); </script> </head> <body> multi-select : <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1 <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2 <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3 </body> </html>
The effect is as follows :
Manipulate the drop-down list :
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("#multiple").val(["mul1","mul2","mul4"]); $("#single").val(["sin3"]); }); </script> </head> <body> Pull down multiple choices : <select id="multiple" multiple="multiple" size="4"> <option value="mul1">mul1</option> <option value="mul2">mul2</option> <option value="mul3">mul3</option> <option value="mul4">mul4</option> </select> <br/> Drop down the radio : <select id="single"> <option value="sin1">sin1</option> <option value="sin2">sin2</option> <option value="sin3">sin3</option> </select> </body> </html>
The effect is as follows :
Operation radio 、 check 、 Drop down to check :
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]); }); </script> </head> <body> <body> The radio : <input name="radio" type="radio" value="radio1" />radio1 <input name="radio" type="radio" value="radio2" />radio2 <br/> multi-select : <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1 <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2 <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3 <br/> Pull down multiple choices : <select id="multiple" multiple="multiple" size="4"> <option value="mul1">mul1</option> <option value="mul2">mul2</option> <option value="mul3">mul3</option> <option value="mul4">mul4</option> </select> <br/> Drop down the radio : <select id="single"> <option value="sin1">sin1</option> <option value="sin2">sin2</option> <option value="sin3">sin3</option> </select> </body> </body> </html>
The effect is as follows :
4.attr()
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { // obtain alert($(":checkbox:first").attr("name")); // Set up $(":checkbox:first").attr("name", "abc") }); </script> </head> <body> multi-select : <input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1 <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2 </body> </html>
5.prop()
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { // obtain alert($(":checkbox:first").prop("checked"));//true // Set up $(":checkbox:first").prop("checked",false); }); </script> </head> <body> multi-select : <input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1 <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2 </body> </html>
6. practice ( Future generations 、 Totally unselected 、 Reverse election )
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ // Click event for all binding $("#checkedAllBtn").click(function () { $(":checkbox").prop("checked",true); }); // Click event for none binding $("#checkedNoBtn").click(function () { $(":checkbox").prop("checked",false); }); // Click event for the reverse selection binding $("#checkedRevBtn").click(function () { $(":checkbox[name='items']").each(function () { // stay each Ergodic function Function , There is one this object . This this Object is the current traversal of DOM object this.checked = !this.checked; }); // Check to see if it's full // Get the number of balls that are not at all var allCount = $(":checkbox[name='items']").length; // Get the number of balls selected var checkedCount = $(":checkbox[name='items']:checked").length; // Equal check , No equal, no choice $("#checkedAllBox").prop("checked",allCount == checkedCount); }); // Submit button click event $("#sendBtn").click(function () { // Get the check box of the selected ball $(":checkbox[name='items']:checked").each(function () { alert(this.value); }); }); // to 【 Future generations / Totally unselected 】 Bind click event $("#checkedAllBox").click(function () { // In the event of function Function , There is one this object , This this Object is currently responding to an event DOM object $(":checkbox[name='items']").prop("checked",this.checked); }); // Bind click events to all ball games $(":checkbox[name='items']").click(function () { // Check to see if it's full // Get the total number of balls var allCount = $(":checkbox[name='items']").length; // Get the number of balls selected var checkedCount = $(":checkbox[name='items']:checked").length; $("#checkedAllBox").prop("checked",allCount == checkedCount); }); }); </script> </head> <body> <form method="post" action=""> Your favorite sport is ?<input type="checkbox" id="checkedAllBox" /> Future generations / Totally unselected <br /> <input type="checkbox" name="items" value=" football " /> football <input type="checkbox" name="items" value=" Basketball " /> Basketball <input type="checkbox" name="items" value=" badminton " /> badminton <input type="checkbox" name="items" value=" Table Tennis " /> Table Tennis <br /> <input type="button" id="checkedAllBtn" value=" whole choose " /> <input type="button" id="checkedNoBtn" value=" Totally unselected " /> <input type="button" id="checkedRevBtn" value=" back choose " /> <input type="button" id="sendBtn" value=" carry hand over " /> </form> </body> </html>
8、 ... and 、DOM Addition, deletion and modification of
1.append()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> // demand : towards p Insert a span label $(function () { $("p").append("<span>hello</span>"); }); </script> </head> <body> <p> The paragraph 1</p> </body> </html>
The effect is as follows :
2.appendTo()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> // demand : take p Tag added to two div In the label $(function () { $("p").appendTo("div"); }); </script> </head> <body> <p> The paragraph 1</p> <div></div> <div></div> </body> </html>
The effect is as follows :
3.prepend()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("p").prepend("<b>hello</b>"); }); </script> </head> <body> <p> The paragraph 1</p> </body> </html>
The effect is as follows :
4.prependTo()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("p").prependTo("div"); }); </script> </head> <body> <p> The paragraph 1</p> <div></div> </body> </html>
The effect is as follows :
5.after()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("p").after("<div>div1</div>"); }); </script> </head> <body> <p> The paragraph 1</p> </body> </html>
The effect is as follows :
6.before()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("p").before("<div>div1</div>"); }); </script> </head> <body> <p> The paragraph 1</p> </body> </html>
The effect is as follows :
7.insertAfter()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("p").insertAfter("div"); }); </script> </head> <body> <p> The paragraph 1</p> <div>div label </div> </body> </html>
The effect is as follows :
8.insertBefore()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("<div>div label </div>").insertBefore("p"); }); </script> </head> <body> <p> The paragraph 1</p> </body> </html>
The effect is as follows :
9.replaceWith()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("p").replaceWith("<div>div label </div>"); }); </script> </head> <body> <p> The paragraph 1</p> </body> </html>
The effect is as follows :
10.replaceAll()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("div").replaceAll("p"); }); </script> </head> <body> <p> The paragraph 1</p> <p> The paragraph 2</p> <div>div label </div> </body> </html>
The effect is as follows :
11.empty()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("div").empty(); }); </script> </head> <body> <div> <span>span label </span> </div> </body> </html>
The effect is as follows :
12.remove()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("div").remove(); }); </script> </head> <body> <div> <span>span label </span> </div> </body> </html>
The effect is as follows :
Nine 、CSS Style operation
Code example :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> div{ width:100px; height:260px; } div.whiteborder{ border: 2px white solid; } div.redDiv{ background-color: red; } div.blueBorder{ border: 5px blue solid; } </style> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { var $div = $("div:first"); $("#btn01").click(function () { $div.addClass("redDiv blueBorder"); }); $("#btn02").click(function () { $div.removeClass(); }); $("#btn03").click(function () { $div.toggleClass("redDiv"); }); $("#btn04").click(function () { //offset(): Returns the position of the first matching element relative to the document . var os = $div.off(); // adopt offset() What you get is an object , This object has two properties :top Indicates the top margin ,left It means the left margin alert(" Top margin :" + os.top + " The left margin :" + os.left); $div.offset({ top:50, left:60 }); }); }); </script> </head> <body> <table align="center"> <tr> <td> <div class="border"> </div> </td> <td> <div class="btn"> <input type="button" value="addClass()" id="btn01"/> <input type="button" value="removeClass()" id="btn02"/> <input type="button" value="toggleClass()" id="btn03"/> <input type="button" value="offset()" id="btn04"/> </div> </td> </tr> </table> <br /> <br /> <br /> <br /> </body> </html>
Ten 、jQuery Animation
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> <link href="css/style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ //show(): Show $("#btn1").click(function () { $("#div1").show(2000,function () { alert("show Animation complete "); }); }); //hide(): hide $("#btn2").click(function () { $("#div1").hide(1000,function () { alert("hide Animation complete "); }); }); //toggle(): Switch $("#btn3").click(function () { $("#div1").toggle(1000,function () { alert("toggle Animation complete "); }); }); // Loop show hide // var abc = function () { // $("#div1").toggle(1000,abc); // }; // abc(); //fadeIn(): Fade in $("#btn4").click(function () { $("#div1").fadeIn(2000,function () { alert("fadeIn complete "); }); }); //fadeOut(): Fade out $("#btn5").click(function () { $("#div1").fadeOut(2000,function () { alert("fadeOut complete "); }); }); //fadeTo(): Fade to $("#btn6").click(function () { $("#div1").fadeTo(2000,0.5,function () { alert("fadeTo complete "); }); }); //fadeToggle(): Fade switch $("#btn7").click(function () { $("#div1").fadeToggle(1000,function () { alert("fadeToggle complete "); }); }); }) </script> </head> <body> <table style="float: left;"> <tr> <td><button id="btn1"> Show show()</button></td> </tr> <tr> <td><button id="btn2"> hide hide()</button></td> </tr> <tr> <td><button id="btn3"> Show / Hide Toggle toggle()</button></td> </tr> <tr> <td><button id="btn4"> Fade in fadeIn()</button></td> </tr> <tr> <td><button id="btn5"> Fade out fadeOut()</button></td> </tr> <tr> <td><button id="btn6"> Fade to fadeTo()</button></td> </tr> <tr> <td><button id="btn7"> Fade switch fadeToggle()</button></td> </tr> </table> <div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;"> jquery Animation defines many kinds of animation effects , You can easily use these animation effects </div> </body> </html>
11、 ... and 、jQuery Event operations
1. Document loading
Native js Document loading for :
window.onload = function(){
}
jQuery Document loading for :
$(function(){
});
2. event
click() event :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("#btn").click(function () { alert("button Click event execution "); }); }); </script> </head> <body> <div> <button id="btn"> Button </button> </div> </body> </html>
The effect is as follows :
mouseover() and mouseout() event :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $(":text").mouseover(function () { console.log(" Came in "); }); $(":text").mouseout(function () { console.log(" I'm out "); }); }); </script> </head> <body> <div> <input type="text" /> </div> </body> </html>
The effect is as follows :
bind() The binding event :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("h5").bind("click mouseover mouseout", function () { console.log(" This is a bind Bound events "); }); }); </script> </head> <body> <div> <h5>h5 Title Tag </h5> </div> </body> </html>
The effect is as follows :
one() The binding event :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("h5").one("click mouseover mouseout", function () { console.log(" This is a one Bound events "); }); }); </script> </head> <body> <div> <h5>h5 Title Tag </h5> </div> </body> </html>
The effect is as follows :
live() The binding event :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("h5").live("click", function () { alert("live Method binding click event "); }); $("<h5> Newly added h5</h5>").appendTo("div"); }); </script> </head> <body> <div> <h5>h5 Title Tag </h5> </div> </body> </html>
The effect is as follows :
unbind() Unbind the event :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("div").bind("click mouseover mouseout",function () { alert("bind Bound events "); }); $("button").click(function () { $("div").unbind("mouseover mouseout"); }); }); </script> </head> <body> <div>div label </div> <button> Button </button> </body> </html>
3. The bubble of events
Code example :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { // Cancel a The default click behavior of the tag is 2 : // $("a").click(function () { // return false; // }); // to button Button binding click event $("button").click(function () { alert("button Click events ");
return false; }); // to body Bind click event $("body").click(function () { alert("body Click events "); }); }); </script> </head> <body> <!-- Cancel a The default click behavior of tags is one :--> <!--<a href="http://www.baidu.com" onclick="return false;"> use Baidu Search </a>--> <button> Button </button> </body> </html>
4.JavaScript Event object
Native JavaScript Get event object :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> window.onload = function () { document.getElementById("btn").onclick = function (event) { console.log(event); } } </script> </head> <body> <button id="btn"> Button </button> </body> </html>
The effect is as follows :
jQuery Code gets the event object :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("#btn").click(function (event) { console.log(event); }); }); </script> </head> <body> <button id="btn"> Button </button> </body> </html>
The effect is as follows :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $(":text").bind("mouseout mouseover",function (event) { if (event.type == "mouseover"){ console.log(" Mouse migration "); }else if (event.type == "mouseout"){ console.log(" Mouse removal "); } }) }); </script> </head> <body> user name :<input type="text" /> </body> </html>
The effect is as follows :