目录
DOM操作分类
DOM操作分为三类：
DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
HTML-DOM：用于处理HTML文档，如document.forms
CSS-DOM：用于操作CSS，如element.style.color="green"
JavaScript用于对html/xhtml文档进行操作，它对这三类DOM操作都提供了支持
jQuery中的DOM操作
jQuery对JavaScript中的DOM操作进行了封装
jQuery中的DOM操作
样式操作
内容及Value值操作
节点及节点属性操作
节点遍历
样式操作
设置和获取样式值
使用css()为指定的元素设置样式值或获取样式值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
<style>
p{
color: #f00;
font-size: 32px;
}
</style>
</head>
<body>
<p>我是段落标签</p>
<script>
$(function(){
//获取样式
var result1 = $('p:first').css('color');
console.log(result1);
var result2 = $('p:first').css('font-size');
console.log(result2);
//设置样式
//设置一个样式
$('p:first').css('background-color','#ccc');
//设置多个样式
$('p:first').css({
'text-align':'center',
'width':'300px',
'height':'48px',
'line-height':'48px'
});
});
</script>
</body>
</html>
追加和移除样式
追加样式
移除样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
<style>
.demo{
color: #f00;
}
.test{
font-size: 36px;
}
</style>
</head>
<body>
<p class="demo">我是段落标签</p>
<button>添加类样式</button>
</body>
<script>
$(function(){
//addClass('class样式名'):给元素添加类样式，可以添加一个或多个样式，添加的类样式不会覆盖之前已经存在的样式
// $('p').addClass('test');
// $('button').click(function(){
// $('p').addClass('test');
// });
removeClass('class样式名'):移除元素上的class样式，可以移除一个或多个
$('p').removeClass('demo test');
});
</script>
</html>切换样式
toggleClass()
模拟了addClass()与removeClass()实现样式切换的过程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
<style>
div{
width: 300px;
height: 200px;
border: 1px solid #f00;
margin-bottom: 20px;
}
.demo{
background-color: #ccc;
border-radius: 30px;
}
</style>
</head>
<body>
<div></div>
<button>添加样式或删除样式</button>
</body>
<script>
//需求：点击按钮，如果div具备.demo的样式，就移除改样式，如果不具备，就添加改样式
//原生JS实现
//获取button元素并添加点击事件
// var btnEle = document.querySelector('button');
// var result = true;
// btnEle.onclick = function(){
//获取div元素
// var divEle = document.querySelector('div');
// if(result){
// divEle.className = 'demo';
// result = false;
// }else {
// divEle.className = '';
// result = true;
// }
// }
//使用jQuery来实现
$(function(){
//使用addClass()和removeClass()来实现
// var result = true;
// $('button').click(function(){
// if(result){
// $('div').addClass('demo');
// result = false;
// }else {
// $('div').removeClass('demo');
// result = true;
// }
// });
$('button').click(function(){
$('div').toggleClass('demo');
});
});
</script>
</html>
判断是否含指定的样式
hasClass( )方法来判断是否包含指定的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
<style>
div{
width: 300px;
height: 200px;
border: 1px solid #f00;
margin-bottom: 20px;
}
.demo{
background-color: #ccc;
border-radius: 30px;
}
</style>
</head>
<body>
<div class="demo"></div>
<button>添加样式或删除样式</button>
</body>
<script>
$(document).ready(function(){
$('button').click(function(){
if(!$('div').hasClass('demo')){
$('div').addClass('demo');
}else{
$('div').removeClass('demo');
}
});
});
</script>
</html>
内容及Value值操作
HTML代码操作
html()可以对HTML代码进行操作，类似于JS中的innerHTML
语法：
$("div.left").html(); //获取元素中的html代码
或
$("div.left").html("<div class='content'>…</div>");//设置元素中的html代码
标签内容操作
text()可以获取或设置元素的文本内容
语法：
$("div.left").text();//获取元素中的文本内容
或
$("div.left").text("<div class='content'>…</div>");//设置元素中的文本内容
html( ) 和text( )方法的区别
| 语法格式 | 参数说明 | 功能描述 |
| html( ) | 无参数 | 用于获取第一个匹配元素的HTML内容 或文本内容 |
| html(content) | content为元素的HTML内容 | 用于设置所有匹配元素的HTML内容 或文本内容 |
| text( ) | 无参数 | 用于获取所有匹配元素的文本内容 |
| text (content) | content为元素的文本内容 | 用于设置所有匹配元素的文本内容 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js" type="text/javascript">
</script>
</head>
<body>
<div >
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<h2></h2>
<h2></h2>
</body>
<script>
$(function(){
//获取div中的内容
var result1 = $('div').html();
console.log(result1);
var result2 = $('div').html();
console.log(result2);
//获取h2标签，并向里面插入内容
$('h2:first').html('<a href = "#">qwert</a>');
$('h2:last').text('<a href = "#">qwert</a>');
});
</script>
</html>属性值操作
val()可以获取或设置元素的value属性的值
语法：
$(this).val();//获取元素的value属性值
或
$(this).val(value);//设置元素的value属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>
<input type="radio" value="tttt"/>选我
</body>
<script>
$(function(){
var val1 = $('input').val();
console.log(val1);
$('input').val('helljs');
var val2 = $('input').val();
console.log(val2);
});
</script>
</html>节点操作
创建节点元素
工厂函数$()用于获取或创建节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点
插入节点
元素内部插入子节点
| 语法 | 功能 |
| append(content) | $(A).append(B)表示将B追加到A中 如：$("ul").append($newNode1); |
| appendTo(content) | $(A).appendTo(B)表示把A追加到B中 如：$newNode1.appendTo("ul"); |
| prepend(content) | $(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend ($newNode1); |
| prependTo(content) | $(A). prependTo (B)表示将A前置插入到B中 如：$newNode1. prependTo ("ul"); |
元素外部插入同辈节点
| 语法 | 功能 |
| after(content) | $(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1); |
| insertAfter(content) | $(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul"); |
| before(content) | $(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1); |
| insertBefore(content) | $(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul"); |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>
<ul>
<li>11111</li>
<li>22222</li>
</ul>
</body>
<script>
$(function(){
//获取ul元素
var ulEle = $('ul');
//创建一个li元素，li元素中的内容为"33333"
var $creatLiEle = $('<li>33333</li>');
//将创建的li的元素添加到ul元素中
ulEle.append($creatLiEle);
var $creatLiEle2 = $('<li>44444</li>');
$creatLiEle2.appendTo(ulEle);
ulEle.prepend($creatLiEle);
$creatLiEle2.prependTo(ulEle);
var $creatLiEle3 = $('<li>33333</li>');
$('li:eq(3)').after($creatLiEle3);
var $creatLiEle4 = $('<li>44444</li>');
$creatLiEle4.insertAfter($('li:eq(4)'));
//jQuery remove() 方法删除被选元素及其子元素。
$('li:eq(5)').remove();
// jQuery empty() 方法删除被选元素的子元素。
// $('ul').empty();
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.6.1.min.js">
</script>
<style>
img{
width: 300px;
}
</style>
</head>
<body>
<img src="img/car2.jpg">
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("img").before("<b>之前</b>");
});
$("#btn2").click(function() {
$("img").after("<i>之后</i>");
});
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>
<p id="demo">我是段落标签</p>
</body>
<script>
$(function(){
//创建一个h2标签
var $h2Ele = $('<h2>我是2级标题标签</h2>');
//将创建的h2元素插入到p元素的后面
// $('#demo').after($h2Ele);
// $h2Ele.insertAfter($('#demo'));
//将创建的h2元素插入到p元素的前面
// $('#demo').before($h2Ele);
// $h2Ele.insertBefore($('#demo'));
});
</script>
</html>
删除节点
jQuery提供了三种删除节点的方法(这里只说第一种)
remove()：删除整个节点
$(selector).remove([expr]);
empty()：清空节点内容
$(selector).empty();
detach()：删除整个节点，保留元素的绑定事件、附加的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>
<ul>
<li>
<p>列表项第一项</p>
</li>
<li>
<p>列表项第一项</p>
</li>
</ul>
</body>
<script>
$(function(){
//获取li元素并删除
$('li').remove();
});
</script>
</html>替换节点
replaceWith()和replaceAll()用于替换某个节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>
<ul></ul>
<li>
<p>我是段落标签1</p>
</li>
<li>
<p>我是段落标签2</p>
</li>
<li>
<p>我是段落标签3</p>
</li>
<li>
<p>我是段落标签4</p>
</li>
</body>
<script>
$(function(){
//创建一个元素
var $newPEle = $('<p>我是第3个段落标签</p>');
//学习jQuery中的函数，除了要注意函数的功能和需要的参数之外，还需要注意这个函数由谁来调用
// $('p').eq(2).replaceWith($newPEle);
$newPEle.replaceAll($('p'));
});
</script>
</html>复制节点
clone()用于复制某个节点
语法：
$(selector).clone([includeEvents]) ;//参数ture或flase, true复制事件处理，flase时反之
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>
<ul></ul>
<li>
<p>我是段落标签1</p>
</li>
<li>
<p>我是段落标签2</p>
</li>
<li>
<p>我是段落标签3</p>
</li>
<li>
<p>我是段落标签4</p>
</li>
</body>
<script>
$(function(){
$('li:eq(3)').click(function(){
alert('你好');
});
//需求：将第4个li元素复制并添加到ul中的第一个位置
//clone():此函数中可以传递一个boolean类型的参数，默认值是false,表示复制元素上的绑定事件不复制，如果为true,则复制元素上的绑定事件也会一起复制
// $('li').eq(3).clone().prependTo($('ul'));
$('li').eq(3).clone(true).prependTo($('ul'));
});
</script>
</html>属性操作
获取与设置元素属性
attr()用来获取与设置元素属性
$(selector).attr([name]) ;//获取属性值
或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;//设置多个属性的值
删除元素属性
removeAttr()用来删除元素的属性
语法：
$(selector).removeAttr(name) ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
<style>
a{
width: 100px;
height: 50px;
background-color: #ccc;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_self">百度一下</a>
</body>
<script>
$(function(){
//获取a元素并获取其某些属性样式
var href =$('a').attr('href');
console.log(href);
//设置一个属性值
$('a').attr('target','_blank');
//设置多个属性值
$('a').attr({
'target':'_blank',
'href':'https://www.runoob.com/'
});
/*
注意：attr()是获取和设置元素的属性，css()是获取和设置元素的样式
*/
$('a').removeAttr('target');
});
</script>
</html>节点遍历
遍历子元素
children()方法可以用来获取元素的所有子元素
$(selector).children([expr]);//获取<selector>的子元素，不包含子元素的子元素
遍历同辈元素
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
| 语法 | 功能 |
| next([expr]) | 用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange"); |
| prev([expr]) | 用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange"); |
| siblings([expr]) | 用于获取位于匹配元素前面和后面的所有同辈元素 $("li:eq(1)"). siblings().addClass("orange"); |
遍历前辈元素
jQuery中可以遍历前辈元素
parent()：获取元素的父级元素
parents()：元素元素的祖先元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li id="demo">3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</body>
<script>
$(function(){
//获取ul的所有子元素
var ulChildren = $('ul').children();
console.log(ulChildren);
//获取id名称为demo的元素的前面一个兄弟元素
console.log($('#demo').prev());
//获取id名称为demo的元素的后面一个兄弟元素
console.log($('#demo').next());
//获取id名称为demo的元素的前面和后面的所有兄弟元素
console.log($('#demo').siblings());
//获取id名称为demo的元素的父元素
console.log($('#demo').parent());
//获取id名称为demo的元素的父辈元素
console.log($('#demo').parents());
});
</script>
</html>CSS-DOM操作
除css()外，还有获取和设置元素高度、宽度等的样式操作方法
| 语法 | 功能 |
| css() | 设置或返回匹配元素的样式属性 |
| height([value]) | 设置或返回匹配元素的高度 |
| width([value]) | 设置或返回匹配元素的宽度 |
| offset([value]) | 返回以像素为单位的top和left坐标。仅对可见元素有效 |
| offsetParent( ) | 返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素 |
| position( ) | 返回第一个匹配元素相对于父元素的位置 |
| scrollLeft([position]) | 参数可选。设置或返回匹配元素相对滚动条左侧的偏移 |
| scrollTop([position]) | 参数可选。设置或返回匹配元素相对滚动条顶 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
<style>
div{
width: 300px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
$(function(){
//获取div元素的宽度和高度
console.log($('div').css('width'));
console.log($('div').css('height'));
console.log($('div').width());
console.log($('div').height());
});
</script>
</html>
1096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
