1、【锋利的 jQuery 学习笔记】 提供 【随着 JavaScript 的兴起，一系列 JavaScript 库也蓬勃发展起来。从早期的 Prototype、Dojo 到 2006 年的 jQuery，再到 2007年 ExtJs。可以发现，互联网正在掀起一场 JavaScript 风暴。在这场风暴中，jQuery 以其独特优雅的姿态，始终处于这场风暴的中心，受到越来越多的人的追捧。】Guihua2010-9-第一章 认识 JQuery页面加载事件（可以写多个 ready()）$(document).ready(function()alert(“hello world”);)链式操作：JQu
2、ery 允许你在一句代码中操做任何与其相关联的元素，包括其子元素、父元素等/选择名称为 myDiv 的元素，为其自身添加 css1 的样式，然后再选择其所有子元素 a，为其移除 css2 样式$(“#myDiv”).addClass(“css1).children(“a”).removeClass(“css2);JQuery 中获得一个对象的所有子元素内容$(“#myDiv”).html()JQuery 中的变量 与 DOM 中的变量var $myVar = “”;var myVar = “”;DOM 对象 转换成 JQuery 对象var obj = documnet.getElementB
3、yId(“myDiv”);var $obj = $(obj);JQuery 对象 转换成 DOM 对象var $obj = $(“#myDiv”);var obj = $obj.get(0); /或者 var obj = $obj0;释放 JQuery 对$符号的控制权JQuery.noConflict();第二章 JQuery 选择器 JQuery 完善的处理机制document.getElementById(“test”).style.color = “red”; /如果 test不存在，则页面出现异常$(“#test”).css(“color”,”red”); /哪怕页面没有名称为 te
4、st 的元素，也不会报错。它是一个 JQuery 对象判断页面是否选择的对象if( $(“.class”).length ; 0 )/ todo something基本选择器$(“#myDiv”) /根据给定的 ID 选择匹配的元素，返回：单个元素$(“.myClass”) /根据给定的样式名称选择匹配的元素，返回：集合元素$(“div”) /根据给定的元素名称选择匹配的元素，返回：集合元素$(“#myDiv,div.myClass,span”) /根据给定的规则选择匹配的元素，返回：集合元素$(“*”) /选择页面所有元素，返回：集合元素层次选择器$(“div span”) /选择所有 DI
5、V 元素下的所有 SPAN 元素（所有后代元素），返回：集合元素$(“divspan”) /选择所有 DIV 元素下的 SPAN 子元素（仅子元素），返回：集合元素$(“.myClass+div”) /选择样式名称为 myClass 的下一个 DIV 元素，返回：集合元素$(“.myClass+div”) /等价于 $(“.myClass”).next(“div”);$(“.myClassdiv”) /选择样式名称为 myClass 之后的所有 DIV 元素，返回：集合元素$(“.myClassdiv”) /等价于 $(“.myClass”).nextAll();$(“.myClass”).s
6、iblings(“div”) /选择样式名称为 myClass 的元素的所有同辈 DIV 元素（无论前后），返回集合元素过滤选择器（index 从 0 开始）$(“div:first”) /选择所有 DIV 元素下的第一个 DIV 元素，返回：单个元素$(“div:last”) /选择所有 DIV 元素下的最后一个 DIV 元素，返回：单个元素$(“div:not(.myClass)”) /选择所有样式不包括 myClass 的 DIV 元素，返回：集合元素$(“div:even”) /选择所有索引是偶数的 DIV 元素，返回：集合元素$(“div:odd”) /选择所有索引是奇数的 DIV
7、元素，返回：集合元素$(“div:eq(index)”) /选择所有索引等于 index 的 DIV 元素，返回：集合元素$(“div:gt(index)”) /选择所有索引大于 index 的 DIV 元素，返回：集合元素$(“div:lt(index)”) /选择所有索引小于 index 的 DIV 元素，返回：集合元素$(“:header”) /选择所有标题元素（h1,h2,h3），返回：集合元素$(“div:animated”) /选择所有正在执行去画的 DIV 元素，返回：集合元素子元素过滤选择器（index 从 1 开始）$(“:nth-child(index/even/odd)”
8、) /选择每个父元素下的第 index/偶数/奇数个子元素，返回：集合元素$(“:first-child”) /选择每个父元素下的第一个子元素，返回：集合元素$(“:last-child”) /选择每个父元素下的最后一个子元素，返回：集合元素$(“ul li:only-child”) /在 UL 元素中选择只有一个 LI 元素的子元素，返回：集合元素内容过滤选择器$(“:contains(text)”) /选择所有内容包含 text 的元素，返回：集合元素$(“div:empty”) /选择所有内容为空的 DIV 元素，返回：集合元素$(“div:has(span)”) /选择所有含有 SPA
9、N 子元素的 DIV 元素，返回：集合元素$(“div:parent”) /选择所有含有子元素的 DIV 元素，返回：集合元素可见性选择器$(“:hidden”) /选择所有不可见的元素（type=”hidden” style=”display:none” style=”visibility:none”），返回：集合元素$(“:visible”) /选择所有可见的元素，返回：集合元素属性过滤选择器$(“id“) /选择所有含有 id 属性的元素，返回：集合元素$(“class=myClass“) /选择所有 class 属性值是 myClass 的元素，返回：集合元素$(“class!=myC
10、lass“) /选择所有 class 属性值不是 myClass 的元素，返回：集合元素$(“alt=begin“) /选择所有 alt 属性值以 begin 开始的元素，返回：集合元素$(“alt=end“) /选择所有 alt 属性值以 end 结束的元素，返回：集合元素$(“alt*=some“) /选择所有 alt 属性值含有 some 的元素，返回：集合元素$(“dividclass=myClass“) /选择所有含有 id 属性的并且 class 属性值是 myClass 的元素，返回：集合元素表单对象属性选择器$(“#myForm:enabled”) /选择 ID 属性为 myF
11、orm 的表单的所有可用元素，返回：集合元素$(“#myForm:disabled”) /选择 ID 属性为 myForm 的表单的所有不可用元素，返回：集合元素$(“#myForm:checked”) /选择 ID 属性为 myForm 的表单的所有所有被选中的元素，返回：集合元素$(“#myForm:selected”) /选择 ID 属性为 myForm 的表单的所有所有被选中的元素，返回：集合元素表单选择器$(“:input”) /选择所有input select button textarea元素，返回：集合元素$(“:text”) /选择所有单行文本框元素，返回：集合元素$(“:p
12、assword”) /选择所有密码框元素，返回：集合元素$(“:radio”) /选择所有单选框元素，返回：集合元素$(“:checkbox”) /选择所有复选框元素，返回：集合元素$(“:submit”) /选择所有提交按钮元素，返回：集合元素$(“:image”) /选择所有图片按钮元素，返回：集合元素$(“:reset”) /选择所有重置按钮元素，返回：集合元素$(“:button”) /选择所有按钮元素，返回：集合元素$(“:file”) /选择所有上传域元素，返回：集合元素$(“:hidden”) /选择所有不可见域元素，返回：集合元素$(“:text”) /选择所有单选文本框元素，
13、返回：集合元素第三章 JQuery 中的 DOM 操作查找元素节点var str = $(“#myDiv”).text(); /div id=”myDiv” title=”hello”123/divalert(str); /结果：123查找属性节点var str = $(“#myDiv”).attr(“title”); /div id=”myDiv” title=”hello”123/divalert(str); /结果：hello创建元素节点var $li1 = $(“span/span”); /传入元素标记，自动包装并创建第一个 li 元素对象var $li2 = $(“span/span
14、”); /第二个,创建时需要遵循XHTML 规则（闭合、小写）$(“#myDiv”).append($li1); /往 id 为 myDiv 的元素中添加一个元素$(“#myDiv”).append($li2); /结果：div id=”myDiv”span/spanspan/span/div$(“#myDIv”).append($li1).append($li2); /客串：传说中的链式写法，省一行代码 _创建文本节点var $li1 = $(“spanfirst/span”);var $li2 = $(“spansecond/span”);$(“#myDIv”).append($li1).
15、append($li2);/结果：div id=”myDiv”spanfirst/spanspansecond/span/div创建属性节点var $li1 = $(“span title=”111first/span”);var $li2 = $(“span title=”222second/span”);$(“#myDIv”).append($li1).append($li2);/结果：div id=”myDiv”span title=”111first/spanspan title=”222second/span/div插入节点$(“#myDiv”).append(“span/span”
16、); /往 id 为 myDiv的元素插入 span 元素$(“span/span”).appendTo(“#myDiv”); /倒过来，将span 元素插入到 id 为 myDiv 的元素$(“#myDiv”).prepend(“span/span”); /往 id 为 myDiv的元素内最前面插入 span 元素$(“span/span”).prependTo(“#myDiv”); /倒过来，将span 元素插入到 id 为 myDiv 的元素内的最前面$(“#myDiv”).after(“span/span”); /往 id 为 myDiv 的元素后面插入 span 元素（同级，不是子元
17、素）$(“span/span”).insertAfter(“#myDiv”); /倒过来，将 span 元素插入到 id 为 myDiv 的元素后面（同级，不是子元素）$(“#myDiv”).before(“span/span”); /往 id 为 myDiv的元素前面插入 span 元素（同级，不是子元素）$(“span/span”).insertBefore(“#myDiv”); /倒过来，将 span 元素插入到 id 为 myDiv 的元素前面（同级，不是子元素）删除节点$(“#myDiv”).remove(); /将 id 为 myDiv 的元素移除清空节点$(“#myDiv”).r
18、emove(“span”); /将 id 为 myDiv 的元素内的所有 span 元素移除复制节点$(“#myDiv span”).click( function() /点击 id 为 myDiv 的元素内的span 元素，触发 click 事件$(this).clone().appendTo(“#myDiv”); /将 span 元素克隆，然后再添加到id 为 myDiv 的元素内$(this).clone(true).appendTo(“#myDiv”); /如果 clone 传入 true 参数，表示同时复制事件)替换节点$(“p”).replaceWith(“strong您好/str
19、ong”); /将所有p 元素替换成后者 p您好/p strong您好 /倒过来写，同上包裹节点$(“strong”).wrap(“b/b”); /用 b 元素把所有 strong元素单独包裹起来 bstrong您好/strong/bbstrong您好/strong/b$(“strong”).wrapAll(“b/b”); /用 b 元素把所有strong 元素全部包裹起来 bstrong您好/strongstrong您好/strong/b$(“strong”).wrapInner(“b/b”); /把 b 元素包裹在strong 元素内 strongb您好/b/strong属性操作var t
20、xt = $(“#myDiv”).arrt(“title”); /获取 id 为 myDiv 的元素的title 属性$(“#myDiv”).attr(“title”,”我是标题内容”); /设置 id 为 myDiv 的元素的 title 属性的值$(“#myDiv”).attr(“title”:”我是标题内容”, “alt”:”我还是标题”); /一次性设置多个属性的值$(“#myDiv”).removeArrt(“alt”); /移除 id 为 myDiv 的元素的 title 属性样式操作var txt = $(“#myDiv”).arrt(“class”); /获取 id 为 myD
21、iv 的元素的样式$(“#myDiv”).attr(“class”,”myClass”); /设置 id 为 myDiv 的元素的样式$(“#myDiv”).addClass(“other”); /在 id 为 myDiv 的元素中追加样式$(“#myDiv”).removeClass(“other”); /在 id 为 myDiv 的元素中移除other 样式$(“#myDiv”).removeClass(“myClass other”); /在 id 为 myDiv 的元素中移除 myClass 和 other 多个样式$(“#myDiv”).removeClass(); /在 id 为
22、myDiv 的元素中移除所有样式$(“#myDiv”).toggleClass(“other”); /切换样式，在有 other 样式和没other 样式之间切换$(“#myDiv”).hasClass(“other”); /判断是否有 other 样式设置和获取 HTML、文本和值alert( $(“#myDiv”).html() ); /获取 id 为 myDiv 的元素的 HTML 代码（相当于 innerHTML）$(“#myDiv”).html(“spanhello/span”); /设置 id 为myDiv 的元素的 HTML 代码alert( $(“#myDiv”).text()
23、 ); /获取 id 为 myDiv 的元素的 HTML 代码（相当于 innerText）$(“#myDiv”).text(“hello”); /设置 id 为 myDiv 的元素的 HTML 代码alert( $(“#myInput”).val() ); /获取 id 为 myDiv 的元素的 value 值（支持文本框、下拉框、单选框、复选框等）$(“#myInput”).val(“hello”); /设置 id 为 myDiv 的元素的 value 值（下拉框、单选框、复选框带有选中效果）遍历节点var $cList = $(“#myDiv”).children(); /获取 id 为
24、 myDiv 的元素的子元素（只考虑子元素，不考虑后代元素）var $sNext = $(“#myDiv”).next(); /获取 id 为 myDiv 的元素的下一个同辈元素var $sPrev = $(“#myDiv”).prev(); /获取 id 为 myDiv 的元素的上一个同辈元素var $sSibl = $(“#myDiv”).siblings(); /获取 id 为 myDiv 的元素的所有同辈元素var $pClos = $(“#myDiv”).closest(“span”); /获取 id 为 myDiv 的元素本身开始，最接近的 span 元素（向上查找）CSS-DOM
25、 操作$(“#myDiv”).css(“color”); /获取 id 为 myDiv 的元素的 color 样式的值$(“#myDiv”).css(“color”, “blue”); /设置 id 为 myDiv 的元素的color 样式的值$(“#myDiv”).css(“color”:”blue”, “fontSize”:”12px”); /设置 id 为 myDiv 的元素的 color 样式的值（多个）$(“#myDiv”).css(“opacity”, “0.5); /设置 id 为 myDiv 的元素的透明度（兼容浏览器）$(“#myDiv”).css(“height”); /获
26、取 id 为 myDiv 的元素的高度（单位：px，兼容浏览器）$(“#myDiv”).height(); /同上（实际高度）$(“#myDiv”).css(“width”); /获取 id 为 myDiv 的元素的宽度（单位：px，兼容浏览器）$(“#myDiv”).width(); /同上（实际宽度）var offset = $(“#myDiv”).offset(); /获取 id 为 myDiv 的元素在当前窗口的相对偏移量alert( offset.top + “|” + offset.left );var offset = $(“#myDiv”).position(); /获取 id
27、 为 myDiv 的元素相对于最近一个 position 设置为 relative 或 absolute 的父元素的相对偏移量alert( offset.top + “|” + offset.left );$(“#txtArea”).scrollTop(); /获取 id 为 txtArea 的元素滚动条距离顶端的距离$(“#txtArea”).scrollLeft(); /获取 id 为 txtArea 的元素滚动条距离左侧的距离$(“#txtArea”).scrollTop(100); /设置 id 为 txtArea 的元素滚动条距离顶端的距离$(“#txtArea”).scrollLe
28、ft(100); /设置 id 为 txtArea 的元素滚动条距离左侧的距离第四章 JQuery 中的事件和动画 加载 DOM$(window).load() 等价于 window.onload 事件$(document).ready() 相当于 window.onload 事件，但有些区别：(1)执行时机：window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行$(document).ready() 是在 DOM 完全就绪时就可以被调用，此时，并不意味着这些元素关系的文件都已经下载完毕(2)多次使用：可以在同一个页面注册多个$(document).ready()事件(3)简写方式：可以缩写成 $(function() ) 或 $().ready()
