1删除元素remove,empty
remove() 和 empty()的区别
remove:包括选中的元素包括其子元素,
empty:清除其子元素。
2.css属性
多属性使用{}括起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ-css</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#div1").css({"background":"blue","border":"solid wheat"}) //多属性
$("#div2").css({"background":"purple","border":"solid red"})
})
})
</script>
</head>
<body>
<button>提交</button>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>
$即将进入JQ的遍历。
1.parent 被选元素的直接父元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ-遍历</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$("#span").parent().css({"color":"red","border":"solid red"})
}) </script>
</head>
<body>
<!--灰色标注为初始颜色-->
<div id="div" style="border: grey solid">
div元素
<ul id="ul" style="border: grey solid">
ul元素
<li id="li" style="border: grey solid">
li元素
<br><span id="span" style="border: grey solid" >
sp元素
</span>
</li>
</ul> </div>
</body>
</html>
2.parents 选元素的所有祖先元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ-遍历</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$("#span").parents().css({"color":"red","border":"solid red"})
}) </script>
</head>
<body>
<!--灰色标注为初始颜色-->
<div id="div" style="border: grey solid">
div元素
<ul id="ul" style="border: grey solid">
ul元素
<li id="li" style="border: grey solid">
li元素
<br><span id="span" style="border: grey solid">
sp元素
</span>
</li>
</ul> </div>
</body>
</html>
3.返回介于两个给定元素之间的所有祖先元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ-遍历</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$("#span").parentsUntil("#div").css({"color":"red","border":"solid red"})
}) </script>
</head>
<body>
<!--灰色标注为初始颜色-->
<div id="div" style="border: grey solid">
div元素
<ul id="ul" style="border: grey solid">
ul元素
<li id="li" style="border: grey solid">
li元素
<br><span id="span" style="border: grey solid">
sp元素
</span>
</li>
</ul> </div>
</body>
</html>