jQuery操作dom元素（二）
jquery裏創建dom元素
var str=$("<span></span>");//動態創建了span
創建完成的對象，追加給父級元素
append appendTo prepend prependTo
1.追加到當前元素的內容之後
$("#block").append(str);//把str追加到block中
str.appendTo($("#block"));
2.追加到當前元素的內容之前
$("#block").prepend(str);
str.prependTo($("#block"));
3.追加帶函數
$(".block").append(function(index,value){
console.log($(this).html());//更爲強大一點，直接插入時只能插入固定值
})
4.外部插入
$("#btn").after(msg)//在btn之後
$("#btn").before(msg)//在btn之前
$("#btn").after(function(a,b){
console.log(b)//value，a爲index
})*/
/* msg.insertBefore($("#btn"));*/ //在btn之前
/*msg.insertAfter($("#btn"));*/ //在btn之後
5.複製節點
$("#btn").click(function (){
console.log("1");
});
var clonebtn=$("#btn").clone(false);//false只是複製了元素，不包含事件，沒有靈魂
//默認爲false
6.dom元素的替換
案例1：表格修改信息
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.block{
width: 720px;
border: 1px solid grey;
margin: 0 auto;
}
.list{
border-bottom: 1px dashed grey;
line-height: 40px;
overflow: hidden;
}
.list>span{
display: block;
float: left;
width: 120px;
text-align: center;
}
.ipt{
float: left;
box-sizing: border-box;
width: 120px;
text-align: center;
outline: none;
margin: 10px 0;
}
button{
width: 120px;
border-style: none;
outline: none;
color: blue;
float: left;
line-height: 40px;
background-color: transparent;
}
</style>
</head>
<body>
<div class="block">
<div class="list">
<span>張三</span>
<span>男</span>
<span>20</span>
<span>西安</span>
<span>110</span>
<button>修改</button>
</div>
<div class="list">
<span>張三</span>
<span>男</span>
<span>20</span>
<span>西安</span>
<span>110</span>
<button>修改</button>
</div>
<div class="list">
<span>張三</span>
<span>男</span>
<span>20</span>
<span>西安</span>
<span>110</span>
<button>修改</button>
</div>
<div class="list">
<span>張三</span>
<span>男</span>
<span>20</span>
<span>西安</span>
<span>110</span>
<button>修改</button>
</div>
<div class="list">
<span>張三</span>
<span>男</span>
<span>20</span>
<span>西安</span>
<span>110</span>
<button>修改</button>
</div>
<div class="list">
<span>張三</span>
<span>男</span>
<span>20</span>
<span>西安</span>
<span>110</span>
<button>修改</button>
</div>
<div class="list">
<span>張三</span>
<span>男</span>
<span>20</span>
<span>西安</span>
<span>110</span>
<button>修改</button>
</div>
<div class="list">
<span>張三</span>
<span>男</span>
<span>20</span>
<span>西安</span>
<span>110</span>
<button>修改</button>
</div>
<div class="list">
<span>張三</span>
<span>男</span>
<span>20</span>
<span>西安</span>
<span>110</span>
<button>修改</button>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$("button").each(function(index){ //each()是jquery的方法，遍歷方法
$(this).prop("data-user",true);//默認button的data-user屬性爲true，爲自定義屬性
$(this).click(function(){//點擊方法
if($(this).prop("data-user")){
$(this).html("確定");
$(".list").eq(index)
.find("span")//尋找方法
.each(function(index){
var ipt=$("<input class='ipt' value='"+$(this).html()+"'>");//創建input方法
$(this).replaceWith(ipt);//用input替換之前的span
})
$(this).prop("data-user",false)//true換成false
}
else{
$(this).html("修改");
$(".list").eq(index)
.find("input")
.each(function(index){
var ipt=$("<span>"+$(this).val()+"</span>");
$(this).replaceWith(ipt);//替換元素，比如span換成input
})
$(this).prop("data-user",true)
}
})
})
</script>
</body>
</html>
7.包裹節點
$(".btn").wrap("<span></span>") //span包裹btn wrap用元素包裹被選擇元素 單一元素
$(".btn").wrapAll("<span></span>") //一個包多個
移除被包裹的父級元素
$(".btn").unwrap();
$(".btn").wrapInner(s);//用包裹元素包裹被選擇元素的 子 元素
8.元素的遍歷
$(".btn").each(function(index){
$(this).click(function(){
console.log(index)
if(index==1){
return false;//在each裏return false結束循環
}
console.log("aaa")
})
})
$(".btn").each(function (index, ele) {
$(ele).click(function () {
console.log(index);
});
});