jQuery节点操作
1、创建节点
工厂函数$()用于获取或创建节点
-
- $(selector)：通过选这群获取节点
- $(element)：把DAM节点转化成jQuery节点
- $(html)：使用HTML字符串创建jQuery节点
var inputVal=$("#val").val();
//创建节点
var myLi=$("<li>"+inputVal+"</li>");
2、插入节点
3、插入同辈节点
元素外部插入同辈节点
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遍历 ——each()
以每一个匹配的元素作为上下文来执行一个函数
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
查找方法 —— find()
搜索所有与指定表达式匹配的元素
$(“p”).find(“span”); // 在所有p元素的后代节点中查找span元素
9、CSS—DOM操作
除css()外,还有获取和设置元素高度、宽度、相对位置等的样式操作方法
