dom操作
先写几个标签
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
↑
内部插入=>子节点
<-- ---------------------------------------------------------->
<button class="append">append</button>
<button class="prepend">prepend</button>
1 $(function(){ 2 //内部插入 =>子节点 3 $(".append").click(function(){ 4 //在所有子元素的后面插入 5 $("ul").append("<li>列表 append</li>") 6 //使用appendTo也可以 7 // $("<li>列表 append</li>").appendTo($("ul")); 8 })
1 $(".prepend").click(function(){ 2 //在所有子元素前面插入 3 $("ul").prepend("<li>列表 prepend</li>") 4 }
9 })
<-- ---------------------------------------------------------->
//外部插入 =>兄弟节点
<button class="before">before</button>
<button class="after">after</button>
1 $(function(){ 2 $(".before").click(function(){ 3 //上面插入 4 $("ul").before("<li>列表 before</li>") 5 }) 6 $(".after").click(function(){ 7 //下面插入 8 $("ul").after("<li>列表 after</li>") 9 }) 10 })
<-- ---------------------------------------------------------->
//包裹 =>父节点
<button class="wrap">wrap</button>
1 $(function(){ 2 $(".wrap").click(function(){ 3 //包裹颜色 4 $("ul").wrap("<div style='color:red'></div>") 5 }) 6 })
//修改
<button class="replaceWith">replaceWidth</button>
1 $(function(){ 2 $(".replaceWith").click(function(){ 3 $("li:first").replaceWith("<li>列表 replaceWith</li>") 4 }) 5 })
//删除
<!-- 清空 -->
<button class="empty">empty</button>
<!-- 删除 -->
<button class="remove">remove</button>
1 $(function(){ 2 $(".empty").click(function(){ 3 //清空内容 不删除元素 4 $("li:first").empty() 5 }) 6 $(".remove").click(function(){ 7 //删除内容并删除元素 8 $("li:first").remove() 9 }) 10 })
<!-- 克隆 -->
<button class="clone">clone</button>
1 $(function(){ 2 $(".clone").click(function(){ 3 //在最后克隆第一个 4 $("li:first").clone().appendTo($("ul")) 5 }) 6 })
绑定元素
$(function(){
// $("li").click(function(){
// console.log($(this).text());
// })
//dblclick可以绑定多个元素
// $("ul").on("click dblclick","li",function(){
// console.log($(this).text());
// })
})
//$("li:first")
//$("li").first()
//获取2
// $("li:eq(2)")
// //可以直接获取2&3&&
// $("li").eq()
结语：补补补
