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 (
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1