源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

锋利的jQuery jQuery中的DOM操作

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

扫一扫进微信版
返回顶部