锋利的JQery学习笔记.docx

1、锋利的JQery学习笔记JQuery学习笔记一、 基础知识1、JQuery库说明JQuery-1.5.2.js 完整无压缩版本，用于测试、学习和开发JQuery-1.5.2.min.js 经过JSMin等工具压缩后的版本，体积小，用于项目和产品【注：jQuery正确写法是j小写】2、使用JQuery只要将下载的JQuery库引入到页面JS脚本处即可，方法如下：3、JQuery对象与DOM对象转换JQuery对象是一个数组对象，可以使用两种方式转换为DOM对象（1）var $cr = $(“#cr”) ; /JQuery object Var cr = $cr0 ; /DOM object ;（

2、2） var $cr = $ (“ #cr “) ; var cr = $cr . get ( 0 );对于一个DOM对象，只需用$() 将DOM对象包装起来，就可以转换为JQuery对象Var cr = document.getElementById ( “ cr” ); /DOM objectVar $cr = $ ( cr ) ; /JQuery object 4、JQuery库与其他库的冲突解决默认JQuery库用$作为自身的快捷方式，在先加载其他JS库时，可能出现$冲突，这时有以下几种解决方法：（1）在任何时候都可以调用JQuery . noConflict ( ) 函数来将变量$的

3、控制权移交给其他JS库。示例：JQuery . noConflict ( ); /移动变量$控制权（2）还可以使用 JQuery . noConflict ( ) 方法自定义快捷方式，即Var 新快捷方式 = JQuery . noConflict ( ); （3）将变量$作为形参传递到JQuery中，在函数内部继续使用$快捷符号，示例如下：JQuery . noConflict ( ); /移动变量$控制权JQuery ( function ( $ ) $(“ p” ) . click ( function () alet ( $(this) . text () ); ) )（4）将JQue

4、ry库在其他库之前导入，这时无需调用JQuery . noConfict () 函数就可以交出$控制权限。5、常用开发工具（1）Dreamweaver ：可以通过安装扩展管理来实现JQuery代码的自动提示。首先下载JQuery_API.mxp插件，然后在Dreamweaver 中依次选择“命令”“扩展管理”“安装扩展”“JQuery_API.mxp”命令后，就可以安装插件了。【注意：如果Dreamweaver没有扩展管理功能，说明是简化版本，可以在Http:/ 中下载相应软件。】（2）Aptana：功能强大、开源、专注于JS的AJAX开的IDE（3）JQueryWTP和Spket插件：可以使

5、Eclipse支持JQuery自动提示（4）Visual Studio2008：安装KB958502/Release/ProjectReleases.aspx?releaseId=1736补丁后，下载JQuery-1.5.2-vsdoc.js，将其与JQuery-1.5.2.js放在同一文件夹下，就可以实现JQuery自动代码提示了。二、JQuery选择器1、JQuery选择器简介JQuery选择器完全继承了CSS风格，可以非常快捷的找出特定DOM元素，然后添加相应行为，而无需担心浏览器是否支持定一选择。JQuery选择器获取的永远是对象，即使没有此元素也不会报错，因此当要用JQuery检查某

6、个元素在网页是否存在时，要用长度或转换为DOM对象进行判断，示例如下：If ( $(“ #tt “) ) /这样是错误的 应该这样： if ( $(“#tt”) .length 0 ) . 或者 if ( $(“#tt”) 0 ) 2、常用选择器选择器描述返回示例#id选择匹配ID的元素单个元素$( “test”)取Id为test的元素.class选择给定类名的元素集合元素$(“ .test”) 取所有class 为test的元素Element选择给定元素名的元素集合元素$(“P”) 取所有元素*匹配所有元素集合元素略Selector1, selector2, ,selectorN将每个选择器

7、匹配的元素合并后一起返回集合元素$(“div , span, p.myclass “) 选择所有, 和拥有class为myclass的标签的一组元素3、层次选择器选择器描述返回示例$(“ancestor descendant”)选择ancestor元素里的所有descendant（后代）元素集合元素$( “div span”)选择div里的所有span元素$(“parent child”)选择parent元素下的child元素集合元素$(“ div span ”) 取div下元素名是的子元素$(“prev + next “)或 $(“prev”).next()取prev元素后的next元素集合

8、元素$(“.one + div”) 或$(“.one”).next(“div”)取class为one的下一个div元素$( “prev siblings”)或 $(“prev”).nextAll();取prev元素后的所有siblings元素集合元素$(“#two div”)取id为two元素后面的所有div兄弟元素$(“prev”).nextAll(“div”)$(“prev”) . siblings ()取prev元素的所有同辈元素集合元素$(“#prev”).siblings(“div”)取所有与prev同辈的元素，无论前后位置4、过滤选择器基本选择器描述返回示例:first选择第一个元

9、素单个元素$(“div :first”)取所有div中第1个div元素:last选择最后一个元素单个元素$(“div:last”)所有div中最后一个div元素:not(selector)去除与给定选择器匹配的元素集合元素$(“input:not(.myclass)”)选取class不是myclass的input元素:even取索引是偶数的元素集合元素$(“input:even”)取索引是偶数的input元素:odd选择索引是奇数的元素集合元素$(“input:odd”):eq (index)取索引等于index的元素单个元素$(“input :eq(1)”)索引等于1的元素:gt (inde

10、x)取索引大于index的元素索引都从0开始计算集合元素$(“input :gt(1)”)取索引大于1而不包括1的元素:lt (index)取索引小于index的元素集合元素$(“input :lt(1)”):header取所有标题元素集合元素$(“:header”):animated取当前正在执行动画的所有元素集合元素$(“div :animated”)取正在执行动画的div元素内容过滤:contains(text)取内容为text的元素集合元素$(“div:contains(我)”):empty取不包含子元素或文本的空元素集合元素$(“div :empty”):has(selector)取

11、含有选择器所匹配的元素的元素集合元素$(“div :has(p)”)取含有元素的元素:parent取含有子元素或文本元素集合元素$(“div: parent”) 注意与parent()方法的区别可见过滤:hidden取所有不可见元素集合元素$(“:hidden”) 包括hiden和none:visible取所有可见元素集合元素$(“div :visible”)属性过滤器描述返回示例attribute取有此属性的元素集合元素$(“divid”) 取有id属性的元素attribute=value取属性值为value的元素集合元素$(“divtitle=test”)attribute!=value取

12、值不等于value的元素集合元素$(“div title!=test”)attribute=value取值以value开始的元素集合元素$(“divtitle=test”)attribute$=value取值以value结束的元素集合元素略attribute*=value取值含有value的元素集合元素略slector1selector2.用属性选择器合并成一个复合属性选择器集合元素$(“dividtitle$=test取有属性id且属性title以test结束的元素子元素过滤:nth-child (index/even/odd/equation)取每个父元素下第index个子元素或奇偶元素，

13、index从1开始集合元素注意与 :eq(index)的区别很常用的过滤器 :nth-child(2n);取索引值是2的倍数的元素，n从0开始:first-chile取父元素下第1个子元素集合元素注意与:first的区别:last-child取每个父元素的最后一个子元素集合元素注意与:last的区别:only-child如果某个元素是它父元素的中的惟一子元素，则匹配集合元素$(“ul li:only-child”) 选择中是惟一子元素的表单属性过滤:enabled取所有可用元素集合元素$(“#form1 :enabled”)取id为form1的表单内的所有可用元素:disabled取所有不可用

14、元素集合元素略:checked取所有被选中的元素集合元素$(“input :checked”):selected取所有被选中的选项元素（下拉列表）集合元素$(“select :selected”)5、表单选择器选择器描述返回示例:input所有的和元素集合元素$(“:input”):text取所有单行文本框集合元素$(“:text”):password取所有密码框集合元素略:radio取所有单选框集合元素略:checkbox取所有多选框集合元素略:submit取所有提交按钮集合元素:image取所有图像按钮集合元素:reset取所有按钮集合元素:file取所有上传域集合元素:hidden取所有

15、不可见元素集合元素【注意：选择器出现空格表示为后代选择器，与过滤选择器是不同的结果，例：Var $t_a = $( .test :hidden); /表示选取 class 为”test”的元素里面的隐藏元素而var $t_b = $( .test:hidden); /表示选中隐藏的class为”test”的元素】三、DOM操作1、查找节点和创建节点（1）查找节点：通过前面介绍的的选择器可以轻松查找节点，【例：var $li = $(“ul li:eq(1)”); /取ul中的第2个节点】然后可以使用attr () 方法来获取它的各种属性（2）创建节点：JQuery中可以通过 $( HTML)

16、来实现节点的创建。例：这是一个复杂的组合2、插入节点方法描述示例Append向匹配元素内部追加节点$(“p”).append(“hello”)appendT0()将匹配元素追加到指定元素中，实际是颠倒了上面的append()方法$(“hello”).appendTo(“p”)，结果helloPrepend()向匹配元素关添加内容$(“p”).prepend(“hello”);prependTo()上面prepend()方法的反操作略After()在匹配元素后插入内容$(“p”).after(“hello”)，结果helloinsertAfter()将匹配元素插入到指定元素的后面，after()

17、方法的颠倒操作略Before()在匹配元素前插入内容$(“p”).before(“hello”)，结果helloinsertBefore()Before()的颠倒方法略3、删除节点（1）remove()方法：删除匹配元素及其所有后代节点，返回值是指向已删除节点的引用，可以在其他地方或以后使用这些元素（2）empty()方法：并不删除当前节点，而是清空所有后代节点。4、复制节点和替换节点（1）复制节点：Clone(bool)方法可以复制当前节点，默认参数为False，可以不填写，指复制的新元素不具备原节点的任何行为，当为True时，新元素将同时具有被复制元素的所有行为，包括事件。（2）替换节点：

18、ReplaceWith()与ReplaceAll()可以将所有匹配的元素都替换成指定的HTML或者DOM元素，这两个方法互为颠倒。示例：$(“p”).replaceWith (“你不喜欢什么？”);或 $(“你不喜欢什么？”).replaceAll (“p”);5、包裹节点（1）wrap()方法：把每个匹配元素用指定标签包裹起来，每个匹配元素都包裹一次示例如下：$(“strong”).wrap (“”); /结果如果有2个元素，则为aaa bbb(2)wrapAll()方法：将所有匹配元素包裹在指定标签中，示例如下$(“strong”).wrap All(“”); /结果如果有2个元素，则为a

19、aa bbb（3）wrapInner()方法：将每个匹配元素的子内容用指定标签包裹起来，示例$(“strong”).wrap Inner(“”); /结果如果有2个元素，则为aaa 6、属性操作（1）获取和设置属性： attr()Var p_txt = $para.attr (“title”) ; /获取Title属性值$(“p”).attr( “title” : ”hello” , “name” : “test” ); /将一个“名/值”形式的对象设置为匹配元素的属性【注意：JQuery中很多方法都是同一个函数来实现获取和设置，如attr () 、html ()、text ()、height

20、 ()、width ()、val ()和css ()等方法。】（2）删除属性：removeAttr () 例：$(“p”).removeAttr (“ title”);7、样式操作（1）获取设置样式：attr()获取样式示例：var p_class = $(“p”).attr (“class” ); /获取元素的class设置样式：$(“p”) . attr (“class” ,”high”) ; /此处严格说只是替换了元素的样式（2）追加样式：addClass()示例： $(“p”) .addClass (“high” ); /即元素会具有以前和现在两格样式（3）移除样式：removeCla

21、ss (“ 样式1 样式2”)和removeClass()参数为空移除所有样式（4）切换样式：toggleClass() /样式存在则删除，不存在则添加（5）判断样式是否存在：hasClass () /实际是调用了is()方法，所以等价于 is()8、CSS-DOM操作（1）设置和获取style对象的各种属性：css ()查看某元素css属性的值： var p_value = $(“p”).css (“color”);改变元素样式：$(“p”).css (“ color” , “red”);（2）获取和设置高度宽度：height () 和width ()示例：$(“p”) .heigth();

22、 $(“p”).height(100); （3）获取元素在当前视窗的相对偏移：offset () 示例： var offset = $(“p”).offset (); Var left = offset.left ; Var top = offset.top;（4）position()方法：用于获取元素相对于最近一个position样式属性设置为relative或absolute的祖父节点的相对偏移，同offset ()一样，返回对象包括两个属性，即top 和 left 。（5）获取元素的滚动条距顶端和距左侧的距离：scrollTop () 和scrollLeft ()【注：height ()

23、 与css() 方法的区别是，height ()方法获取的高度是元素在页面中的实际高度，且不带单位；而css ()获取到的高度与样式有关，可能为”auto “ 或 “10px”之类】【注意：attr () 与 css ()，attr () 设置对象的class属性，而css () 设置对象的style属性】【注：css()方法中如果属性有”-“号，如：font-size，不加引号时必须用驼峰式写法（fontSize），如果带上了引号，两种写法都可以。】9、设置和获取HTML与文本和值（1）设置和获取HTML：html () 类似于JS中的InnerHTML设置示例：$(“p”).html (“

24、 hello ”);获取示例：$(“p”).html ();【注：html()方法不能用于XML文档】（2）设置和获取文本：text () 类似于JS中的InnerText【注：text()方法对HMTL和XML文档都有效，且支持所有浏览器】（3）设置和获取值：val () 类似于JS中的Value【注1：val()方法不仅能设置和获取元素的值，还有一个用处就是能使select 、checkbox 、radio相应的选项被选中。 注2：val()方法是从最后一个选项往前读取。也可以使用attr()方法来实现同样功能】示例：$(“ :checkbox”).val ( “check2” , “ch

25、eck3”);$(“#single option:eq(1) “).attr ( “selected” , true);10、遍历节点（1）children ()：获取匹配元素的所有子元素，不考虑任何后代元素（2）next ()：用于取得匹配元素后面紧邻的同辈元素（3）prev ()：用于取得匹配元素前面紧邻的同辈元素（4）siblings ()：用于取得匹配元素前后所有的同辈元素（5）closest ()：用来取得最近的匹配元素【其他：find ()、filter ()、nextAll ()、prevAll ()、parent ()、parents ()等】四、JQuery中的事件和动画1、

26、加载DOM对象$(document) .ready (function () /代码 $() .ready (function () /代码 $ (function () /代码 三种方式是一样的。【注：使用ready()方法注册的事件，只要DOM加载完毕就会被执行，如果此时元素关联的文件未下载完毕（如较大的图片）则会报错，解决方法是使用JQuery的load()方法，可以在元素上绑定一个算处理函数。例：$(window).load ( function ( ) ); 等价于window.onload ()】2、事件绑定在文档装载完毕后，可以通过bind ( ) 方法来对匹配元素进行特定事件的绑定，语法为：Bind ( type , data , fn ) ;参数说明：第1个为事件类型，包括：blur/focus/load/unload/click/mousedown/keypress/error第2个为可选参数，作为event .data 属性值传递给事件对象的额外数据对象第3个是用来绑定处理函数的。示例：$(“#panel”).bind (“mouseover” , function (