DOM 中有一个非常重要的功能，就是节点模型，也就是 DOM 中的“M”。页面中的元素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。
老规矩，喏，给你图
一、获取/设置节点的属性
1.1 获取元素节点 $(" ").attr("属性值")
用此方法获取到的属性只能获取第一个,如果想获取集合中元素的全部属性，需要遍历整个集合，至于遍历，后面会讲到，不要急，鸡尾酒和辣条都会有的，哇咔咔~
1.3 设置元素指定属性的属性值
1.设置单个属性
attr("属性名","属性值")
$(".box").attr("title","我设置的");
$(".box").attr("myattr","定义");//给集合中的所有元素设置属性和属性值
2.设置多个属性的属性值
attr({"属性名1"："属性值1","属性名2"："属性值2"})
$(".box").attr({"title":"111","my":"222"})
3.prop() 获取checked select readOnly
获取checked select readOnly属性的时候 可以用prop().只有true和false
$(":checkbox").prop("checked",true)
1.4 移除属性
$(" ").removeProp("属性")：用来删除由.prop()方法设置的属性集
$(" ").removeAttr("属性")：从每一个匹配的元素中删除一个属性
二、HTML代码/文本/值
用来获取和设置标签的内容，文本等的
2.1 $(" ").html()
相当于js中的innerHTML
用来取得第一个匹配元素的html内容
设置文本内容：把设置的文本内容写在括号里，就相当于传入参数，改变了文本的内容。
$("div").html("<button>点我</button>")
2.2 $(" ").text()
相当于js中的innerText
用来取得所有匹配元素文本内容
设置：把设置的文本内容写在括号里，就相当于传入参数，改变了文本的内容。
$("div").text("123")
2.3 $(" ").val()
相当于js中的value
用来获得所有匹配元素的当前值
设置：把设置的文本内容写在括号里，就相当于传入参数，改变了文本的内容。
$("textarea").val($("#city").val()
三、常用的css相关的属性
3.1 $(" ").offset()
获取匹配元素在当前视口的相对偏移。
设置：把参数以json的形式写在括号里
$("#parent").offset({left:300,top:300});//offset 可以获取
3.2 $(" ").position()
获取匹配元素相对父元素（非静态:设置了定位）的偏移。
设置
$("#son").position();//position 只可以获取 不能设置
3.3 $(" ").height()
取得匹配元素当前计算的高度值（px）。
设置：把参数写在括号里
$("#parent").height(300)
3.4 $(" ").width()
取得匹配元素当前计算的宽度值（px）。
设置：把参数写在括号里
$("#parent").width(300)
四、节点操作
4.1创建元素节点
把创建的标签以字符串的方式直接写在$()里面即可
var $Div = $("<div class='box'></div>");
4.2插入元素节点
1.在所有孩子列表的末尾插入
第一种：父节点.append(子节点)
$("body").append($Div)
第二种：子节点.appendTo(父节点)
$Div.appendTo($("body"))
2.在所有孩子的首部插入
第一种：父节点.prepend(子节点)
$("body").prepend($div)
第二种：子节点.prependTo(父节点)
$div.prependTo("body")
3.在每个匹配的元素之后插入内容
旧节点.after(新节点)
$("#p1").after($p)
4.把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
新节点.insertAfter(旧节点)
$p.insertAfter($("#p1"))
5.在每个匹配的元素之前插入内容。
旧节点.before(新节点)
$("#p1").before( "<p>p</p>" )
6.把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
新节点.insertBefore(旧节点)
$("<p>p</p>").insertBefore("#p1")
4.3移除节点
$(" ").remove()：从DOM中删除所有匹配的元素。
$(".del").remove(#d2)：找出class为del的元素，然后筛选出id为d2的元素把其移除
$(".del").detach():从DOM中删除所有匹配的元素。
$(".del").empty():删除匹配的元素集合中所有的子节点。
记：
remove() 移除节点之后，会保存jQuery对象，不会保存该对象上添加的事件
detach() 移除节点之后，会保存jQuery对象并保存该对象上添加的事件
五、克隆节点
clone(true|false)
传入参数true，同时克隆该节点关联的事件
$("button").click(function(){
var $clone=$("div").clone(true);
$clone.appendTo($("body"));
})
$("div").click(function(){
$(this).css("background-color","green")
})
六、替换节点
旧节点.replaceWith(新节点)
新节点.replaceAll(旧节点)
所有匹配的节点都可以替换
七、包裹节点
wrap()：把所有匹配的元素用其他元素的结构化标记包裹起来。
$("button:eq(0)").click(function(){
//把匹配到的每一个span标签用p表现包裹起来
$("span").wrap("<p></p>")
})
运行结果
unwrap() 不用传参数：把所有匹配的元素的父节点去掉
$("button:eq(1)").click(function(){
//把匹配到的每一个span标签的父节点去掉
$("span").unwrap()
})
运行结果
**wrapAll() **：将所有匹配的元素用单个元素包裹起来
$("button:eq(2)").click(function(){
//把匹配到的每一个span标签用一个p标签包裹起来
$("span").wrapAll("<p></p>")
})
运行结果
wrapInner():将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
$("button:eq(3)").click(function(){
//把匹配到的每一个span标签用一个p标签包裹起来
$("span").wrapInner("<b></b>")
})
运行结果：把span标签里面的文本加粗显示
八、遍历DOM树
8.1父子关系
**children() **：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
parent()：获取匹配到的每一个节点的父节点
8.2祖先节点
parents()：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
closest("筛选条件")：从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
8.3兄弟节点
prev():前一个兄弟
prevAll()：前面所有的兄弟
next()：后一个兄弟
nextAll()：后面所有的兄弟节点
siblings()：除本身以外的所有的兄弟节点
8.4find("筛选条件")
把匹配到的每一个元素的后代在进行一次筛选
**来来来~记住了么？复习一下
//父子关系
//01 children() 获取匹配到的每一个节点的子节点
//$("ul:first li").wrapInner("<b></b>")
console.log($("ul").children());//r.fn.init[6]
//02 parent() 获取匹配到的每一个节点的父节点
console.log($("li").parent());//r.fn.init[2]
//祖先节点
//03 parents() 获取祖先节点 起点 父节点
console.log($("li").parents());//r.fn.init[4]
//具体要求可写在括号里传参进去
//表格操作：($(this).parents("tr")
//04 closest("筛选条件") 起点 当前节点
console.log($("li:first").parents(".test"));//在父节点开始找.test
console.log($("li:first").closest(".test"));//从当前节点找距离最近的.test
//兄弟关系
//01 前一个兄弟 prev();
console.log($("#test").prev())
//02 前面所有的兄弟 prevAll()
console.log($("#test").prevAll())
//03 后一个兄弟节点 next()
console.log($("#test").next())
//04 后面的所有兄弟
console.log($("#test").nextAll())
//05 所有兄弟 siblings()
console.log($("#test").siblings())
//find("筛选条件")
//把匹配到的每一个元素的后代在进行一次筛选
console.log($("ul").find("#test"));
****s
本来已经写完，点击发送卡死，再次打开啥都没了，着急忙慌，在浏览器的浏览记录里找到了写的一半的文章，还算万幸，好了，今天到这里，好记性不如敲键盘，温馨提示小伙伴写东西记得随时保存！
累不累？讲个笑话放松一下咯爱笑的孩纸运气都不会太差
某程序员对书法十分感兴趣，退休后决定在这方面有所建树。于是花重金购买了上等的文房四宝。一日，饭后突生雅兴，一番磨墨拟纸，并点上了上好的檀香，颇有王羲之风范，又具颜真卿气势，定神片刻，泼墨挥毫，郑重地写下：hello world
任何时间不要吝啬你的赞美，喜欢就点赞咯~
