《锋利的JQuery》 学习笔记

1、1. / 锋利的JQuery 学习笔记2. / dier3. / 2009-10-17 至 2009-11-224.5. /- 第一章 认识JQuery -6.7. ·页面加载事件（可以写多个ready()）8. $(document).ready(function()9.     alert("hello world");10. )11.12. ·链式操作：JQuery允许你在一句代码中操做任何与其相关联的元素，包括其子元素、父元素等13. /选择名称为myDiv的元素，为其自身添加css1的样式，然后再选择其所有子元素a，为其移除

2、css2样式14. $("#myDiv").addClass("css1").children("a").removeClass("css2");15.16. ·JQuery中获得一个对象的所有子元素内容17. $("#myDiv").html()18.19. ·JQuery中的变量 与 DOM中的变量20. var $myVar = ""21. var myVar = ""22.23. ·DOM对象 转换成 JQuery对象

3、24. var obj = documnet.getElementById("myDiv");25. var $obj = $(obj);26.27. ·JQuery对象 转换成 DOM对象28. var $obj = $("#myDiv");29. var obj = $obj.get(0);  /或者var obj = $obj0;30.31. ·释放JQuery对$符号的控制权32. JQuery.noConflict();33.34.35. /- 第二章 JQuery选择器 -36.37. ·JQ

4、uery完善的处理机制38. document.getElementById("test").style.color = "red" /如果test不存在，则页面出现异常39. $("#test").css("color","red"); /哪怕页面没有名称为test的元素，也不会报错。它是一个JQuery对象40.41. ·判断页面是否选择的对象42. if( $(".class").length > 0 )43.     / todo

5、something44. 45.46. ·基本选择器47. $("#myDiv")    /根据给定的ID选择匹配的元素，返回：单个元素48. $(".myClass") /根据给定的样式名称选择匹配的元素，返回：集合元素49. $("div") /根据给定的元素名称选择匹配的元素，返回：集合元素50. $("#myDiv,div.myClass,span") /根据给定的规则选择匹配的元素，返回：集合元素51. $("*") /选择页面所有元素，返回：集合元素52

6、.53. ·层次选择器54. $("div span") /选择所有DIV元素下的所有SPAN元素（所有后代元素），返回：集合元素55. $("div>span") /选择所有DIV元素下的SPAN子元素（仅子元素），返回：集合元素56. $(".myClass+div") /选择样式名称为myClass的下一个DIV元素，返回：集合元素57. $(".myClass+div") /等价于 $(".myClass").next("div");58. $(&qu

7、ot;.myClassdiv") /选择样式名称为myClass之后的所有DIV元素，返回：集合元素59. $(".myClassdiv") /等价于 $(".myClass").nextAll();60. $(".myClass").siblings("div") /选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素61.62. ·过滤选择器（index从0开始）63. $("div:first") /选择所有DIV元素下的第一个DIV元素，返

8、回：单个元素64. $("div:last") /选择所有DIV元素下的最后一个DIV元素，返回：单个元素65. $("div:not(.myClass)") /选择所有样式不包括myClass的DIV元素，返回：集合元素66. $("div:even") /选择所有索引是偶数的DIV元素，返回：集合元素67. $("div:odd") /选择所有索引是奇数的DIV元素，返回：集合元素68. $("div:eq(index)") /选择所有索引等于index的DIV元素，返回：集合元素69. $

9、("div:gt(index)") /选择所有索引大于index的DIV元素，返回：集合元素70. $("div:lt(index)") /选择所有索引小于index的DIV元素，返回：集合元素71. $(":header") /选择所有标题元素（h1,h2,h3），返回：集合元素72. $("div:animated") /选择所有正在执行去画的DIV元素，返回：集合元素73.74. ·子元素过滤选择器（index从1开始）75. $(":nth-child(index/even/odd)&q

10、uot;) /选择每个父元素下的第index/偶数/奇数个子元素，返回：集合元素76. $(":first-child") /选择每个父元素下的第一个子元素，返回：集合元素77. $(":last-child") /选择每个父元素下的最后一个子元素，返回：集合元素78. $("ul li:only-child") /在UL元素中选择只有一个LI元素的子元素，返回：集合元素79.80. ·内容过滤选择器81. $(":contains(text)") /选择所有内容包含text的元素，返回：集合元素82.

11、$("div:empty") /选择所有内容为空的DIV元素，返回：集合元素83. $("div:has(span)") /选择所有含有SPAN子元素的DIV元素，返回：集合元素84. $("div:parent") /选择所有含有子元素的DIV元素，返回：集合元素85.86. ·可见性选择器87. $(":hidden") /选择所有不可见的元素（type="hidden" style="display:none" style="visibility:n

12、one"），返回：集合元素88. $(":visible") /选择所有可见的元素，返回：集合元素89.90. ·属性过滤选择器91. $("id") /选择所有含有id属性的元素，返回：集合元素92. $("class=myClass") /选择所有class属性值是myClass的元素，返回：集合元素93. $("class!=myClass") /选择所有class属性值不是myClass的元素，返回：集合元素94. $("alt=begin") /选择所有alt属性值

13、以begin开始的元素，返回：集合元素95. $("alt=end") /选择所有alt属性值以end结束的元素，返回：集合元素96. $("alt*=some") /选择所有alt属性值含有some的元素，返回：集合元素97. $("dividclass=myClass") /选择所有含有id属性的并且class属性值是myClass的元素，返回：集合元素98.99. ·表单对象属性选择器100. $("#myForm:enabled") /选择ID属性为myForm的表单的所有可用元素，返回：集合元素

14、101. $("#myForm:disabled") /选择ID属性为myForm的表单的所有不可用元素，返回：集合元素102. $("#myForm:checked") /选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素103. $("#myForm:selected") /选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素104.105. ·表单选择器106. $(":input") /选择所有<input> <select> <

15、button> <textarea>元素，返回：集合元素107. $(":text") /选择所有单行文本框元素，返回：集合元素108. $(":password") /选择所有密码框元素，返回：集合元素109. $(":radio") /选择所有单选框元素，返回：集合元素110. $(":checkbox") /选择所有复选框元素，返回：集合元素111. $(":submit") /选择所有提交按钮元素，返回：集合元素112. $(":image") /选

16、择所有图片按钮元素，返回：集合元素113. $(":reset") /选择所有重置按钮元素，返回：集合元素114. $(":button") /选择所有按钮元素，返回：集合元素115. $(":file") /选择所有上传域元素，返回：集合元素116. $(":hidden") /选择所有不可见域元素，返回：集合元素117. $(":text") /选择所有单选文本框元素，返回：集合元素118.119.120. /- 第三章 JQuery中的DOM操作 -121.122. ·查找元素节

17、点123. var str = $("#myDiv").text(); /<div id="myDiv" title="hello">123</div>124. alert(str); /结果：123125.126. ·查找属性节点127. var str = $("#myDiv").attr("title"); /<div id="myDiv" title="hello">123</div>128

18、. alert(str); /结果：hello129.130. ·创建元素节点131. var $li1 = $("<span></span>"); /传入元素标记，自动包装并创建第一个li元素对象132. var $li2 = $("<span></span>"); /第二个,创建时需要遵循XHTML规则（闭合、小写）133. $("#myDiv").append($li1); /往id为myDiv的元素中添加一个元素134. $("#myDiv").ap

19、pend($li2); /结果：<div id="myDiv"><span></span><span></span></div>135.136. $("#myDIv").append($li1).append($li2); /客串：传说中的链式写法，省一行代码 _137.138. ·创建文本节点139. var $li1 = $("<span>first</span>");140. var $li2 = $("<s

20、pan>second</span>");141. $("#myDIv").append($li1).append($li2);142. /结果：<div id="myDiv"><span>first</span><span>second</span></div>143.144. ·创建属性节点145. var $li1 = $("<span title="111">first</span>&q

21、uot;);146. var $li2 = $("<span title="222">second</span>");147. $("#myDIv").append($li1).append($li2); 148. /结果：<div id="myDiv"><span title="111">first</span><span title="222">second</span><

22、/div>149.150. ·插入节点151. $("#myDiv").append("<span></span>"); /往id为myDiv的元素插入span元素152. $("<span></span>").appendTo("#myDiv"); /倒过来，将span元素插入到id为myDiv的元素153.154. $("#myDiv").prepend("<span></span>"

23、); /往id为myDiv的元素内最前面插入span元素155. $("<span></span>").prependTo("#myDiv"); /倒过来，将span元素插入到id为myDiv的元素内的最前面156.157. $("#myDiv").after("<span></span>"); /往id为myDiv的元素后面插入span元素（同级，不是子元素）158. $("<span></span>").insertAf

24、ter("#myDiv"); /倒过来，将span元素插入到id为myDiv的元素后面（同级，不是子元素）159.160. $("#myDiv").before("<span></span>"); /往id为myDiv的元素前面插入span元素（同级，不是子元素）161. $("<span></span>").insertBefore("#myDiv"); /倒过来，将span元素插入到id为myDiv的元素前面（同级，不是子元素）162.163.

25、 ·删除节点164. $("#myDiv").remove(); /将id为myDiv的元素移除165.166. ·清空节点167. $("#myDiv").remove("span"); /将id为myDiv的元素内的所有span元素移除168.169. ·复制节点170. $("#myDiv span").click( function() /点击id为myDiv的元素内的span元素，触发click事件171.     $(this).clone().appe

26、ndTo("#myDiv"); /将span元素克隆，然后再添加到id为myDiv的元素内172.     $(this).clone(true).appendTo("#myDiv"); /如果clone传入true参数，表示同时复制事件173. )174.175. ·替换节点176. $("p").replaceWith("<strong>您好</strong>"); /将所有p元素替换成后者 <p>您好</p> -> <s

27、trong>您好</strong>177. $("<strong>您好</strong>").replaceAll("p"); /倒过来写，同上178.179. ·包裹节点180. $("strong").wrap("<b></b>"); /用b元素把所有strong元素单独包裹起来 <b><strong>您好</strong></b><b><strong>您好<

28、/strong></b>181. $("strong").wrapAll("<b></b>"); /用b元素把所有strong元素全部包裹起来 <b><strong>您好</strong><strong>您好</strong></b>182. $("strong").wrapInner("<b></b>"); /把b元素包裹在strong元素内 <strong><

29、;b>您好</b></strong>183.184. ·属性操作185. var txt = $("#myDiv").arrt("title"); /获取id为myDiv的元素的title属性186. $("#myDiv").attr("title","我是标题内容"); /设置id为myDiv的元素的title属性的值187. $("#myDiv").attr("title":"我是标题内容",

30、 "alt":"我还是标题"); /一次性设置多个属性的值188. $("#myDiv").removeArrt("alt"); /移除id为myDiv的元素的title属性189.190. ·样式操作191. var txt = $("#myDiv").arrt("class"); /获取id为myDiv的元素的样式192. $("#myDiv").attr("class","myClass"); /设置

31、id为myDiv的元素的样式193. $("#myDiv").addClass("other"); /在id为myDiv的元素中追加样式194. $("#myDiv").removeClass("other"); /在id为myDiv的元素中移除other样式195. $("#myDiv").removeClass("myClass other"); /在id为myDiv的元素中移除myClass和other多个样式196. $("#myDiv").rem

32、oveClass(); /在id为myDiv的元素中移除所有样式197. $("#myDiv").toggleClass("other"); /切换样式，在有other样式和没other样式之间切换198. $("#myDiv").hasClass("other"); /判断是否有other样式199.200. ·设置和获取HTML、文本和值201. alert( $("#myDiv").html() ); /获取id为myDiv的元素的HTML代码（相当于innerHTML）202.

33、 $("#myDiv").html("<span>hello</span>"); /设置id为myDiv的元素的HTML代码203.204. alert( $("#myDiv").text() ); /获取id为myDiv的元素的HTML代码（相当于innerText）205. $("#myDiv").text("hello"); /设置id为myDiv的元素的HTML代码206.207. alert( $("#myInput").val() ); /

34、获取id为myDiv的元素的value值（支持文本框、下拉框、单选框、复选框等）208. $("#myInput").val("hello"); /设置id为myDiv的元素的value值（下拉框、单选框、复选框带有选中效果）209.210. ·遍历节点211. var $cList = $("#myDiv").children(); /获取id为myDiv的元素的子元素（只考虑子元素，不考虑后代元素）212. var $sNext = $("#myDiv").next(); /获取id为myDiv的元素

35、的下一个同辈元素213. var $sPrev = $("#myDiv").prev(); /获取id为myDiv的元素的上一个同辈元素214. var $sSibl = $("#myDiv").siblings(); /获取id为myDiv的元素的所有同辈元素215. var $pClos = $("#myDiv").closest("span"); /获取id为myDiv的元素本身开始，最接近的span元素（向上查找）216.217. ·CSS-DOM操作218. $("#myDiv&quo

36、t;).css("color"); /获取id为myDiv的元素的color样式的值219. $("#myDiv").css("color", "blue"); /设置id为myDiv的元素的color样式的值220. $("#myDiv").css("color":"blue", "fontSize":"12px"); /设置id为myDiv的元素的color样式的值（多个）221.222. $("#my

37、Div").css("opacity", "0.5"); /设置id为myDiv的元素的透明度（兼容浏览器）223.224. $("#myDiv").css("height"); /获取id为myDiv的元素的高度（单位：px，兼容浏览器）225. $("#myDiv").height(); /同上（实际高度）226.227. $("#myDiv").css("width"); /获取id为myDiv的元素的宽度（单位：px，兼容浏览器）228.

38、 $("#myDiv").width(); /同上（实际宽度）229.230. var offset = $("#myDiv").offset(); /获取id为myDiv的元素在当前窗口的相对偏移量231. alert( offset.top + "|" + offset.left );232.233. var offset = $("#myDiv").position(); /获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量234. alert

39、( offset.top + "|" + offset.left );235.236. $("#txtArea").scrollTop(); /获取id为txtArea的元素滚动条距离顶端的距离237. $("#txtArea").scrollLeft(); /获取id为txtArea的元素滚动条距离左侧的距离238. $("#txtArea").scrollTop(100); /设置id为txtArea的元素滚动条距离顶端的距离239. $("#txtArea").scrollLeft(100

40、); /设置id为txtArea的元素滚动条距离左侧的距离240.241.242. /- 第四章 JQuery中的事件和动画 -243.244. ·加载DOM245. $(window).load() 等价于 window.onload 事件246.247. $(document).ready() 相当于window.onload事件，但有些区别：248.   (1)执行时机：249.   window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行250.   $(document).ready

41、() 是在DOM完全就绪时就可以被调用，此时，并不意味着这些元素关系的文件都已经下载完毕251.   252.   (2)多次使用：可以在同一个页面注册多个$(document).ready()事件253.   (3)简写方式：可以缩写成 $(function() )  或  $().ready()254.   255. ·事件绑定256. 当文档装载完成后，可以通过bind()方法，为特定的元素进行事件的绑定，可重复多次使用257.   bin

42、d( type, data, fn );258.   type：指事件的类型: 259.     blur（失去焦点）、focus（获得焦点）260.     load（加载完成）、unload（销毁完成）261.     resize（调整元素大小）、scroll（滚动元素）262.     click（单击元素事件）、dbclick（双击元素事件）263.     mousedown（按下鼠标）、mouseup（松开鼠标）264.     m

43、ousemove（鼠标移过）、mouseover（鼠标移入）、mouseout（鼠标移出）265.     mouseenter（鼠标进入）、mouseleave（鼠标离开）266.     change（值改变）、select（下拉框索引改变）、submit（提交按钮）267.     keydown（键盘按下）、keyup（键盘松开）、keypress（键盘单击）268.     error（异常）269.   data：指事件传递的属性值，event.data 额外传递给对象事件的值270

44、.   fn：指绑定的处理函数，在此函数体内，$(this)指携带相应行为的DOM元素271.272. ·合并事件273. hover(enter,leave)：鼠标移入执行enter、移出事件执行leave274. $("#myDiv").hover( function()275.     $(this).css("border", "1px solid black");0276. , function()277.     $(this).css("bo

45、rder", "none");278. );279.280. toggle(fn1,fn2,.fnN)：鼠标每点击一次，执行一个函数，直到最后一个后重复281. $("#myDiv").toggle( function()282.     $(this).css("border", "1px solid black");0283. , function()284.     $(this).css("border", "none"

46、;);285. );286.287. ·事件冒泡288. 下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分别将三种元素都注册click事件。289. 那么，click事件会按照DOM的层次结构，像水泡一样不断向上直到顶端，所以称之为事件冒泡。290. <body><div><span>我是SPAN我怕谁</span></div></body>291. $("span").bind("click", function() alert('span

47、click'); );292. $("div").bind("click", function() alert('div click'); );293. $("body").bind("click", function() alert('body click'); );294.295. ·阻止冒泡296. 解决这个问题的办法是：在SPAN执行完click事件后，停止事件冒泡。297. $("span").bind("click"

48、;, function(event)298.     alert('span click');299.     event.stopPropagation(); /停止冒泡300. );301.302. ·阻止默认行为303. 提交按钮在提交前做相应的逻辑判断，当不满足时304. $("#btnSubmit").bind("click", function(event)305.     event.preventDefault(); /阻止默认行为 相当于return

49、false;306. );307.308. ·事件对象的属性309. $("#myDiv").bind("click", function(event) );310. event.type() /返回：click311. event.target() /获取当前元素312. event.relatedTarget() /引发事件的元素313. event.pageX()/event.pageY() /获取鼠标相对于页面的X和Y坐标314. event.which() /在单击事件中获取到对应的按键 鼠标左中右分别是123315. event.m

50、etaKey() /获取操作中的相关功能键（ctrl/alt/shift）316.317. ·移除事件318. $("#myDiv").bind("click", fn1 = function()319.     alert("function1");320. ).bind("click", fn2 = function()321.     alert("function2");322. ).bind("click", fn3

51、 = function()323.     alert("function3");324. );325. $("#myDiv").unbind(); /移除id为myDiv的元素的所有事件326. $("#myDiv").unbind("click"); /移除id为myDiv的元素的所有click事件327. $("#myDiv").unbind("click",fn1); /移除id为myDiv的元素的名称为fn1的click事件328.329. &#

52、183;一次性事件：绑定的事件执行一次后自动移除330. $("#myDiv").one("click", data, function()331.     alert("function1");332. );333.334. ·触发事件335. $("#btn").trigger("click", data); /代码方式触发click事件336. $("#btn").click(); /另一种简写方式337.338. ·事件命名空间

53、339. $("#myDiv").bind("click.hello", function()340.     alert("function1");341. );342. $("#myDiv").bind("click", function()343.     alert("function1");344. )345. $("div").unbind("click"); /两个事件都被移除346

54、. $("div").unbind(".hello"); /只移除第一个347. $("div").unbind("click!"); /只移除第二个（注意感叹号，指没有名字空间的）348.349. ·JQuery中的动画350. $("div").hide(); /隐藏所有DIV元素，相当于sytle="display:none"351. $("div").show(); /显示所有DIV元素352.353. $("div"

55、).hide(1000); /一秒内隐藏所有DIV元素，其它参数还有：slow(600) normal(400) fast(200)354. $("div").show(1000); /一秒内显示所有DIV元素355.356. $("div").fadeOut(); /降低元素的不透明度，直至消失（支持速度参数，不会改变宽高）357. $("div").fadeIn(); /升高元素的不透明度，直至显示358.359. $("div").slideUp(); /由下至上收缩元素，直至消失（支持速度参数）360. $

56、("div").slideDown(); /由上至下展开元素，直至显示361.362. ·自定义动画animate363. $(elem).animate(params, speed, callback);364. params：样式属性及值的映射 protected:"value", protected:"value"365. speed: 速度参数366. callback: 动画完成后执行函数，可选367.368. $("#myDiv").animate(left:"500px"

57、, 2000); /两秒内ID为myDiv的元素移至左边距500px的位置369. $("#myDiv").animate(left:"+=500px", 2000); /同上，支持累加、累减370. $("#myDiv").animate(top:"200px", left:"+=500px", 2000); /同上，多重动画，同时执行371.372. $("#myDiv").animate(opacity:"0.5", 1000) /先变成50%透明3

58、73.            .animate(top:"500px", 500) /移至离顶端500px374.            .animate(left:"500px", 500) /移至离左边500px375.            .fadeOut(1000); /显示出来 （四个动作为队列，一步步执行

59、）376.377. $("#myDiv").stop(cleanQuene ,gotuEnd); /停止动画，参数为boolean378.379. $("#myDiv").is(":animate") /判断元素是否在执行动画380.381. ·其它动画382. $("#myDiv").toggle(); /显示与隐藏元素383. $("#myDiv").slideToggle(); /展开与收缩元素384. $("#myDiv").fadeTo(1000, 0.2

60、); /一秒内将元素透明度调整到20%385.386.387. /- 第五章 JQuery对表单、表格的操作及更多应用 -388.389. ·单选文本框应用（获得焦点时，加了个特殊的样式，失去焦点时还原，兼容所有浏览器）390. $(":input").focus(function() this.addClass("inputFocus"); )391.            .blur(function() this.removeClass("input

61、Focus"); );392.393. ·多行文本框的应用（放大、缩小多行文本框的高度，限制最大500px，兼容所有浏览器）394. var $txt = $("#textArea");395. $(".bigger").click(function()396.     if( $txt.height() < 500) $txt.height( $txt.height() + 50 );397.     /if( $txt.height() < 500) $txt.animate(h

62、eight:"+=50", 500 );398. );399. $(".smaller").click(function()400.     if( $txt.height() > 100) $txt.height( $txt.height() - 50 );401.     /if( $txt.height() < 500) $txt.animate(height:"-=50", 500 );402. );403.404. ·复选框的应用（实现全选、全不选、反选）405.

63、 $("#btnCheckedAll").click(function() /全选406.     $("name=items:checkbox").attr("checked", true);407. );408. $("#btnCheckedNone").click(function() /全不选409.     $("name=items:checkbox").attr("checked", false);410. );411.

64、$("#btnCheckedRev").click(function() /反选412.     $("name=items:checkbox").each(function()413.         $(this).attr("checked", !$(this).attr("checked");414.         /this.checked = !this.chec

65、ked;415.     416. );417.418. ·下拉框的应用（将一个下拉列表的选中项搬至另一个下拉列表）419. $("#btnAdd").click(function() /将选中选项搬过去420.     $("#mySelect1 option:selected").appendTo("#mySelect2");421. );422. $("#btnAddAll").click(function() /将全部选项搬过去423.  

66、60; $("#mySelect1 option").appendTo("#mySelect2");424. );425. $("#mySelect1").dblclick(function() /双击项搬过去426.     $("#mySelect1 option:selected").appendTo("#mySelect2");427. 428.429. ·表单验证430. <form>431.     <div>

67、432.         <label>用户名：</label>433.         <input type="text" id="txtUid" class="required" value="" />434.     </div>435. </form>436. $("form :input.requ

68、ired").each(function() /往每个class有required样式的input元素后面添加*号437.     $(this).parent().append( $("<span class='star'>*</span>") );438. );439. $("form :input.required").blur(function() /失去焦点时验证域440.     if( this.value = "" )441. &

69、#160;       $(this).parent().append( $("<span class='error'>必填字段</span>") );442.     443.     else444.         $(this).parent().append( $("<span class='success'>验证正确</span&g

70、t;") );445.         $(this).parent().find(".error").remove();446.     447. ).keyup(function() /用户每点一个键触发448.     $(this).triggerHandler("blur");449. ).focus(function() /控制有焦点时触发450.     $(this).triggerHandler("

71、blur");451. );452. $("#btnSubmit").click(function()453.     $("form :input.required").trigger("blur"); /让所有需要验证的域失去焦点454.     var errNum = $("form .error").length;455.     if( errNum )456.        

72、0;alert("有验证字段失败，请重新填写");457.         return false;458.     459. );460.461. ·表格应用462. $("tr:odd").addClass("oddTr"); /给奇数行添加oddTr样式463. $("tr:even").addClass("evenTr"); /给偶数行添加evenTr样式464.465. $("tr:c

73、ontains('王五')").addClass("highlightTr"); /查找包含“王五”的行，添加highlightTr样式466.467. $("tr").click(function()468.     $(this).addClass("selectedTr") /给当前行添加选中样式469.            .siblings().removeClass("selectedTr") /反选移除选中样式470.            .end() /结束，返回$(this)，否则则是反选的行471.