jQuery_03 筛选&文档处理

渊婉

已于 2022-07-28 19:57:31 修改

阅读量1.7k

点赞数 1

分类专栏： jQuery 文章标签： jquery 前端 javascript

于 2022-03-11 16:51:20 首次发布

本文链接：https://blog.csdn.net/qq_61313896/article/details/123412843

版权

本文详细介绍了jQuery中的筛选方法，包括first(), last(), eq(), filter(), has(), not()等，以及如何根据class属性添加样式。此外，还讨论了查找方法，如children(), find(), parent(), parents()等。同时，讲解了文档处理中的增加、删除和修改元素的方法，如append(), prepend(), empty(), remove(), replaceWith()等，最后通过全选案例进行实践应用。" 45016073,4904529,模余排序算法实现,"['算法', '编程', '数据处理']

摘要由CSDN通过智能技术生成

一：筛选中的过滤方法有哪些？

first() 获取匹配的第一个元素

          <style>
			.cc {
				box-shadow: 0px 0px 50px yellow;
			}

		</style>
		<script>
			$(function() {
				//first() 获取匹配的第一个元素
				console.log($("img").first());
				//添加样式
				console.log($("img").first().addClass("cc"));
               })

last() 获取匹配的最后一个元素

        <style>			
			.aa {
				box-shadow: 0px 0px 50px orchid;
			}
		</style>
		<script>
			$(function() {
				//last() 获取匹配的最后一个元素
				console.log($("img").last());
				//添加样式
				console.log($("img").last().addClass("aa"));
                })

eq(N) 根据下标获取匹配的元素

               //eq(N)  根据下标获取匹配的元素    
				console.log($("img").eq(2));

filter(selector) 筛选出与指定表达式匹配的元素集合

          <style>
			.bb {
				border: 10px solid blue;
			}

			.aa {
				box-shadow: 0px 0px 50px orchid;
			}
		</style>
		<script>
			$(function() {
				//filter(selector) 筛选出与指定表达式匹配的元素集合
				console.log($("img").filter(".bb"));
				//添加样式
				console.log($("img").filter(".bb").addClass("aa"));
                 })

has(selector) 筛选出包含特定特点的元素的集合

          <style>
			.aa {
				box-shadow: 0px 0px 50px orchid;
			}
		</style>
		<script>
			$(function() {
				//has(selector) 筛选出包含特定特点的元素的集合
				console.log($("div").has("img"));
				//添加样式
				//选中div (里面有img,img要有class属性为aa)
				console.log($("div").has("img").addClass("aa"));