八、JQuery创建DOM元素
js中创建DOM元素的方式有两种,为
document.createElement(); //object appendchild方式
var str="<span></span>"; //innerHTML方式
在JQuery中,结合了js的两种方式,
函数$( )用于动态创建页面元素,语法格式为$(html),其中参数html表示用于动态创建DOM元素的HTML标记字符串,例如:
要在页面动态创建一个<span>标签并设置其内容,代码可以为
var str=$("<span>小猫吃鱼</span>");
创建完成,追加给父级节点,分为内部插入节点和外部插入节点两种方法。
九、插入节点
内部插入节点:
语法格式 | 参数说明 | 功能描述 |
append(content) | content表示追加到目标中的内容 | 向所选择的元素内部插入内容 |
append(function(index,html)) | 通过function函数返回追加到目标中的内容 | 向所选择的元素内部插入function函数所返回的内容 |
appendTo(content) | content表示被追加的内容 | 把所选择的元素追加到另一个指定的元素集合中 |
prepend(content) | content表示插入目标元素内部前面的内容 | 向每个所选择的元素内部前置内容 |
prepend(function(index,html)) | 通过function函数返回插入目标元素前面的内容 | 向所选择的元素内部前置function函数所返回的内容 |
prependTo(content) | content表示用于选择元素的JQuery表达式 | 将所选择的元素前置到另一个指定的元素集合中 |
上面方法的示例如下代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
<style>
.block{
width: 200px;
height: 100px;
background-color: #45baff;
}
</style>
</head>
<body>
<div class="block">小猫抓老鼠</div>
<div class="block1">
<p>1</p>
</div>
<div class="block1">
<p>2</p>
</div>
<div class="block1">
<p>3</p>
</div>
<script>
var str=$("<span>小猫吃鱼</span>");
//创建完成,追加span给block
// $(".block").append(str);//追加到所选择元素的内容之后
str.appendTo($(".block"));//追加到所选择元素的内容之后
//上面两行代码的作用相同,使用的方法不同
var sty=$("<span>小猫吃肉肉</span>");
$(".block").prepend(sty);//追加到所选择元素的内容之前
// sty.prependTo($(".block"));//追加到所选择元素的内容之前
//上面两行代码的作用相同,使用的方法不同
//function函数的示例
$(".block1").append(function(index,html){
console.log($(".block1").eq(index));//当前对象 输出为集合
//创建dom对象
var st=html;//将html里原本的值给st
$(this).html("");//将原来的<p>清空
var s=$("<span>"+st+"</span>");//定义s为<span>包裹<p>
return s;
});
</script>
</body>
</html>
上面代码的运行结果:
外部插入节点:
语法格式 | 参数说明 | 功能描述 |
after(content) | content表示插入目标元素外部后面的内容 | 向所选择的元素外部后面插入内容 |
after(function) | 通过function函数返回插入目标外部后面的内容 | 向所选择的元素外部后面插入function函数所返回的内容 |
before(content) | content表示插入目标外部前面的内容 | 向所选择的元素外部前面插入内容 |
before(function) | 通过function函数返回插入目标外部前面的内容 | 向所选择的元素外部前面插入function函数所返回的内容 |
insertAfter(content) | content表示插入目标元素外部后面的内容 | 将所选择的元素插入另一个指定的元素外部后面 |
insertBefore(content) | content表示插入目标元素外部前面的内容 | 将所选择的元素插入另一个指定的元素外部前面 |
示例1:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
//外部插入节点
var msg=$("<p>啦啦啦啦</p>");
var msd=$("<p>哈哈哈哈</p>");
$("#btn").after(msg);//在当前元素外面且后面追加
$("#btn").before(msd);//在当前元素外面且前面追加
</script>
</body>
</html>
运行结果:
示例二:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
//外部插入节点
var asd=$("<p>哇哇哇哇</p>");
var asc=$("<p>嘻嘻嘻嘻</p>");
asd.insertAfter($("#btn"));//在当前元素外面且后面追加
asc.insertBefore($("#btn"));//在当前元素外面且前面追加
</script>
</body>
</html>
运行结果:
十、复制节点
在js中,复制元素比较复杂,在JQuery中可以通过clone( )方法实现,语法格式为clone( );
其功能为复制匹配的DOM元素并且选中复制成功的元素,该方法仅是复制元素本身,被复制后的新元素不具有任何元素行为。如果需要在复制时将元素的全部行为进行复制,可以通过方法clone(true)实现。
clone( ) 默认 参数为false 只是复制元素 ,参数为true 为深度克隆 包括复制事件等
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
$("#btn").click(function(){
alert("hello");
});
var clonebtn=$("#btn").clone(false);//仅复制元素,即点击新的按钮不会弹出窗口
$("body").append(clonebtn);
var clonebtn2=$("#btn").clone(true);//连同元素的行为一起复制,点击新的按钮会弹出窗口
$("body").append(clonebtn2);
</script>
</body>
</html>
十一、替换节点
在jQuery中,替换节点可以使用replaceWith()和replaceAll()这两种方法,其语法格式如下:
replaceWith(content) ,该方法是将所有选择的元素替换成指定的HTML或DOM元素,参数content为被所选择元素替换的内容
replaceAll(selector) ,该方法将所有所有选择的元素替换成指定selector的元素,参数selector为需要被替换的元素
案例:
效果图:
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.block{
width: 720px;
margin: 0 auto;
border: 1px solid black;
}
.list{
line-height: 40px;
border-bottom: 1px dashed silver;
overflow: hidden;
}
.list>span{
width: 120px;
display: block;
float: left;
text-align: center;
}
button{
width: 120px;
border-style: none;
background-color: transparent;
cursor: pointer;
color: #0000f8;
outline: none;
}
.ipt{
width: 120px;
height: 40px;
font-size: 16px;
float: left;
box-sizing: border-box;
text-align: center;
outline: none;
}
</style>
</head>
<body>
<div class="block">
<div class="list">
<span>张三</span>
<span>20</span>
<span>男</span>
<span>110</span>
<span>西安</span>
<button>修改</button>
</div>
<div class="list">
<span>张三</span>
<span>20</span>
<span>男</span>
<span>110</span>
<span>西安</span>
<button>修改</button>
</div>
<div class="list">
<span>张三</span>
<span>20</span>
<span>男</span>
<span>110</span>
<span>西安</span>
<button>修改</button>
</div>
<div class="list">
<span>张三</span>
<span>20</span>
<span>男</span>
<span>110</span>
<span>西安</span>
<button>修改</button>
</div>
<div class="list">
<span>张三</span>
<span>20</span>
<span>男</span>
<span>110</span>
<span>西安</span>
<button>修改</button>
</div>
<div class="list">
<span>张三</span>
<span>20</span>
<span>男</span>
<span>110</span>
<span>西安</span>
<button>修改</button>
</div>
<div class="list">
<span>张三</span>
<span>20</span>
<span>男</span>
<span>110</span>
<span>西安</span>
<button>修改</button>
</div>
<div class="list">
<span>张三</span>
<span>20</span>
<span>男</span>
<span>110</span>
<span>西安</span>
<button>修改</button>
</div>
<div class="list">
<span>张三</span>
<span>20</span>
<span>男</span>
<span>110</span>
<span>西安</span>
<button>修改</button>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$("button").each(function(index){
$(this).prop("data-use",true);
$(this).click(function(){
if($(this).prop("data-use")==true){
$(this).html("确定");
$(".list").eq(index).find("span").each(function(){
var ipt=$("<input class='ipt' value='"+$(this).html()+"'>");
$(this).replaceWith(ipt);
});
$(this).prop("data-use",false);
}
else{
$(this).html("修改");
$(".list").eq(index).find("input").each(function(){
var ipt=$("<span>"+$(this).val()+"</span>");
$(this).replaceWith(ipt);
});
$(this).prop("data-use",true);
}
})
});
</script>
</body>
</html>
十二、包裹节点
语法格式 | 参数说明 | 功能描述 |
wrap(html) | html为字符串代码,用于生成元素并包裹所选元素 | 把所有选择的元素用其他字符串代码包裹起来 |
wrap(elem) | elem参数用于包裹所选元素的DOM元素 | 把所有选择的元素用其他DOM元素包裹起来 |
wrap(fn) | fn参数为包裹结构的一个函数 | 把所有选择的元素用function函数返回的代码包裹起来 |
unwrap() | 无参数 | 移除所选元素的父元素或包裹标记 |
wrapAll(html) | html为字符串代码,用于生成元素并包裹所选元素 | 把所有选择的元素用单个元素包裹起来 |
wrapAll(elem) | elem参数用于包裹所选元素的DOM元素 | 把所有选择的元素用单个DOM元素包裹起来 |
wrapInner(html) | html为字符串代码,用于生成元素并包裹所选元素 | 把所有选择的元素的子内容(包括文本节点)用字符串代码包裹起来 |
wrapInner(elem) | elem参数用于包裹所选元素的DOM元素 | 把所有选择的元素的子内容(包括文本节点)用DOM元素包裹起来 |
wrapInner(fn) | fn参数为包裹结构的一个函数 | 把所有选择的元素的子内容(包括文本节点)用function函数返回的代码包裹起来 |
示例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
var s=$("<span></span>");
//wrap 用元素(对象或者字符串)包裹被选择元素 包的是一个元素
$("#btn").wrap("<span></span>");//<span>包裹<button>
//wrapAll 用元素(对象或者字符串)包裹被选择元素 包的是一个元素或者多个元素
$(".btn").wrapAll("<span></span>");<span>包裹3个<button>
//移除被包裹元素的父级元素或者包裹标记 unwrap()
$(".btn").unwrap();
// $(".btn").wrapInner(s);//用包裹元素包裹被选择元素的子元素 span包裹文本
</script>
</body>
</html>
十三、元素的遍历
使用each()方法实现元素遍历
关于each()方法的使用如下代码示例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
//元素的遍历 each
$(".btn").each(function(index){
$(this).click(function(){
console.log(index)
})
});//遍历所有类名称为btn的元素,当点=点击它们时,输出自己的索引
//在each 里面return false 提前终止遍历
$(".btn").each(function(index){
$(this).click(function(){
console.log(index);
if(index==2){
return false
}
console.log("你好")
})
});//当点击索引为2的btn元素时,不会输出你好
</script>
</body>
</html>