jquery超全基础实例练习

2023年6月21日发(作者：)

jquery超全基础实例练习今天我们继续探讨jquery的相关内容。⾸先，我们看看基本过滤选择器：

⼀、选中单⾏或双⾏能不能选中指定的某⼀个呢？

⼆、筛选⼤于，⼩于的 三、注意选择的顺序呦:not(选择器) 选取不满⾜“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的插⼊代码位置： View Code 四、header有了这些知识以后，下⾯我们做⼏个练习。题⽬：第⼀⾏是表头，所以显⽰⼤字体（fontSize=30px），最后⼀⾏是汇总，所以显⽰红⾊字体。正⽂的前三⾏是前三名，所以显⽰傻⼤的字体（28）表格的偶数⾏是红⾊⾊背景。⽤Dom实现；⽤jQuery实现。对⽐差异！注意：gt(0):lt(3),表⽰先筛选出所有⼤于0的，然后在此基础上再筛选出所有⼩于3的，即：在所有⼤于0的基础上再选择0,1,2。习题代码插⼊位置： View Code 1 2 3 4 5 6 18 19 20 21

22 23 26 29 30 31 34 37 38 39 42 45 46 47 50 53 54 54 55 58 61 62 63 66 69 70 71 74 77 78

24 姓名25	27 成绩28
32 tom33	35 10036
40 jim41	43 9944
48 john49	51 9852
56 jason57	59 9760
64 aaa65	67 9768
72 平均分73	75 9876

79 80

习题演⽰案例2：点击按钮，表格隔⾏变⾊。奇红，偶黄。案例2代码插⼊位置： View Code案例2演⽰案例3：列表中的前三名粗体显⽰。（前三个li）font-weight:bolder案例3代码插⼊位置： View Code案例3演⽰案例4:表格点击⾏背景⾊变黄，其他⾏背景⾊变⽩。案例4代码插⼊位置： View Code案例4演⽰

五、⼏个⼩问题 六、学会使⽤帮助这⾥出两道题，测试⼀下：$( “ul”, $(this) ).css(“background”, “red”);$(选择器,context);例如：$(‘td’,$(‘div table tr’));context参数可以是⽤dom对象集合或jQuery对象默认如果不传递context则，会在整个⽂档中搜索。案例：修改点击⾏的所有td的背景⾊，将当前点击⾏的td设置为奇数td背景⾊红⾊，偶数td背景⾊蓝⾊。通过$(‘td’,context) View Code 1 2

3 4 5 6 7 19 20 21

22

23 25 26 27 29 31 33 35 36 37 39 41 43 45 47 49 50 51 53 55 57 59 61 63 64 65 67 69 71 73 75 77 78 79 81 83 85 87 89 91 92 93 95 97 99 101 103 105 106

川川是狗狗 24	川川是狗狗 26	川川是狗狗 28	川川是狗狗 30	川川是狗狗 32	川川是狗狗 34
川川是狗狗 38	川川是狗狗 40	川川是狗狗 42	川川是狗狗 44	川川是狗狗 46	川川是狗狗 48
川川是狗狗 52	川川是狗狗 54	川川是狗狗 56	川川是狗狗 58	川川是狗狗 60	川川是狗狗 62
川川是狗狗 66	川川是狗狗 68	川川是狗狗 70	川川是狗狗 72	川川是狗狗 74	川川是狗狗 76
川川是狗狗 80	川川是狗狗 82	川川是狗狗 84	川川是狗狗 86	川川是狗狗 88	川川是狗狗 90
川川是狗狗 94	川川是狗狗 96	川川是狗狗 98	川川是狗狗100	川川是狗狗102	川川是狗狗104

107 108 练习：图⽚版评分控件

下⾯我们看下属性、表单过滤器我们可以看着⽂档，边看边练。甚⾄讲完之后,我们发现看着⽂档我们都能搞定.

七、查帮助看到七个属性过滤选择器什么是属性过滤选择器呢？ ⼋、属性过滤选择器如果我们上⾯的代码中的dv中出现d[v,将来我们选择的时候也需要我们//给它转译⼀下。上⾯的写法没有具体的限定姓名的值到底等于什么？现在我们只要姓名等于aa的。

九、姓名等于aa要是不等于aa的在等号前⾯加个⾮就⾏了。 ！=还有⼏个写法是以aa开头的，或者是以aa结尾的。 ⼗、选择不同位置的属性中的a

⼗⼀、选择多个属性关于这个东西⼤家没有必要死记，每个版本不⼀样可能不⼀样，⼤家学JQuery还是要记住这个思路。就是写法，不要死记硬背。在这⾥我们再把上回⽂章中提到的《锋利的JQuery》分享⼀下。接下来还有个表单对象属性选择器,选择的是表单对象.$("#form1 :enabled")选取id为form1的表单内所有启⽤的元素$("#form1 :disabled")选取id为form1的表单内所有禁⽤的元素$(“input:checked”)选取所有选中的元素（Radio、CheckBox）,这个中间不能加空格.$("select :selected")选取所有选中的选项元素（下拉列表）

⼗⼆、选取所有被禁⽤的元素 ⼗三、选中下拉菜单上⾯这四种写法当中在$("#form1 :enabled")有个空格，如果我把空格去掉，意义就不⼀样了。看看下⾯代码中的区别。 ⼗四、不加空格和加空格的区别接下来我们给⼤家看这么个需求，⼤家做⼀下。练习题题⽬代码插⼊位置： View Code 1 2

3 4 5 6 14 15 16 17 tom18 jim19 lily20

21

22 23 ⼗五、题⽬及提⽰

⼗六、练习代码 ⼗七、练习题演⽰接下来我们再看下表单选择器：

⼗⼋、表单选择器的⼏种写法$(“:input")选取所有、、<select>和<button>元素。和$("input")不⼀样， $("input")只获得<input>$(":text")选取所有单⾏⽂本框，等价于$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);$(“:password”)选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。代替了$(‘input[type=***]’);再说下其他过滤器可见性过滤器：:hidden选取所有不可见元素包括:(如果直接写:hidden则会包含headtitlescriptstyle….)1.表单元素type=“hidden”2.设置css的display:none3.⾼度和宽度明确设置为0的元素。4.⽗元素是隐藏的，所以⼦元素也是隐藏的visibility: hidden 与opacity为0不算，因为还占位所以不认为是hidden.(与之前版本jQuery不太⼀样，1.3.2之前) </p><p> </p><p>⼗九、display:none和visibility:hidden区别当然这些东西不是死的，最有效的知道改没改的⽅式就是查⽂档。:visible选取所有可见元素注意：$(‘.cls :hidden’);与$(‘.cls:hidden’);是不⼀样的。内容过滤器：:contains(text),过滤出包含给定⽂本的元素。(innerText中包含。) ⼆⼗、包含选择器 </p><p>⼆⼗⼀、包含选择器演⽰:empty,过滤出所有不包含⼦元素或者⽂本的空元素。 ⼆⼗⼆、empty选择器:has(selector),过滤出元素中包含（即⼦元素中）selector选择器能选择到的元素。 </p><p>⼆⼗三、包含a标签的选择器中间的参数是个选择器,//所有div中包含a标签的(选择器) ⼆⼗四、包含a标签的选择器演⽰:parent,过滤出可以当做⽗元素的元素（即该元素有⼦元素或者元素中包含⽂本。） 下⾯我们再说说⼦元素过滤器(*)，这个理解起来还是有些⼩难度的。:first-child,与:fisrt的区别,:first只能选取第⼀个，⽽:first-child，则能选取每个⼦元素的第⼀个元素。 </p><p> </p><p>⼆⼗五、:first-child,与:fisrt的区别$(‘ul li:first’);只返回⼀个li元素。$(‘ul li:first-child’);//为每个⽗元素（ul）都返回⼀个li。:last-child:only-child,匹配当前⽗元素中只有⼀个⼦元素的元素。:nth-child,对⽐eq()来理解，eq()值匹配⼀个，nth-child()为每个⽗元素都要匹配⼀个⼦元素。:nth-child(index),index从1开始。:nth-child(even):nth-child(odd):nth-child(3n),选取3的倍数的元素:nth-child(3n+1),满⾜3的倍数+1的元素。.children()⽅法,只考虑⼦元素，不考虑后代元素。 </p><p>下⾯我们再说下jQuery的Dom操作 1、使⽤html()⽅法读取或者设置元素的innerHTML：alert($("a:first").html());//innerHTML </p><p>有参数表⽰设置值，没有参数表⽰获取值。本⾝JQuery可以链式编程，可以点第⼀个⽅法完后可以点第⼆个⽅法。这样 写$(‘div’).html(‘dd’).css();没有问题，但是如果是取值$(‘div’).html().css();就不能点css了。返回 的是字符串，字符串不是JQuery对象，就不能点css了。获取的时候百分之⼋九⼗就不能链式编程了。$("a:first").html("hello");2、使⽤text()⽅法读取或者设置元素的innerText：alert($("a:first").text());$("a:first").text("hello");3、使⽤attr()⽅法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）⽤attr进⾏操作。 alert($("a:first").attr("href")); $("a:first").attr("href", ""); </p><p>怎么让⼀个checkbox被选中。mentById(‘chk’).checked=true;$(‘#chk’).arr(‘checked’,true);attr({‘key’:’value’,’k’:’v’}); </p><p>4、使⽤removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’)//增加⼀个类$(‘#chk’).attr(‘checked’,true);$().attr(‘class’,’cls’);//移除这个类$().attr(‘class’,’’)//彻底删除，连同元素的属性$().removeAttr(‘class’); </p><p>接下来我们说下：动态创建Dom节点dom⾥⾯动态创建元素：var dvObj=Element('<div></div>');×var dvObj=Element('div');√//创建表格，创建⾏对象，解决兼容性问题var trObj=Row(-1);√//创建单元格对象var tdObj=Cell(-1);√ </p><p>在JQuery⾥⾯创建对象：加什么样的属性，直接在⾥⾯写。var dvObj=$('<div style="border:1px solid red"></div>');创建个⽂本框。var txtObj=$('<input type="text" value="dddd"/>'); </p><p>使⽤$(html字符串)来创建Dom节点，并且返回⼀个jQuery对象，然后调⽤append等⽅法将新创建的节点添加到Dom中：//创建超链接： var link = $("<a href=''>百度</a>"); $("div:first").append(link);$()创建的就是⼀个jQuery对象，可以完全进⾏操作var link = $("<a href=''>百度</a>");("百毒");$(“div:first”).append(link);。创建radio，使⽤$(‘<input name=“”/>’);，⽽不要在创建好后通过attr(‘name’,’gender’).//通过attr()设置name,在IE6下有问题。append⽅法⽤来在元素的末尾追加元素（最后⼀个⼦节点）。prepend，在元素的开始添加元素（第⼀个⼦节点）。after，在元素之后添加元素（添加兄弟）before：在元素之前添加元素（添加兄弟）案例：jQuery动态创建表格。(动态加载⽹站列表，从json中取数据)动态创建表格代码插⼊位置： View Code⼆⼗六、动态创建表格演⽰其他追加⽅法(将⾃⼰追加到某元素)⼦元素.appendTo(⽗元素);//主动巴结!到最后⼀个⼦元素.prependTo(⽗元素);//主动巴结到第⼀个。(*)Before(B);将A插⼊到B的前⾯，等同于(A);(*)After(Y);将X插⼊到Y的后⾯，等同于(X);练习：⽆刷新评论。 ⼆⼗七、练习界⾯做这道题得从给按钮注册单击事件开始。⽆刷新评论代码插⼊位置： View Code⼆⼗⼋、⽆刷新评论演⽰删除节点emptys();清空某元素下的所有⼦节点内部实现：while(hild){Child(hild);}//不同版本可能不⼀样。remove(selector)删除当前元素，返回值为被删除的元素。还可以继续使⽤被删除的节点。⽐如重新添加到其他节点下：var lis = $("#ulSite li").remove();$("#ulSite2").append(lis);参数expr,是⼀个选择器，如果没有选择器，表⽰把选中的元素删掉，如果有选择器则表⽰在选中的元素中，再过滤出expr匹配的元素删除掉。案例：清空ul中的项，代码见备注。$("ul em").remove(); 删除ul下li中有testitem样式的元素。 </p><p>权限选择：var items = $(“#select1 option:selected”).remove(); $(“#select2”).append(items); 更狠的：$(“#select1option:selected”).appendTo($(“#select2”))；//在jQuery1.4.1下不太⼀样。（*）clone()克隆节点，只复制节点，没事件。clone(true)克隆节点带事件。添加到购物车案例，元素内容不变只是样式布局变了，简单。.clone().appendTo(); </p><p>⼆⼗九、⽤DebugBar调试找出empty和remove的区别remove⾥⾯可以传个参数，是个选择器$(‘div’).remove(‘[class=c1]’);//删除应⽤了c1这个样式的div。$(‘div’).remove(‘.c1’);下⾯我们说下权限选择： </p><p>三⼗、权限选择⽰例先给按钮注册事件。 三⼗⼀、权限选择演⽰权限选择代码插⼊位置： View Code三⼗⼆、练习题⽬下⾯我们看下加法计算器怎么做: </p><p>三⼗三、加法计算器演⽰加法计算器代码插⼊位置： View Code下⾯我们说下计时器的制作： </p><p>三⼗四、注册协议按钮演⽰注册协议按钮代码： View Code接下来我们写下案例1这题跟focus没什么关系。 </p><p>三⼗五、失去焦点验证⽂本框是否为空演⽰失去焦点验证⽂本框是否为空代码 View Code接下来我们再说球队列表选择： </p><p>三⼗六、球队列表演⽰球队列表代码： View Code留个练习题，刚才是点谁把它移动下来，现在是点谁再给移回去。移回去之后，样式依然在。下⾯我们介绍下节点替换:替换节点：$("br").replaceWith("<hr/>");⽤<hr/>替换br$(‘<br/>’).replaceAll(‘hr’); //调⽤者也得是选择器选择到的元素。⽤<br/>元素替换所有的hr红⾊为选择器；蓝⾊为要替换的内容（动态创建的元素）。节点替换代码插⼊位置: View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/"> 2 </p><p> 3 <html xmlns="/1999/xhtml"> 4 <head> 5 <title></title> 6 <script src="jSquery/" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(function () { 9 //1.给按钮注册个单击事件10 $('#btn').click(function () {11 //2.找到页⾯上所有的br⽤hr来替换。写法112 //$('br').replaceWith('<hr/>');13 //写法2,⽤<hr/>标签，替换页⾯上的所有的$('br')选择器,选到的元素。14 $('<hr/>').replaceAll('br');15 });16 });17 </script>18 </head>19 <body>20 <input type="button" name="name" value="把br替换为⽔平线" id="btn"/>21 <br />22 AAAAAAAAAAAAAAAA<br/>23 AAAAAAAAAAAAAAAA<br/>24 AAAAAAAAAAAAAAAA<br/>25 AAAAAAAAAAAAAAAA<br/>26 AAAAAAAAAAAAAAAA<br/>27 AAAAAAAAAAAAAAAA<br/>28 AAAAAAAAAAAAAAAA<br/>29 </body>30 </html> </p><p>三⼗七、节点替换演⽰我们再说下：包裹节点wrap()⽅法⽤来将所有元素逐个⽤指定标签包裹：【wrapAll()】$(“b”).wrap(“<font color=‘red’></font>”) 将所有粗体字红⾊显⽰结果：<font color=‘red’><b></b></font>wrapInner()//在内部围绕包裹节点代码插⼊位置 </p><p> View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/"> 2 </p><p> 3 <html xmlns="/1999/xhtml"> 4 <head> 5 <title></title> 6 <script src="jSquery/" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(function () { 9 //1.给按钮注册单击事件10 $('#btn').click(function () {11 //2.选取页⾯上所有的p，给它包裹⼀下⼦。12 //$('p').wrap('<font color="red" size="7"></font>');13 //页⾯上有⼏⼗个p就有⼏⼗个font标签，我们⽤另外⼀种办法14 //把所有的p都给包起来了。在p⾥⾯有div或是input的时候，是把⾮p元素踢出来进⾏包裹。15 //$('p').wrapAll('<font color="red"></font>');16 //包在p的⾥⾯17 $('p').wrapInner('<font color="red" size="7"></font>');18 });19 });20 </script>21 </head>22 <body>23 <input type="button" name="name" value="点击让p变红" id="btn"/>24 <p>25 举头望明⽉26 </p>27 <p>28 低头思故乡29 </p>30 </body>31 </html>接下来咱们再说下：样式操作获取样式 attr("class")，设置样式attr("class","myclass")，追加样式addClass("myclass")(不影响其他样 式)，移除样式removeClass("myclass")，切换样式（如果存在样式则去掉样式，如果没有样式则添加样 式）toggleClass("myclass")，判断是否存在样式：hasClass("myclass")上⾯这些我们之前说过。attr("class")和addClass的区别是：addClass，div已经⽤了class1了，再class2，这个时候这两个类样式，同时会被应⽤。attr是替换。案例：⽹页开关灯的效果练习：给body设置body{ filter:Gray; } 这个style就可以让⽹页变为⿊⽩显⽰，做切换⿊⽩效果的按钮。汶川地震的时候，各⼤⽹站就是⽤的这个。但是是在IE下⾯，换个⽕狐的话，照样。 </p><p>点击表格⾏，被点击的⾏⾼亮显⽰（背景是黄⾊），其他⾏⽩⾊背景。监听每个tr的click事件，将点击的背景设置为黄⾊，其他的设置为⽩⾊背景。颜⾊定义为class样式。(使⽤类样式来做)练习：聚焦控件的⾼亮显⽰。颜⾊定义为class样式。 $(“body *”)，选择器*表⽰所有类型的控件。获得焦点的元素背景⾊为黄⾊。给所有的标签都要注册事件，聚焦控件的⾼亮显⽰代码： View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/"> 2 </p><p> 3 <html xmlns="/1999/xhtml"> 4 <head> 5 <title></title> 6 <script src="jSquery/" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(function () { 9 //1.给按钮注册单击事件10 $('#btn').click(function () {11 //2.选取页⾯上所有的p，给它包裹⼀下⼦。12 //$('p').wrap('<font color="red" size="7"></font>');13 //页⾯上有⼏⼗个p就有⼏⼗个font标签，我们⽤另外⼀种办法14 //把所有的p都给包起来了。在p⾥⾯有div或是input的时候，是把⾮p元素踢出来进⾏包裹。15 //$('p').wrapAll('<font color="red"></font>');16 //包在p的⾥⾯17 $('p').wrapInner('<font color="red" size="7"></font>');18 });19 </p><p>20 //选取body下的所有的元素,获得焦点变黄21 $('body *').focus(function () {22 $(this).css('backgroundColor', 'yellow');23 //失去焦点背景⾊再变回来24 }).blur(function () {25 $(this).css('backgroundColor', '');26 });27 });28 </script>29 </head>30 <body>31 <input type="text" name="name" value=" " />32 <input type="button" name="name" value=" " />33 <input type="checkbox" name="name" value=" " />34 <input type="radio" name="name" value=" " />35 <input type="password" name="name" value=" " />36 <input type="file" name="name" value=" " />37 <textarea>content38 39

40 举头望明⽉41

42

43 低头思故乡44

45 46 三⼗⼋、聚焦控件的⾼亮显⽰演⽰JQuery也做了⼀部分的css兼容。⽐如设置层的透明度，IE跟⽕狐不⼀样。 三⼗九、JQuery帮我们解决css兼容性问题设置层的透明度代码： View Code 1 2

3 4 5 6 7 34 35 36 37

39 40 41 42 43 44 45 content46 47

48 举头望明⽉49

50

51 低头思故乡52

53 54 四⼗、设置层的透明度演⽰练习：搜索框效果。焦点放⼊控件，如果⽂本框中的值是“请输⼊关键词”，那么将⽂本清空，并且颜⾊设置为⿊⾊。如果焦点离开控件，如果⽂本框中是空值，那么将⽂本框填充为“请输⼊关键词”，颜⾊设置为灰⾊（Gray）。颜⾊定义为class样式。

四⼗⼀、搜索框效果演⽰搜索框效果代码 View Code 1 2

3 4 5 6 7 23 29 30 31 请输⼊搜索关键词：32 33 接下来我们说下RadioButton的选中问题：我们怎么获取checkbox的每⼀个选中项，val能不能获取每个checkbox每⼀个选中项。得遍历放在数组⾥⾯做的，通过val只能获取第⼀个选中的值。RadioButton也是这样的。radio-checkb-elect设置选中项代码: View Coderadio-checkb-elect设置选中项演⽰练习：CheckBox的全选、全不选、反选CheckBox的全选、全不选、反选代码插⼊位置: View Code四⼗⼆、CheckBox的全选、全不选、反选代码演⽰

2023年6月21日发(作者：)

jquery超全基础实例练习今天我们继续探讨jquery的相关内容。⾸先，我们看看基本过滤选择器：

⼀、选中单⾏或双⾏能不能选中指定的某⼀个呢？

⼆、筛选⼤于，⼩于的 三、注意选择的顺序呦:not(选择器) 选取不满⾜“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的插⼊代码位置： View Code 四、header有了这些知识以后，下⾯我们做⼏个练习。题⽬：第⼀⾏是表头，所以显⽰⼤字体（fontSize=30px），最后⼀⾏是汇总，所以显⽰红⾊字体。正⽂的前三⾏是前三名，所以显⽰傻⼤的字体（28）表格的偶数⾏是红⾊⾊背景。⽤Dom实现；⽤jQuery实现。对⽐差异！注意：gt(0):lt(3),表⽰先筛选出所有⼤于0的，然后在此基础上再筛选出所有⼩于3的，即：在所有⼤于0的基础上再选择0,1,2。习题代码插⼊位置： View Code 1 2 3 4 5 6 18 19 20 21

22 23 26 29 30 31 34 37 38 39 42 45 46 47 50 53 54 54 55 58 61 62 63 66 69 70 71 74 77 78

24 姓名25	27 成绩28
32 tom33	35 10036
40 jim41	43 9944
48 john49	51 9852
56 jason57	59 9760
64 aaa65	67 9768
72 平均分73	75 9876

79 80

习题演⽰案例2：点击按钮，表格隔⾏变⾊。奇红，偶黄。案例2代码插⼊位置： View Code案例2演⽰案例3：列表中的前三名粗体显⽰。（前三个li）font-weight:bolder案例3代码插⼊位置： View Code案例3演⽰案例4:表格点击⾏背景⾊变黄，其他⾏背景⾊变⽩。案例4代码插⼊位置： View Code案例4演⽰

五、⼏个⼩问题 六、学会使⽤帮助这⾥出两道题，测试⼀下：$( “ul”, $(this) ).css(“background”, “red”);$(选择器,context);例如：$(‘td’,$(‘div table tr’));context参数可以是⽤dom对象集合或jQuery对象默认如果不传递context则，会在整个⽂档中搜索。案例：修改点击⾏的所有td的背景⾊，将当前点击⾏的td设置为奇数td背景⾊红⾊，偶数td背景⾊蓝⾊。通过$(‘td’,context) View Code 1 2

3 4 5 6 7 19 20 21

22

23 25 26 27 29 31 33 35 36 37 39 41 43 45 47 49 50 51 53 55 57 59 61 63 64 65 67 69 71 73 75 77 78 79 81 83 85 87 89 91 92 93 95 97 99 101 103 105 106

川川是狗狗 24	川川是狗狗 26	川川是狗狗 28	川川是狗狗 30	川川是狗狗 32	川川是狗狗 34
川川是狗狗 38	川川是狗狗 40	川川是狗狗 42	川川是狗狗 44	川川是狗狗 46	川川是狗狗 48
川川是狗狗 52	川川是狗狗 54	川川是狗狗 56	川川是狗狗 58	川川是狗狗 60	川川是狗狗 62
川川是狗狗 66	川川是狗狗 68	川川是狗狗 70	川川是狗狗 72	川川是狗狗 74	川川是狗狗 76
川川是狗狗 80	川川是狗狗 82	川川是狗狗 84	川川是狗狗 86	川川是狗狗 88	川川是狗狗 90
川川是狗狗 94	川川是狗狗 96	川川是狗狗 98	川川是狗狗100	川川是狗狗102	川川是狗狗104

107 108 练习：图⽚版评分控件

下⾯我们看下属性、表单过滤器我们可以看着⽂档，边看边练。甚⾄讲完之后,我们发现看着⽂档我们都能搞定.

七、查帮助看到七个属性过滤选择器什么是属性过滤选择器呢？ ⼋、属性过滤选择器如果我们上⾯的代码中的dv中出现d[v,将来我们选择的时候也需要我们//给它转译⼀下。上⾯的写法没有具体的限定姓名的值到底等于什么？现在我们只要姓名等于aa的。

九、姓名等于aa要是不等于aa的在等号前⾯加个⾮就⾏了。 ！=还有⼏个写法是以aa开头的，或者是以aa结尾的。 ⼗、选择不同位置的属性中的a

⼗⼀、选择多个属性关于这个东西⼤家没有必要死记，每个版本不⼀样可能不⼀样，⼤家学JQuery还是要记住这个思路。就是写法，不要死记硬背。在这⾥我们再把上回⽂章中提到的《锋利的JQuery》分享⼀下。接下来还有个表单对象属性选择器,选择的是表单对象.$("#form1 :enabled")选取id为form1的表单内所有启⽤的元素$("#form1 :disabled")选取id为form1的表单内所有禁⽤的元素$(“input:checked”)选取所有选中的元素（Radio、CheckBox）,这个中间不能加空格.$("select :selected")选取所有选中的选项元素（下拉列表）

⼗⼆、选取所有被禁⽤的元素 ⼗三、选中下拉菜单上⾯这四种写法当中在$("#form1 :enabled")有个空格，如果我把空格去掉，意义就不⼀样了。看看下⾯代码中的区别。 ⼗四、不加空格和加空格的区别接下来我们给⼤家看这么个需求，⼤家做⼀下。练习题题⽬代码插⼊位置： View Code 1 2

3 4 5 6 14 15 16 17 tom18 jim19 lily20

21

22 23 ⼗五、题⽬及提⽰

⼗六、练习代码 ⼗七、练习题演⽰接下来我们再看下表单选择器：

⼗⼋、表单选择器的⼏种写法$(“:input")选取所有、、<select>和<button>元素。和$("input")不⼀样， $("input")只获得<input>$(":text")选取所有单⾏⽂本框，等价于$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);$(“:password”)选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。代替了$(‘input[type=***]’);再说下其他过滤器可见性过滤器：:hidden选取所有不可见元素包括:(如果直接写:hidden则会包含headtitlescriptstyle….)1.表单元素type=“hidden”2.设置css的display:none3.⾼度和宽度明确设置为0的元素。4.⽗元素是隐藏的，所以⼦元素也是隐藏的visibility: hidden 与opacity为0不算，因为还占位所以不认为是hidden.(与之前版本jQuery不太⼀样，1.3.2之前) </p><p> </p><p>⼗九、display:none和visibility:hidden区别当然这些东西不是死的，最有效的知道改没改的⽅式就是查⽂档。:visible选取所有可见元素注意：$(‘.cls :hidden’);与$(‘.cls:hidden’);是不⼀样的。内容过滤器：:contains(text),过滤出包含给定⽂本的元素。(innerText中包含。) ⼆⼗、包含选择器 </p><p>⼆⼗⼀、包含选择器演⽰:empty,过滤出所有不包含⼦元素或者⽂本的空元素。 ⼆⼗⼆、empty选择器:has(selector),过滤出元素中包含（即⼦元素中）selector选择器能选择到的元素。 </p><p>⼆⼗三、包含a标签的选择器中间的参数是个选择器,//所有div中包含a标签的(选择器) ⼆⼗四、包含a标签的选择器演⽰:parent,过滤出可以当做⽗元素的元素（即该元素有⼦元素或者元素中包含⽂本。） 下⾯我们再说说⼦元素过滤器(*)，这个理解起来还是有些⼩难度的。:first-child,与:fisrt的区别,:first只能选取第⼀个，⽽:first-child，则能选取每个⼦元素的第⼀个元素。 </p><p> </p><p>⼆⼗五、:first-child,与:fisrt的区别$(‘ul li:first’);只返回⼀个li元素。$(‘ul li:first-child’);//为每个⽗元素（ul）都返回⼀个li。:last-child:only-child,匹配当前⽗元素中只有⼀个⼦元素的元素。:nth-child,对⽐eq()来理解，eq()值匹配⼀个，nth-child()为每个⽗元素都要匹配⼀个⼦元素。:nth-child(index),index从1开始。:nth-child(even):nth-child(odd):nth-child(3n),选取3的倍数的元素:nth-child(3n+1),满⾜3的倍数+1的元素。.children()⽅法,只考虑⼦元素，不考虑后代元素。 </p><p>下⾯我们再说下jQuery的Dom操作 1、使⽤html()⽅法读取或者设置元素的innerHTML：alert($("a:first").html());//innerHTML </p><p>有参数表⽰设置值，没有参数表⽰获取值。本⾝JQuery可以链式编程，可以点第⼀个⽅法完后可以点第⼆个⽅法。这样 写$(‘div’).html(‘dd’).css();没有问题，但是如果是取值$(‘div’).html().css();就不能点css了。返回 的是字符串，字符串不是JQuery对象，就不能点css了。获取的时候百分之⼋九⼗就不能链式编程了。$("a:first").html("hello");2、使⽤text()⽅法读取或者设置元素的innerText：alert($("a:first").text());$("a:first").text("hello");3、使⽤attr()⽅法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）⽤attr进⾏操作。 alert($("a:first").attr("href")); $("a:first").attr("href", ""); </p><p>怎么让⼀个checkbox被选中。mentById(‘chk’).checked=true;$(‘#chk’).arr(‘checked’,true);attr({‘key’:’value’,’k’:’v’}); </p><p>4、使⽤removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’)//增加⼀个类$(‘#chk’).attr(‘checked’,true);$().attr(‘class’,’cls’);//移除这个类$().attr(‘class’,’’)//彻底删除，连同元素的属性$().removeAttr(‘class’); </p><p>接下来我们说下：动态创建Dom节点dom⾥⾯动态创建元素：var dvObj=Element('<div></div>');×var dvObj=Element('div');√//创建表格，创建⾏对象，解决兼容性问题var trObj=Row(-1);√//创建单元格对象var tdObj=Cell(-1);√ </p><p>在JQuery⾥⾯创建对象：加什么样的属性，直接在⾥⾯写。var dvObj=$('<div style="border:1px solid red"></div>');创建个⽂本框。var txtObj=$('<input type="text" value="dddd"/>'); </p><p>使⽤$(html字符串)来创建Dom节点，并且返回⼀个jQuery对象，然后调⽤append等⽅法将新创建的节点添加到Dom中：//创建超链接： var link = $("<a href=''>百度</a>"); $("div:first").append(link);$()创建的就是⼀个jQuery对象，可以完全进⾏操作var link = $("<a href=''>百度</a>");("百毒");$(“div:first”).append(link);。创建radio，使⽤$(‘<input name=“”/>’);，⽽不要在创建好后通过attr(‘name’,’gender’).//通过attr()设置name,在IE6下有问题。append⽅法⽤来在元素的末尾追加元素（最后⼀个⼦节点）。prepend，在元素的开始添加元素（第⼀个⼦节点）。after，在元素之后添加元素（添加兄弟）before：在元素之前添加元素（添加兄弟）案例：jQuery动态创建表格。(动态加载⽹站列表，从json中取数据)动态创建表格代码插⼊位置： View Code⼆⼗六、动态创建表格演⽰其他追加⽅法(将⾃⼰追加到某元素)⼦元素.appendTo(⽗元素);//主动巴结!到最后⼀个⼦元素.prependTo(⽗元素);//主动巴结到第⼀个。(*)Before(B);将A插⼊到B的前⾯，等同于(A);(*)After(Y);将X插⼊到Y的后⾯，等同于(X);练习：⽆刷新评论。 ⼆⼗七、练习界⾯做这道题得从给按钮注册单击事件开始。⽆刷新评论代码插⼊位置： View Code⼆⼗⼋、⽆刷新评论演⽰删除节点emptys();清空某元素下的所有⼦节点内部实现：while(hild){Child(hild);}//不同版本可能不⼀样。remove(selector)删除当前元素，返回值为被删除的元素。还可以继续使⽤被删除的节点。⽐如重新添加到其他节点下：var lis = $("#ulSite li").remove();$("#ulSite2").append(lis);参数expr,是⼀个选择器，如果没有选择器，表⽰把选中的元素删掉，如果有选择器则表⽰在选中的元素中，再过滤出expr匹配的元素删除掉。案例：清空ul中的项，代码见备注。$("ul em").remove(); 删除ul下li中有testitem样式的元素。 </p><p>权限选择：var items = $(“#select1 option:selected”).remove(); $(“#select2”).append(items); 更狠的：$(“#select1option:selected”).appendTo($(“#select2”))；//在jQuery1.4.1下不太⼀样。（*）clone()克隆节点，只复制节点，没事件。clone(true)克隆节点带事件。添加到购物车案例，元素内容不变只是样式布局变了，简单。.clone().appendTo(); </p><p>⼆⼗九、⽤DebugBar调试找出empty和remove的区别remove⾥⾯可以传个参数，是个选择器$(‘div’).remove(‘[class=c1]’);//删除应⽤了c1这个样式的div。$(‘div’).remove(‘.c1’);下⾯我们说下权限选择： </p><p>三⼗、权限选择⽰例先给按钮注册事件。 三⼗⼀、权限选择演⽰权限选择代码插⼊位置： View Code三⼗⼆、练习题⽬下⾯我们看下加法计算器怎么做: </p><p>三⼗三、加法计算器演⽰加法计算器代码插⼊位置： View Code下⾯我们说下计时器的制作： </p><p>三⼗四、注册协议按钮演⽰注册协议按钮代码： View Code接下来我们写下案例1这题跟focus没什么关系。 </p><p>三⼗五、失去焦点验证⽂本框是否为空演⽰失去焦点验证⽂本框是否为空代码 View Code接下来我们再说球队列表选择： </p><p>三⼗六、球队列表演⽰球队列表代码： View Code留个练习题，刚才是点谁把它移动下来，现在是点谁再给移回去。移回去之后，样式依然在。下⾯我们介绍下节点替换:替换节点：$("br").replaceWith("<hr/>");⽤<hr/>替换br$(‘<br/>’).replaceAll(‘hr’); //调⽤者也得是选择器选择到的元素。⽤<br/>元素替换所有的hr红⾊为选择器；蓝⾊为要替换的内容（动态创建的元素）。节点替换代码插⼊位置: View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/"> 2 </p><p> 3 <html xmlns="/1999/xhtml"> 4 <head> 5 <title></title> 6 <script src="jSquery/" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(function () { 9 //1.给按钮注册个单击事件10 $('#btn').click(function () {11 //2.找到页⾯上所有的br⽤hr来替换。写法112 //$('br').replaceWith('<hr/>');13 //写法2,⽤<hr/>标签，替换页⾯上的所有的$('br')选择器,选到的元素。14 $('<hr/>').replaceAll('br');15 });16 });17 </script>18 </head>19 <body>20 <input type="button" name="name" value="把br替换为⽔平线" id="btn"/>21 <br />22 AAAAAAAAAAAAAAAA<br/>23 AAAAAAAAAAAAAAAA<br/>24 AAAAAAAAAAAAAAAA<br/>25 AAAAAAAAAAAAAAAA<br/>26 AAAAAAAAAAAAAAAA<br/>27 AAAAAAAAAAAAAAAA<br/>28 AAAAAAAAAAAAAAAA<br/>29 </body>30 </html> </p><p>三⼗七、节点替换演⽰我们再说下：包裹节点wrap()⽅法⽤来将所有元素逐个⽤指定标签包裹：【wrapAll()】$(“b”).wrap(“<font color=‘red’></font>”) 将所有粗体字红⾊显⽰结果：<font color=‘red’><b></b></font>wrapInner()//在内部围绕包裹节点代码插⼊位置 </p><p> View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/"> 2 </p><p> 3 <html xmlns="/1999/xhtml"> 4 <head> 5 <title></title> 6 <script src="jSquery/" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(function () { 9 //1.给按钮注册单击事件10 $('#btn').click(function () {11 //2.选取页⾯上所有的p，给它包裹⼀下⼦。12 //$('p').wrap('<font color="red" size="7"></font>');13 //页⾯上有⼏⼗个p就有⼏⼗个font标签，我们⽤另外⼀种办法14 //把所有的p都给包起来了。在p⾥⾯有div或是input的时候，是把⾮p元素踢出来进⾏包裹。15 //$('p').wrapAll('<font color="red"></font>');16 //包在p的⾥⾯17 $('p').wrapInner('<font color="red" size="7"></font>');18 });19 });20 </script>21 </head>22 <body>23 <input type="button" name="name" value="点击让p变红" id="btn"/>24 <p>25 举头望明⽉26 </p>27 <p>28 低头思故乡29 </p>30 </body>31 </html>接下来咱们再说下：样式操作获取样式 attr("class")，设置样式attr("class","myclass")，追加样式addClass("myclass")(不影响其他样 式)，移除样式removeClass("myclass")，切换样式（如果存在样式则去掉样式，如果没有样式则添加样 式）toggleClass("myclass")，判断是否存在样式：hasClass("myclass")上⾯这些我们之前说过。attr("class")和addClass的区别是：addClass，div已经⽤了class1了，再class2，这个时候这两个类样式，同时会被应⽤。attr是替换。案例：⽹页开关灯的效果练习：给body设置body{ filter:Gray; } 这个style就可以让⽹页变为⿊⽩显⽰，做切换⿊⽩效果的按钮。汶川地震的时候，各⼤⽹站就是⽤的这个。但是是在IE下⾯，换个⽕狐的话，照样。 </p><p>点击表格⾏，被点击的⾏⾼亮显⽰（背景是黄⾊），其他⾏⽩⾊背景。监听每个tr的click事件，将点击的背景设置为黄⾊，其他的设置为⽩⾊背景。颜⾊定义为class样式。(使⽤类样式来做)练习：聚焦控件的⾼亮显⽰。颜⾊定义为class样式。 $(“body *”)，选择器*表⽰所有类型的控件。获得焦点的元素背景⾊为黄⾊。给所有的标签都要注册事件，聚焦控件的⾼亮显⽰代码： View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/"> 2 </p><p> 3 <html xmlns="/1999/xhtml"> 4 <head> 5 <title></title> 6 <script src="jSquery/" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(function () { 9 //1.给按钮注册单击事件10 $('#btn').click(function () {11 //2.选取页⾯上所有的p，给它包裹⼀下⼦。12 //$('p').wrap('<font color="red" size="7"></font>');13 //页⾯上有⼏⼗个p就有⼏⼗个font标签，我们⽤另外⼀种办法14 //把所有的p都给包起来了。在p⾥⾯有div或是input的时候，是把⾮p元素踢出来进⾏包裹。15 //$('p').wrapAll('<font color="red"></font>');16 //包在p的⾥⾯17 $('p').wrapInner('<font color="red" size="7"></font>');18 });19 </p><p>20 //选取body下的所有的元素,获得焦点变黄21 $('body *').focus(function () {22 $(this).css('backgroundColor', 'yellow');23 //失去焦点背景⾊再变回来24 }).blur(function () {25 $(this).css('backgroundColor', '');26 });27 });28 </script>29 </head>30 <body>31 <input type="text" name="name" value=" " />32 <input type="button" name="name" value=" " />33 <input type="checkbox" name="name" value=" " />34 <input type="radio" name="name" value=" " />35 <input type="password" name="name" value=" " />36 <input type="file" name="name" value=" " />37 <textarea>content38 39

40 举头望明⽉41

42

43 低头思故乡44

45 46 三⼗⼋、聚焦控件的⾼亮显⽰演⽰JQuery也做了⼀部分的css兼容。⽐如设置层的透明度，IE跟⽕狐不⼀样。 三⼗九、JQuery帮我们解决css兼容性问题设置层的透明度代码： View Code 1 2

3 4 5 6 7 34 35 36 37

39 40 41 42 43 44 45 content46 47

48 举头望明⽉49

50

51 低头思故乡52

53 54 四⼗、设置层的透明度演⽰练习：搜索框效果。焦点放⼊控件，如果⽂本框中的值是“请输⼊关键词”，那么将⽂本清空，并且颜⾊设置为⿊⾊。如果焦点离开控件，如果⽂本框中是空值，那么将⽂本框填充为“请输⼊关键词”，颜⾊设置为灰⾊（Gray）。颜⾊定义为class样式。

四⼗⼀、搜索框效果演⽰搜索框效果代码 View Code 1 2

3 4 5 6 7 23 29 30 31 请输⼊搜索关键词：32 33 接下来我们说下RadioButton的选中问题：我们怎么获取checkbox的每⼀个选中项，val能不能获取每个checkbox每⼀个选中项。得遍历放在数组⾥⾯做的，通过val只能获取第⼀个选中的值。RadioButton也是这样的。radio-checkb-elect设置选中项代码: View Coderadio-checkb-elect设置选中项演⽰练习：CheckBox的全选、全不选、反选CheckBox的全选、全不选、反选代码插⼊位置: View Code四⼗⼆、CheckBox的全选、全不选、反选代码演⽰