jQuery节点操作

1、创建节点

  工厂函数$()用于获取或创建节点

    • $(selector):通过选这群获取节点
    • $(element):把DAM节点转化成jQuery节点
    • $(html):使用HTML字符串创建jQuery节点 

 

var inputVal=$("#val").val();
//创建节点
var myLi=$("<li>"+inputVal+"</li>");

 

2、插入节点

  jQuery节点操作

 3、插入同辈节点

  元素外部插入同辈节点

jQuery节点操作

4、替换节点、复制节点

  replaceWith()和replaceAll()用于替换节点

  clone()用于复制节点($(A).clone(true).appendTo(B);

//替换节点
$("li:eq(1)").replaceWith($("li:eq(4)").clone(true));
//替换所有的节点
myLi.replaceAll($("li"));

注意:close()有个副作用就是会复制id,要么避免对有id的元素克隆,要么使用class代替id的作用

 

5、删除节点

  jQuery提供了三种删除节点的方法

    • remove():删除整个节点
    • detach():删除整个节点,保留元素的绑定事件、附加的数据
    • empty():清空节点内容
//HTML代码
<p>
    Hello, <span>Person</span>
    <a href="#">and person</a>
</p>
// jQuery代码
$("p"). empty();
//结果
<p></p>

 

6、属性操作

  attr()获取或设置匹配元素的属性值

// 获取元素的某属性的值
$(selector).attr("属性名");
//设置元素的属性值
$(selector).attr("属性名","值"  );  // 设置一个属性值
$(selector).attr( { "属性1" : "值1"  ,  "属性2" : "值2" } );  // 设置多个属性值

//设置元素的属性值
$("#val").attr({"type":"file","name":"pic"});

  removeAttr()匹配的元素中删除一个属性

$(selector).removeAttr("属性名称");

 

7、遍历子元素

  children()方法可以用来获取元素的所有子元素

$("body").children();(获取<body>元素的子元素,但不考虑后代元素及文本节点)

 

8、遍历同辈元素

  jQuery可以获取紧邻其后、紧邻其前和位于钙元素前与后的所有同辈元素

jQuery节点操作

 jQuery遍历    ——each()

  以每一个匹配的元素作为上下文来执行一个函数

 $("img").each(function(i){ 
         this.src = "test" + i + ".jpg";
 });

查找方法   ——  find()

  搜索所有与指定表达式匹配的元素

$(“p”).find(“span”);    // 在所有p元素的后代节点中查找span元素

 

9、CSS—DOM操作

  除css()外,还有获取和设置元素高度、宽度、相对位置等的样式操作方法

jQuery节点操作

 

jQuery节点操作

上一篇:深入探究ASP.NET Core异常处理中间件


下一篇:Qt css样式大全(整理版)