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);
});
});