jQuery与DOM
文章目录
- HTML DOM常见操作
- 查找节点
- 插入节点
- 元素的复制
- 元素的替换
- 元素的包裹
- 属性操作
- attr（）与addClass（）的区别
- html与text的区别
HTML DOM常见操作
- 查找节点
- 插入节点
- 删除节点
- 复制节点
- 替换节点
- 包裹节点
查找节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
var $p = $("p");
var $li = $("ul li:eq(1)");
//attr是属性的意思，如果写一个值输入名字，输出value，如果两个值就是name和value给p设置属性
var title1 = $p.attr("title");//$p[0].title
var title2 = $li.attr("title");//$li[0].title
var text = $li.text();
alert(title1);
alert(title2);
alert(text);
li.attr("title", "myTitle");
});
</script>
</head>
<body>
<p title="hello world">您认为春晚好不好？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
var addItems = function () {
document.getElementById("div1").innerHTML = "";
var value = parseInt(document.getElementById("itemsNumber").value);
for(var i = 0; i < value; i++){
var input = document.createElement("input");
input.setAttribute("type", "text");
var br = document.createElement("br");
document.getElementById("div1").appendChild(input);
document.getElementById("div1").appendChild(br);
}
};
</script>
</head>
<body>
<input type="text" id="itemsNumber">
<input type="button" value="click" id="btn" onclick="addItems();">
<div id="div1"></div>
</body>
</html>
用jQuery
var addItems = function () {
document.getElementById("div1").innerHTML = "";
var value = parseInt($("#itemsNumber").val());
var str = "";
for (var i = 0; i < value; i++) {
str += "
";
}
$("#div1").append(str);
};
插入节点
| append() | 向每个匹配的元素内部追加内容 | HTML代码： < p>我想说：< /p> jQuery代码： $ ("p").append("< b>你好< /b>"); 结果：< p>我想说：< b>你好< /b>< /p> |
| appendTo() | 将所有匹配的元素追加到指定的元素中，实际上，使用该方法是颠倒了常规的$ (A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中 | HTML代码： < p>我想说：< /p> jQuery代码： $ ("< b>你好< /b>").appendTo("p"); 结果：< p>我想说：< b>你好< /b>< /p> |
| prepend（） | 向每个匹配的元素内部前置内容 | HTML代码： < p>我想说：< /p> jQuery代码： $ ("p").prepend("< b>你好< /b>"); 结果：< p>< b>你好< /b>我想说：< /p> |
| prependTo（） | 将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$ (A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中 | HTML代码： < p>我想说：< /p> jQuery代码： $ ("< b>你好< /b>").prependTo("p"); 结果：< p>< b>你好< /b>我想说：< /p> |
| after（） | 在每个匹配的元素之后插入内容 | HTML代码： < p>我想说：< /p> jQuery代码： $ ("p").after("< b>你好< /b>"); 结果：< p>我想说：< /p>< b>你好< /b> |
| insertAfter（） | 将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$ (A).after(B)的操作，即不是将B插入到A后面，而是将A插入到B后面 | HTML代码： < p>我想说：< /p> jQuery代码： $ ("< b>你好< /b>").insertAfter("p"); 结果：< p>我想说：< /p>< b>你好< /b> |
| before（） | 在每个匹配的元素之前插入内容 | HTML代码： < p>我想说：< /p> jQuery代码： $ ("p").before("< b>你好< /b>"); 结果：< b>你好< /b>< p>我想说：< /p> |
| insertBefore（） | 将所有匹配的元素插入到指定元素的前面。实际上，使用该方法是颠倒了常规的$ (A).before(B)的操作，即不是将B插入到A前面，而是将A插入到B前面 | HTML代码： < p>我想说：< /p> jQuery代码： $ ("< b>你好< /b>").after("p"); 结果：< p>我想说：< /p>< b>你好< /b> |
$(function () {
$("ul").append("hello ")
.append("world ");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
var li1 = $("hello ");
var li2 = $("world ");
var li3 = $("hello world ");
$("ul").append(li1);
$("ul").prepend(li2);
$("ul li:eq(4)").after(li3);
});
</script>
</head>
<body>
<p title="hello world">您认为春晚好不好？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>
</html>
将第3个节点插入到第5个节点后面
$(function () {
$("ul li:eq(2)").insertAfter("ul li:eq(4)");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
var addFile = function () {
var div = document.getElementById("div1");
var input = document.createElement("input");
var button = document.createElement("input");
var br = document.createElement("br");
input.setAttribute("type", "file");
button.setAttribute("type", "button");
button.setAttribute("value", "Remove");
button.onclick = function () {
div.removeChild(input);
div.removeChild(button);
div.removeChild(br);
};
div.appendChild(input);
div.appendChild(button);
div.appendChild(br);
//jQuery
/* var input = $("")
var button = $("");
var br = $("
");
$("#div1").append(input).append(button).append(br);
button.click(function () {
input.remove();
button.remove();
br.remove();
}); */
};
</script>
</head>
<body>
<input type="file">
<input type="button" value="more" onclick="addFile();"><br>
<div id="div1"></div>
</body>
</html>
元素的复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").click(function () {
//将li克隆并追加到最后面，clone中的参数true代表这克隆元素具备之前元素的所有属性。
//如果没有true在这里你点击克隆出来的元素是不能再克隆的。
$(this).clone(true).appendTo("ul");
});
});
</script>
</head>
<body>
<p title="hello world">您认为春晚好不好？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>
</html>
元素的替换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//替换，将后面的替换前面的
$("p").replaceWith("Baidu");
//前面的替换后面的
$("Baidu").replaceAll($("ul li:eq(0)"));
});
</script>
</head>
<body>
<p title="hello world">您认为春晚好不好？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>
</html>
元素的包裹
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//将p包裹在后面参数的里面
$("p").wrap("");
//将后面的参数包裹在li的里面
$("ul li:eq(0)").wrapInner("");
});
</script>
</head>
<body>
<p title="hello world">您认为春晚好不好？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>
</html>
属性操作
atter（）方法：获取与设置属性（一个参数获取，两个参数设置）
removeAttr（）方法：移除元素属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$("input:eq(0)").click(function() {
//多个属性用逗号分隔，名字和值之间用冒号，多个值用大括号括起来
$("p").attr({"title":"abcd", "hello":"world"});
});
$("input:eq(1)").click(function () {
alert($("p").attr("title"));
});
$("input:eq(2)").click(function() {
$("p").removeAttr("hello");
});
});
</script>
</head>
<body>
<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3">
<br>
<p title="hello world">您认为春晚好不好？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul><br>
</body>
</html>
点击button1
点击button2
点击button3
attr（）与addClass（）的区别
| 方法 | addClass（） | attr（） |
|---|---|---|
| 用途 | 追加样式 | 设置样式 |
| 对用一个网页元素操作 | < p>test< /p> | < p>test< /p> |
| 第一次使用方法 | $ (“p”).addClass(“heigh”); | $ (“p”).attr(“class”,“high”); |
| 第一次结果 | < p class=“high”>test< /p> | < p class=“high”>test< /p> |
| 再次使用方法 | $ (“p”).addClass(“another”); | $ (“p”).attr(“class”,“another”); |
| 最终结果 | < p class=“high another”>test< /p> | < p class=“another”>test< /p> |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.high{
font-weight: bold;
color: red;
}
.another{
font-style: italic;
color:green;
}
</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$("input:eq(0)").click(function() {
alert($("p").attr("class"));
});
$("input:eq(1)").click(function () {
$("p").attr("class", "high");
});
//追加class，如果重名，后面覆盖前面
$("input:eq(2)").click(function () {
$("p").addClass("another");
});
//只移除high
$("input:eq(3)").click(function () {
$("p").removeClass("high");
});
//移除所有class
$("input:eq(4)").click(function () {
$("p").removeClass();
});
//如果有another就删除，没有就增加，起到切换作用
$("input:eq(5)").click(function () {
$("p").toggleClass("another");
});
$("input:eq(6)").click(function () {
//是否有another的样式
//alert($("p").hasClass("another"));
//is还可以用在其他属性上面，例如checkbox是否被选中，动画是否执行……
alert($("p").is(".another"));
});
});
</script>
</head>
<body>
<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3">
<input type="button" value="button4">
<input type="button" value="button5">
<input type="button" value="button6">
<input type="button" value="button7">
<br>
<p title="hello world">您认为春晚好不好？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul><br>
</body>
</html>
html与text的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$("input:eq(0)").click(function () {
alert($("p").html());
});
$("input:eq(1)").click(function () {
alert($("p").text());
});
$("input:eq(2)").click(function () {
$("p").html("Baidu");
});
$("input:eq(3)").click(function () {
$("p").text("Baidu");
});
$("input:eq(4)").click(function () {
$(this).val("hello world");
});
});
</script>
</head>
<body>
<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3">
<input type="button" value="button4">
<input type="button" value="button5">
<br>
<p title="hello world">您认为春晚好不好？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul><br>
</body>
</html>
得到焦点focus，失去焦点blur，默认值defaultValue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$("#username").focus(function () {
var value = $(this).val();
if(value == this.defaultValue){
$(this).val("");
}
});
$('#username').blur(function() {
var value = $(this).val();
if(value == ""){
$(this).val(this.defaultValue);
}
});
});
</script>
</head>
<body>
<input type="text" id="username" value="username"><br>
<input type="password" id="password" value="password"><br>
<input type="button" value="click me">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//2个，只包括之间儿子
var v1 = $("body").children();
var v2 = $("p").children();
var v3 = $("ul").children();
alert(v1.length);
alert(v2.length);
alert(v3.length);
for(var i=0; i<v3.length; i++){
alert(v3[i].innerHTML);
}
});
</script>
</head>
<body>
<p title="hello world">您认为春晚好不好？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
var v1 = $("p").next();//下一个
var v2 = $("p").prev();//上一个
var v3 = $("p").siblings();//所有兄弟
alert(v3.length);
});
</script>
</head>
<body>
<ul>
<li title="1">bbbb</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
<p title="hello world">您认为春晚好不好？</p>
<ul>
<li title="1">aaaa</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>
</html>
结果为：3