技术点4:jQuery

程序猿欧文 2020-11-09 19:27:33
技术 其他 Jquery 开源中国


jQuery

一、jQuery介绍

1.什么是jQuery?

jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 js 类库。

2.jQuery核心思想

它的核心思想是 write less,do more(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。

3.jQuery的流行程度

jQuery 现在已经成为最流行的 JavaScript 库,在世界前 10000 个访问最多的网站中,有超过 55%在使用jQuery。

4.jQuery的好处

①开源、免费;

②语法设计简单,可以使开发更加便捷;

二、jQuery初体验

需求:使用 jQuery 给一个按钮绑定单击事件?

代码示例:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery单击事件</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("#btn").click(function () { alert("jQuery的单击事件"); }); }); </script></head><body> <button id="btn">按钮</button></body></html>

效果如下:

 

 

三、jQuery 核心函数

$ 是 jQuery 的核心函数,能完成 jQuery 的很多功能。$()就是调用$这个函数。1、传入参数为 [ 函数 ] 时: 表示页面加载完成之后。相当于 window.onload = function(){}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery单击事件</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { //等价于 window.onload = function(){} }); </script></head><body> </body></html>
2、传入参数为 [ HTML 字符串 ] 时: 会为我们创建这个 html 标签对象。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery单击事件</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { var $div = $("<div>我是div</div>"); $div.appendTo("body"); }); </script></head><body></body></html>

效果如下:

 

 

3、传入参数为 [ 选择器字符串 ] 时: $(“#id 属性值”);id 选择器,根据 id 查询标签对象 $(“标签名”);标签名选择器,根据指定的标签名查询标签对象 $(“.class 属性值”); 类型选择器,可以根据 class 属性查询标签对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery单击事件</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { //根据标签名选中标签 alert($("div")); //根据id选中标签 $("#btn01").click(function () { alert("jQuery的id选择器"); }); //根据class选中标签 $(".cla01").click(function () { alert("jQuery的class选择器"); }); }); </script></head><body> <div>我是div</div> <button id="btn01">按钮1</button> <button class="cla01">按钮2</button></body></html>
 4、传入参数为 [ DOM 对象 ] 时: 会把这个 dom 对象转换为 jQuery 对象。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery单击事件</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>我是div</div> <button id="btn01">按钮1</button> <button class="cla01">按钮2</button></body></html>

效果如下:

 

 

 

 

四、jQuery 对象和 dom 对象区分

1、什么是 jQuery 对象,什么是 dom 对象

 

 

 

 

2、问题:jQuery 对象的本质是什么?

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery单击事件</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>按钮1</button> <button>按钮2</button> <button>按钮3</button></body></html>

效果如下:

 

 

3、jQuery 对象和 Dom 对象使用区别

jQuery 对象不能使用 DOM 对象的属性和方法 DOM 对象也不能使用 jQuery 对象的属性和方法

4、Dom 对象和 jQuery 对象互转

dom 对象转化为 jQuery 对象(*重点)

①先有 DOM 对象

②$( DOM 对象 ) 就可以转换成为 jQuery 对象

jQuery 对象转为 dom 对象(*重点)

①先有 jQuery 对象

②jQuery 对象[下标]取出相应的 DOM 对象

五、jQuery 选择器(*****重点)

1、基本选择器(****重点)

 

 补充:

p.myclass:要求标签名必须是p,而且class属性的值为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.选择 id 为 one 的元素 "background-color","#bbffaa" $("#btn1").click(function () { $("#one").css("background-color","#bbffaa"); }); //2.选择 class 为 mini 的所有元素 $("#btn2").click(function () { $(".mini").css("background-color","#bbffaa"); }); //3.选择 元素名是 div 的所有元素 $("#btn3").click(function () { $("div").css("background-color","#bbffaa"); }); //4.选择所有的元素 $("#btn4").click(function () { $("*").css("background-color","#bbffaa"); }); //5.选择所有的 span 元素和id为two的元素 $("#btn5").click(function () { $("span,#two").css("background-color","#bbffaa"); }); }); </script> </head> <body><!-- <div> <h1>基本选择器</h1> </div> --> <input type="button" value="选择 id 为 one 的元素" id="btn1" /> <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" /> <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" /> <input type="button" value="选择 所有的元素" id="btn4" /> <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" /> <br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <span class="one" id="span">^^span元素^^</span> </body></html>

2、层级选择器(****重点)

 

 

代码示例:

<!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.选择 body 内的所有 div 元素 $("#btn1").click(function(){ $("body div").css("background", "#bbffaa"); }); //2.在 body 内, 选择div子元素 $("#btn2").click(function(){ $("body>div").css("background", "#bbffaa"); }); //3.选择 id 为 one 的下一个 div 元素 $("#btn3").click(function(){ $("#one + div").css("background", "#bbffaa"); }); //4.选择 id 为 two 的元素后面的所有 div 兄弟元素 $("#btn4").click(function(){ $("#two ~ div").css("background", "#bbffaa"); }); }); </script> </head> <body> <!-- <div> <h1>层级选择器:根据元素的层级关系选择元素</h1> ancestor descendant : parent > child : prev + next : prev ~ siblings : </div> --> <input type="button" value="选择 body 内的所有 div 元素" id="btn1" /> <input type="button" value="在 body 内, 选择div子元素" id="btn2" /> <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" /> <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" /> <br><br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <span id="span">^^span元素^^</span> </body></html>

3、过滤选择器 

基本过滤器:

 

 代码示例:

<!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.选择第一个 div 元素 $("#btn1").click(function(){ $("div:first").css("background", "#bbffaa"); }); //2.选择最后一个 div 元素 $("#btn2").click(function(){ $("div:last").css("background", "#bbffaa"); }); //3.选择class不为 one 的所有 div 元素 $("#btn3").click(function(){ $("div:not(.one)").css("background", "#bbffaa"); }); //4.选择索引值为偶数的 div 元素 $("#btn4").click(function(){ $("div:even").css("background", "#bbffaa"); }); //5.选择索引值为奇数的 div 元素 $("#btn5").click(function(){ $("div:odd").css("background", "#bbffaa"); }); //6.选择索引值为大于 3 的 div 元素 $("#btn6").click(function(){ $("div:gt(3)").css("background", "#bbffaa"); }); //7.选择索引值为等于 3 的 div 元素 $("#btn7").click(function(){ $("div:eq(3)").css("background", "#bbffaa"); }); //8.选择索引值为小于 3 的 div 元素 $("#btn8").click(function(){ $("div:lt(3)").css("background", "#bbffaa"); }); //9.选择所有的标题元素 $("#btn9").click(function(){ $(":header").css("background", "#bbffaa"); }); //10.选择当前正在执行动画的所有元素 $("#btn10").click(function(){ $(":animated").css("background", "#bbffaa"); }); //11.选择没有执行动画的最后一个div元素 $("#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="选择第一个 div 元素" id="btn1" /> <input type="button" value="选择最后一个 div 元素" id="btn2" /> <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" /> <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" /> <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" /> <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" /> <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" /> <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" /> <input type="button" value="选择所有的标题元素" id="btn9" /> <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" /> <input type="button" value="选择没有执行动画的最后一个div" id="btn11" /> <h3>基本选择器.</h3> <br><br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <div id="mover">正在执行动画的div元素.</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> <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.选择 含有文本 'di' 的 div 元素 $("#btn1").click(function(){ $("div:contains('di')").css("background", "#bbffaa"); }); //2.选择不包含子元素(或者文本元素) 的 div 空元素 $("#btn2").click(function(){ $("div:empty").css("background", "#bbffaa"); }); //3.选择含有 class 为 mini 元素的 div 元素 $("#btn3").click(function(){ $("div:has(.mini)").css("background", "#bbffaa"); }); //4.选择含有子元素(或者文本元素)的div元素 $("#btn4").click(function(){ $("div:parent").css("background", "#bbffaa"); }); }); </script> </head> <body> <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" /> <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" /> <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" /> <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" /> <br><br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <div id="mover">正在执行动画的div元素.</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><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.选取含有 属性title 的div元素 $("#btn1").click(function() { $("div[title]").css("background", "#bbffaa"); }); //2.选取 属性title值等于'test'的div元素 $("#btn2").click(function() { $("div[title='test']").css("background", "#bbffaa"); }); //3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中) $("#btn3").click(function() { $("div[title!='test']").css("background", "#bbffaa"); }); //4.选取 属性title值 以'te'开始 的div元素 $("#btn4").click(function() { $("div[title^='te']").css("background", "#bbffaa"); }); //5.选取 属性title值 以'est'结束 的div元素 $("#btn5").click(function() { $("div[title$='est']").css("background", "#bbffaa"); }); //6.选取 属性title值 含有'es'的div元素 $("#btn6").click(function() { $("div[title*='es']").css("background", "#bbffaa"); }); //7.首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素 $("#btn7").click(function() { $("div[id][title*='es']").css("background", "#bbffaa"); }); //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素 $("#btn8").click(function() { $("div[title][title!='test']").css("background", "#bbffaa"); }); });</script></head><body> <input type="button" value="选取含有 属性title 的div元素." id="btn1" /> <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" /> <input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" /> <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" /> <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" /> <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" /> <input type="button" value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素." id="btn7" /> <input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" /> <br> <br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display: none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8"> </div> <div id="mover">正在执行动画的div元素.</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> <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.选取所有可见的 div 元素 $("#btn1").click(function(){ $("div:visible").css("background", "#bbffaa"); }); //2.选择所有不可见的 div 元素 //不可见:display属性设置为none,或visible设置为hidden $("#btn2").click(function(){ $("div:hidden").show("slow").css("background", "#bbffaa"); }); //3.选择所有不可见的 input 元素 $("#btn3").click(function(){ alert($("input:hidden").attr("value")); }); }); </script> </head> <body> <input type="button" value="选取所有可见的 div 元素" id="btn1"> <input type="button" value="选择所有不可见的 div 元素" id="btn2" /> <input type="button" value="选择所有不可见的 input 元素" id="btn3" /> <br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8"> </div> <div id="mover">正在执行动画的div元素.</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.对表单内 可用input 赋值操作 $("#btn1").click(function(){ $(":text:enabled").val("New Value"); }); //2.对表单内 不可用input 赋值操作 $("#btn2").click(function(){ $(":text:disabled").val("New Value Too"); }); //3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数 $("#btn3").click(function(){ alert($(":checkbox:checked").size()) }); //4.获取多选框,每个选中的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.获取下拉框选中的内容 $("#btn5").click(function(){ var str = ""; //注意这个选择器的特殊,因为select里面的option是真正的被选择项, //所以 :selected 选择器和 select[name='test']选择器的关系是子父关系 //必须按照基本选择器选择后代的方法选 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>表单对象属性过滤选择器</h3> <button id="btn1">对表单内 可用input 赋值操作.</button> <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br /> <button id="btn3">获取多选框选中的个数.</button> <button id="btn4">获取多选框选中的内容.</button><br /><br /> <button id="btn5">获取下拉框选中的内容.</button><br /><br /> <form id="form1" action="#"> 可用元素: <input name="add" value="可用文本框1"/><br> 不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br> 可用元素: <input name="che" value="可用文本框2"/><br> 不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br> <br> 多选框: <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> 下拉列表1: <br> <select name="test" multiple="multiple" style="height: 100px" id="sele1"> <option>浙江</option> <option selected="selected">辽宁</option> <option>北京</option> <option selected="selected">天津</option> <option>广州</option> <option>湖北</option> </select> <br><br> 下拉列表2: <br> <select name="test2"> <option>浙江</option> <option>辽宁</option> <option selected="selected">北京</option> <option>天津</option> <option>广州</option> <option>湖北</option> </select> </form> </body></html>

六、jQuery 元素筛选

 

 

 

<!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查询</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() 选择索引值为等于 3 的 div 元素 $("#btn1").click(function(){ $("div").eq(3).css("background-color","#bfa"); }); //(2)first()选择第一个 div 元素 $("#btn2").click(function(){ //first() 选取第一个元素 $("div").first().css("background-color","#bfa"); }); //(3)last()选择最后一个 div 元素 $("#btn3").click(function(){ //last() 选取最后一个元素 $("div").last().css("background-color","#bfa"); }); //(4)filter()在div中选择索引为偶数的 $("#btn4").click(function(){ //filter() 过滤 传入的是选择器字符串 $("div").filter(":even").css("background-color","#bfa"); }); //(5)is()判断#one是否为:empty或:parent //is用来检测jq对象是否符合指定的选择器 $("#btn5").click(function(){ alert($("#one").is(":empty")); }); //(6)has()选择div中包含.mini的 $("#btn6").click(function(){ //has(selector) 选择器字符串 是否包含selector $("div").has(".mini").css("background-color","#bfa"); }); //(7)not()选择div中class不为one的 $("#btn7").click(function(){ //not(selector) 选择不是selector的元素 $("div").not(".one").css("background-color","#bfa"); }); //(8)children()在body中选择所有class为one的div子元素 $("#btn8").click(function(){ //children() 选出所有的子元素 $("body").children("div.one").css("background-color","#bfa"); }); //(9)find()在body中选择所有class为mini的div元素 $("#btn9").click(function(){ //find() 选出所有的后代元素 $("body").find("div.mini").css("background-color","#bfa"); }); //(10)next() #one的下一个div $("#btn10").click(function(){ //next() 选择下一个兄弟元素 $("#one").next("div").css("background-color","#bfa"); }); //(11)nextAll() #one后面所有的span元素 $("#btn11").click(function(){ //nextAll() 选出后面所有的元素 $("#one").nextAll("span").css("background-color","#bfa"); }); //(12)nextUntil() #one和span之间的元素 $("#btn12").click(function(){ // $("#one").nextUntil("span").css("background-color","#bfa") }); //(13)parent() .mini的父元素 $("#btn13").click(function(){ $(".mini").parent().css("background-color","#bfa"); }); //(14)prev() #two的上一个div $("#btn14").click(function(){ //prev() $("#two").prev("div").css("background-color","#bfa") }); //(15)prevAll() span前面所有的div $("#btn15").click(function(){ //prevAll() 选出前面所有的元素 $("span").prevAll("div").css("background-color","#bfa") }); //(16)prevUntil() span向前直到#one的元素 $("#btn16").click(function(){ //prevUntil(exp) 找到之前所有的兄弟元素直到找到exp停止 $("span").prevUntil("#one").css("background-color","#bfa") }); //(17)siblings() #two的所有兄弟元素 $("#btn17").click(function(){ //siblings() 找到所有的兄弟元素,包括前面的和后面的 $("#two").siblings().css("background-color","#bfa") }); //(18)add()选择所有的 span 元素和id为two的元素 $("#btn18").click(function(){ $("span").add("#two").css("background-color","#bfa"); }); }); </script> </head> <body> <input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" /> <input type="button" value="first()选择第一个 div 元素" id="btn2" /> <input type="button" value="last()选择最后一个 div 元素" id="btn3" /> <input type="button" value="filter()在div中选择索引为偶数的" id="btn4" /> <input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" /> <input type="button" value="has()选择div中包含.mini的" id="btn6" /> <input type="button" value="not()选择div中class不为one的" id="btn7" /> <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" /> <input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" /> <input type="button" value="next()#one的下一个div" id="btn10" /> <input type.........
版权声明
本文为[程序猿欧文]所创,转载请带上原文链接,感谢
https://my.oschina.net/mikeowen/blog/4710262

  1. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云