回顾:jQuery02.$工具方法&属性&css
目录
筛选
过滤
查找
演示所有查找方法
文档处理
增加
内部插入
外部插入
演示文档处理-增加
删除
演示文档处理-删除
修改
演示文档处理-修改
筛选
过滤
1. first() 获取匹配的第一个元素
2. last() 获取匹配的最后一个元素
3. eq(N) 获取匹配的第N或-N个元素
4. filter(selector) 筛选出与指定表达式匹配的元素集合
5. has(selector) 筛选出包含特定特点的元素的集合
6. not(selector) 筛选出不包含特定元素的元素集合
查找
1. childern() 子代标签中找
2. find() 后代标签中找
3. parent() 父标签
4. prevAll() 前面所有的兄弟标签
5. nextAll() 后面所有的兄弟标签
6. siblings() 前后所有的兄弟标签
演示所有查找方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>查找方法</title>
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li><span></span></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
var arr=[1,2,'三',true]
//从元素数组中找到第一个元素
console.log($(arr).first())
//从元素数组中找到最后一个元素
console.log($(arr).last())
//从元素数组中找到指定的某一个元素(数组中是以0开始的,这里找到第3个)
console.log($(arr).eq(2))
//从元素数组中筛选出有title属性的元素集合
console.log($('html').filter('[title]'))
//从元素数组中筛选出有<span>标签的元素集合
console.log($('li').has('span'))
//从元素数组中筛选出没有title属性的元素标签
console.log($('html').not('[title]'))
</script>
</body>
</html>文档处理
增加
内部插入
1. append() 将内容添加到指定的元素后面
2. appendTo() 和append()颠倒,将.前面内容添加到指定内容后
3. prepend() 将内容添加到指定内容前
4. prependTo() 和prepend()颠倒
外部插入
1. after() 在匹配元素之后插入内容
2. before() 在匹配元素之前插入内容
演示文档处理-增加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<ul>
<li title="b"></li>
<li title="a"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
//给ul中最后一个li中插入一个a
$('li').last().append('<a>a</a>')
//给ul中最后一个li中插入一个a,使用appendTo()
$('<a>a</a>').appendTo($('li').last())
//给ul中第一个li中插入一个a
$('li').first().prepend('<a>a</a>')
//给ul中第一个li中插入一个a,使用prependTo
$('<a>a</a>').prependTo($('li').first())
//给属性title为b前面添加一个li
$('li').filter('[title=b]').before('<li>b</li>')
//在属性title为b后面添加一个li
$('li').filter('[title=b]').after('<li>b</li>')
</script>
</body>
</html>删除
1. empty() 删除匹配的元素集合中所有的子节点(不包含匹配的元素)
2. remove() 删除匹配的元素集合中所有的子节点(包含匹配的元素)
演示文档处理-删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
//删除匹配的元素集合中所有的子节点(不包含匹配的元素)
$('ul').empty()
//删除匹配的元素集合中所有的子节点(包含匹配的元素)
$('ul').remove()
</script>
</body>
</html>修改
replaceWith() 将所有匹配的元素替换成指定的内容
演示文档处理-修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<ul>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
</ul>
<script type="text/javascript">
//把li标签下面所有的span标签替换成<a>标签
$('li span').replaceWith('<a></a>')
</script>
</body>
</html>你要尽全力保护你的梦想。那些嘲笑你梦想的人，他们注定失败，他们想把你变成和他们一样。我坚信，只要心中有梦想，我就会与众不同。你也是。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
