JQuery之DOM操作
获取、设置内容
方法(获取/设置) | 说明 |
---|
text()/text(内容) | 设置或返回所选元素的文本内容 |
html()/html(内容) | 设置或返回所选元素的内容(包括HTML标签) |
val()/val(内容) | 设置或返回表单字段的值 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="p-gs-1"><span>床前明月光</span></p>
<p id="p-gs-2"><span>疑是地上霜</span></p>
<p>举头望明月</p>
<p>低头思故乡</p>
用户名<input id="inupt-1" value="admin"/>
<button id="btn-1">获得html()</button>
<button id="btn-2">获得text()</button>
<button id="btn-3">获得val()</button>
<hr>
<button id="btn-4">设置html()</button>
<button id="btn-5">设置text()</button>
<button id="btn-6">设置val()</button>
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">
$("#btn-1").click(function(){
console.log($("#p-gs-1").html())
})
$("#btn-2").click(function(){
console.log($("#p-gs-2").text())
})
$("#btn-3").click(function(){
console.log($("#inupt-1").val())
})
$("#btn-4").click(function(){
$("#p-gs-1").html("<span style='color:red'>白日依山尽</span>")
})
$("#btn-5").click(function(){
$("#p-gs-2").text("<span style='color:red'>黄河入海流</span>")
})
$("#btn-6").click(function(){
$("#inupt-1").val("奥特曼")
})
</script>
</body>
</html>
获取、设置属性
方法 | 说明 |
---|
attr(name) | 获取指定属性 |
attr(key,value) | 设置属性为指定属性值 |
attr({key:value,key:value,...}) | 同时设置多组属性 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="input-1" type="text"/>
<button id="btn-1">获得属性</button>
<button id="btn-2">设置属性</button>
<button id="btn-3">设置多个属性</button>
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">
$("#btn-1").click(function(){
console.log($("#input-1").attr("type"))
})
$("#btn-2").click(function(){
$("#input-1").attr("type","radio")
})
$("#btn-3").click(function(){
$("#input-1").attr({type:"password",value:"123456"})
})
</script>
</body>
</html>
追加元素
方法 | 说明 |
---|
append() | 被选元素结尾 追加,追加到在被选元素的内部 ,可称为被选元素的子元素 |
prepend() | 被选元素开头 追加,追加到在被选元素的内部 ,可称为被选元素的子元素 |
before() | 被选元素后 追加,追加到在被选元素的外部 ,可称为被选元素的兄弟元素 |
after() | 被选元素前 追加,追加到在被选元素的外部 ,可称为被选元素的兄弟元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
var $append = $("#btn1")
$append.click(function(){
$("#div1").append('<div style="width: 100px;height: 100px;border: 2px solid green;">这是append()方法</div>')
})
var $prepend = $("#btn2")
$prepend.click(function(){
$("#div1").prepend('<div style="width: 100px;height: 100px;border: 2px solid black;">这是prepend()方法</div>')
})
var $before = $("#btn3")
$before.click(function(){
$("#div1").before('<div style="width: 100px;height: 100px;border: 2px solid blue;">这before()方法</div>')
})
var $after = $("#btn4")
$after.click(function(){
$("#div1").after('<div style="width: 100px;height: 100px;border: 2px solid yellow;">这after()方法</div>')
})
})
</script>
</head>
<body>
<button id="btn1">append追加元素</button>
<button id="btn2">prepend追加元素</button>
<button id="btn3">before追加元素</button>
<button id="btn4">after追加元素</button>
<div id="div1" style="width: 300px; height:300px; border:2px solid red"></div>
</body>
</html>
删除元素
方法 | 说明 |
---|
remove() | 删除自己及其内部元素 |
remove(选择器) | 删除选择到的指定元素 |
empty() | 删除内部元素,保留自己 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
var $btn1 = $("#btn1")
$btn1.click(function(){
$("#p2").remove()
})
var $btn2 = $("#btn2")
$btn2.click(function(){
$("div").empty()
})
})
</script>
</head>
<body>
<p id="p1">这是一个段落1</p>
<p id="p2"><span style="color: red;">这是要被删除段落2</span></p>
<p id="p3">这是一个段落3</p>
<div style="height: 300px; width:300px; border:2px solid blue">
<ul>
<li id="li1">子元素1</li>
<li id="li2">子元素2</li>
<li id="li3">子元素3</li>
</ul>
</div>
<button id="btn1">删除一个元素及其子元素</button>
<button id="btn2">删除一个元素的子元素</button>
</body>
</html>
CSS操作
css类
方法 | 说明 |
---|
addClass() | 向被选元素添加一个或多个类 |
removeClass() | 从被选元素删除一个或多个类 |
toggleClass() | 对被选元素进行添加/删除类的切换操作 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div-border{
border: 20px solid red;
}
.div-pos {
margin: auto;
}
</style>
</head>
<body>
<div id="div-1" style="width: 300px;height: 300px;background-color: aqua;"></div>
<button id="btn-1">点击-添加css类</button>
<button id="btn-2">点击-移除css类</button>
<button id="btn-3">点击-切换css类</button>
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">
$("#btn-1").click(function(){
$("#div-1").addClass("div-border div-pos")
})
$("#btn-2").click(function() {
$("#div-1").removeClass("div-border")
})
$("#btn-3").click(function() {
$("#div-1").toggleClass("div-border")
})
</script>
</body>
</html>
css方法
设置或返回样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div-1" >块</div>
<button id="btn-1">点击设置背景颜色</button>
<button id="btn-2">点击设置高,宽,边框</button>
<button id="btn-3">点击获得样式属性值</button>
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">
$("#btn-1").click(function(){
$("#div-1").css("background-color","red")
})
$("#btn-2").click(function(){
$("#div-1").css({width:"300px",height:"300px",border:"2px solid black"})
})
$("#btn-3").click(function(){
console.log($("#div-1").css("background-color"))
})
</script>
</body>
</html>
JQuery遍历
祖先
方法 | 说明 |
---|
parent() | 返回直接父级 |
parents() | 返回所有父级,直到html |
parentsUntil(“元素名”) | 返回所有父级,直到指定元素,不包含该元素 |
后代
方法 | 说明 |
---|
children() | 返回直接后代 |
find(“选择器”) | 返回所有层次的后代,会再次根据指定的选择器过滤 |
兄弟
方法 | 说明 |
---|
siblings() | 所有兄弟元素 |
next() | 下一个兄弟元素 |
prev() | 上一个兄弟元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
var $btn1 = $("#btn1")
$btn1.click(function(){
console.log($("#div-1-1").parent())
})
var $btn2 = $("#btn2")
$btn2.click(function(){
console.log($("#div-1-1").parents())
})
var $btn3 = $("#btn3")
$btn3.click(function(){
console.log($("#div-1-1").parentsUntil("body"))
})
var $btn4 = $("#btn4")
$btn4.click(function(){
console.log($("#div-1").children())
})
var $btn5 = $("#btn5")
$btn5.click(function(){
console.log($("#div").find("*"))
})
var $btn6 = $("#btn6")
$btn6.click(function(){
console.log($("#div-1-1").siblings())
})
var $btn7 = $("#btn7")
$btn7.click(function(){
console.log($("#div-1-2").next())
})
var $btn8 = $("#btn8")
$btn8.click(function(){
console.log($("#div-1-2").prev())
})
})
</script>
</head>
<body>
<button id="btn1">parent</button>
<button id="btn2">parents</button>
<button id="btn3">parentUntil</button><br />
<button id="btn4">children</button>
<button id="btn5">find</button><br />
<button id="btn6">siblings</button>
<button id="btn7">next</button>
<button id="btn8">prev</button><br />
<div id="div" style="width: 500px;height: 500px;border: 5px solid red;">
<div id="div-1" style="width: 400px;height: 400px;border: 5px solid rosybrown;">
<div id="div-1-1" style="width: 100px;height: 100px;border: 5px solid blueviolet;"></div>
<div id="div-1-2" style="width: 100px;height: 100px;border: 5px solid burlywood;"></div>
<div id="div-1-3" style="width: 100px;height: 100px;border: 5px solid cadetblue;"></div>
</div>
</div>
</body>
</html>
过滤
方法 | 说明 |
---|
first() | 第一个元素 |
last() | 最后一个元素 |
eq(index) | index从0开始获得指定下标元素 |
filter(“选择器”) | 根据选择器过滤 |
not(“选择器”) | not() 方法返回不匹配标准的所有元素。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn-1").click(function() {
$("p").first().css("color", "red")
})
$("#btn-2").click(function() {
$("p").last().css("color", "green")
})
$("#btn-3").click(function() {
$("p").eq(2).css("color", "blue")
})
$("#btn-4").click(function() {
$("p").filter(".su").css("color", "pink")
})
$("#btn-5").click(function() {
$("p").not(".su").css("color", "red")
})
})
</script>
</head>
<body>
<div id="div-1">
<p>韩愈</p>
<p>柳宗元</p>
<p class="su">苏洵</p>
<p class="su">苏轼</p>
<p class="su">苏辙</p>
<p>欧阳修</p>
<p>王安石</p>
<p>曾巩</p>
</div>
<button id="btn-1">first</button>
<button id="btn-2">last</button>
<button id="btn-3">eq-2</button>
<button id="btn-4">filter-su</button>
<button id="btn-5">not</button>
</body>
</html>