作家
登录

锋利的jQuery jQuery中的DOM操作

作者: 来源:www.28hudong.com 2013-03-30 01:45:29 阅读 我要评论

1 查找元素节点 var $x = $("selector").text() 2 查找属性节点 var $x = $("selector").attr("property") 3 创建节点 var $x = $("html") 4 插入节点 $("selector").append() 向每个匹配的元素内部追加内容$("selector").appendTo() 等价于.append()操作符左右互换 $("selector").prepend() 向每个匹配的元素内部前置内容$("selector").prependTo() 等价于.prepend()操作符左右互换 $("selector").after() 在每个匹配的元素之后插入内容$("selector").insertAfter 等价于.after()操作符左右互换 $("selector").before() 在每个匹配的元素之前插入内容$("selector").insertBefore() 等价于.before()操作符左右互换 5 移动节点 本书P70例:复制代码 代码如下:<script> var $one_li = $("ul li:eq(1)"); //获取<ul>节点中第2个<li>元素节点 var $two_li = $("ul li:eq(2)"); //获取<ul>节点中第3个<li>元素节点 $two_li.insertBefore($one_li); //移动节点 </script>6 删除节点 6.1 remove()方法 $("selector").remove() remove()方法将删除selector所有后代节点,元素用remove()方法删除后,仍可以继续使用。另外remove()方法也可以通过传递参数 来选择性地删除元素,如$("ul li").remove("li[title!=xxx]"); 6.2 empty()方法 $("selector").empty() 清空selector的所有后代节点 7 复制节点 $("selector").clone() 如$(this).clone().appendTo("ul")。若要使复制后的新元素带有原元素所拥有的行为,需要传递参数true。如$("selector").clone(true) 8 替换节点 $("selector").replaceWith() 将所有匹配的元素都替换成指定的HTML或者DOM元素$("selector").replaceAll() 等价于.replaceWith()操作符左右互换 9 包裹节点 $("selector").wrap() 将所有匹配的元素单独包裹$("selector").wrapAll() 将所有匹配的元素用一个元素包裹$("selector").wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来 10 属性操作 $("selector").attr() 获取(一个property参数)和设置元素属性(两个参数,property和value),如$("p").attr("title","your title")。如果同时设 置多个属性,格式如$("p").attr({"title" : "your title" , "name" : "test"})$("selector").removeAttr() 删除元素属性 11 样式操作 $("selector").attr() 替换样式 $("selector").addClass() 追加样式 $("selector").removeClass() 移除样式 $("selector").toggle() 行为重复切换例:复制代码 代码如下: <script> $x.toggle(function(){ //code1 },function(){ //code2 }) </script> 交替执行code1和code2 $("selector").toggleClass() 控制样式上的重复切换,如$("p").toggleClass("anotherClass") $("selector").hasClass("anotherClass") 判断selector中是否含有anotherClass

  推荐阅读

  IE及firefox下获取及设置样式值的代码

复制代码 代码如下:<script type="text/javascript"> //<![CDATA[ function $(obj) { return document.getElementById(obj); } function getStyle(obj,styleName) { if(obj.currentStyle) //for ies { return obj.>>>详细阅读


本文标题:锋利的jQuery jQuery中的DOM操作

地址:http://www.17bianji.com/kaifa2/JS/26805.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)