jQuery 查找方法

最新推荐文章于 2023-06-13 08:16:29 发布
最新推荐文章于 2023-06-13 08:16:29 发布
阅读量721 收藏
点赞数
分类专栏： # jQuery 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/128406513
版权

文章目录

jQuery 查找方法

查找祖先元素查找后代元素向前查找兄弟元素向后查找兄弟元素查找兄弟元素
parent()children()prev()next()siblings()
parents()find()prevAll()nextAll()
parentsUntil()contents()prevUntil()nextUntil()

查找祖先元素

parent()

语法

 $(元素).parent(选择器或省略)

说明

获取元素的父元素。

不带参数时使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            table,
            tr,
            td {
                border: 1px solid red;
            }

            td {
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
            }
        </style>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("td").hover(function() {
                    $(this).parent().css("background-color", "red");
                }, function() {
                    $(this).parent().css("background-color", "white");
                });
            })
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述

带参数时使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			table,
			tr,
			td {
				border: 1px solid red;
			}

			td {
				width: 40px;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}
		</style>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("td").hover(function() {
					$(this).parent(".select").css("background-color", "red");
				}, function() {
					$(this).parent(".select").css("background-color", "white");
				});
			})
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr class="select">
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

parents()

语法

$(元素).parents(选择器或省略)

说明

获取元素的祖先元素，返回一个jQuery对象集合。

带参数使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var parents = $("span").parents();
				var result = [];
				$.each(parents, function() {
					var tagName = this.tagName.toLowerCase();
					result.push(tagName);
				});
				console.log(result.join(",")); //strong,p,div,body,html
			})
		</script>
	</head>
	<body>
		<div>
			<p>
				<strong>
					<span>hello world</span>
				</strong>
			</p>
		</div>
	</body>
</html>

不带参数使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var parents = $("span").parents(".b");
				console.log(parents.get(0).tagName); //p
			})
		</script>
	</head>
	<body>
		<div class="a">
			<p class="b">
				<strong class="c">
					<span class="d">hello world</span>
				</strong>
			</p>
		</div>
	</body>
</html>

parentsUntil()

语法

$(元素).parentsUntil(选择器)

说明

获取指定范围内的祖先元素。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var parents = $("span").parentsUntil(".a");
				var result = [];
				$.each(parents, function() {
					var tagName = this.tagName.toLowerCase();
					result.push(tagName);
				});
				console.log(result); //["strong", "p"]
			})
		</script>
	</head>
	<body>
		<div class="a">
			<p class="b">
				<strong class="c">
					<span class="d">hello world</span>
				</strong>
			</p>
		</div>
	</body>
</html>

查找后代元素

children()

语法

$(元素).children(选择器)

说明

查找符合条件的子元素。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var children = $("#wrap").children(".select");
				children.each(function(index, e) {
					$(this).css("color", "red");
				});
			})
		</script>
	</head>
	<body>
		<div id="wrap">
			<p>子元素</p>
			<p class="select">子元素</p>
			<div>
				<p>孙子元素</p>
				<p class="select">孙子元素</p>
			</div>
			<p>子元素</p>
			<p class="select">子元素</p>
		</div>
	</body>
</html>

在这里插入图片描述

find()

语法

$(元素).find(选择器或省略)

说明

查找符合条件的后代元素。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var children = $("#wrap").find(".select");
				children.each(function(index, e) {
					$(this).css("color", "red");
				});
			})
		</script>
	</head>
	<body>
		<div id="wrap">
			<p>子元素</p>
			<p class="select">子元素</p>
			<div>
				<p>孙子元素</p>
				<p class="select">孙子元素</p>
			</div>
			<p>子元素</p>
			<p class="select">子元素</p>
		</div>
	</body>
</html>

在这里插入图片描述

contents()

在jQuery中，可以使用contents()方法来获取子元素及其内部文本。contents()方法和children()方法相似，不同的是，contents()返回的jQuery对象中不仅包含子元素，还包含文本内容；而children()方法返回的jQuery对象中只会包含子元素，不包含文本内容。

在实际开发中，我们极少会用到contents()方法。

向前查找兄弟元素

prev()

语法

$(元素).prev()

说明

查找前面的相邻的兄弟元素。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#js").prev().css("color", "red");

			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li id="js">JavaScript</li>
			<li>jQuery</li>
			<li>Vue</li>
		</ul>
	</body>
</html>

在这里插入图片描述

prevAll()

语法

$(元素).prevAll(选择器或省略)

说明

查找前面所有的兄弟元素。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#js").prevAll().css("color", "red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li id="js">JavaScript</li>
			<li>jQuery</li>
			<li>Vue</li>
		</ul>
	</body>
</html>

在这里插入图片描述

prevUnitl()

语法

$(元素).prevUntil(选择器)

说明

在jQuery中，prevUntil()方法是对prevAll()方法的一个补充，它可以查找元素前面“指定范围”中所有的兄弟元素，相当于在prevAll()方法返回的集合中截取一部分。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#js").prevUntil("#end").css("color", "red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li id="end">HTML</li>
			<li>CSS</li>
			<li id="js">JavaScript</li>
			<li>jQuery</li>
			<li>Vue</li>
		</ul>
	</body>
</html>

在这里插入图片描述

向后查找兄弟元素

next()

语法

$(元素).next()

说明

查找后面的相邻的兄弟元素。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#js").next().css("color", "red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li id="end">HTML</li>
			<li>CSS</li>
			<li id="js">JavaScript</li>
			<li>jQuery</li>
			<li>Vue</li>
		</ul>
	</body>
</html>

在这里插入图片描述

nextAll()

语法

$(元素).nextAll(选择器或省略)

说明

选择后面所有的兄弟元素。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#js").nextAll().css("color", "red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li id="end">HTML</li>
			<li>CSS</li>
			<li id="js">JavaScript</li>
			<li>jQuery</li>
			<li>Vue</li>
		</ul>
	</body>
</html>

在这里插入图片描述

nextUntil()

语法

$(元素).nextUntil(选择器或省略)

说明

选择后面符合条件的兄弟元素。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#js").nextUntil().css("color", "red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li id="js">JavaScript</li>
			<li>jQuery</li>
			<li>Vue</li>
			<li id="end">React</li>
		</ul>
	</body>
</html>

在这里插入图片描述

查找所有兄弟元素

siblings()

语法

$(元素).siblings(选择器或省略)

说明

查找所有兄弟元素。

选择器使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#js").siblings().css("color", "red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li id="js">JavaScript</li>
			<li>jQuery</li>
			<li>Vue</li>
			<li>React</li>
		</ul>
	</body>
</html>

在这里插入图片描述

无参使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#js").siblings(".select").css("color", "red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li class="select">HTML</li>
			<li>CSS</li>
			<li id="js">JavaScript</li>
			<li>jQuery</li>
			<li class="select">Vue</li>
			<li>React</li>
		</ul>
	</body>
</html>

在这里插入图片描述

xiangxiongfly915
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jQuery实现页面搜索功能
10-21
主要为大家详细介绍了基于jQuery实现页面搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JQuery 方法查询大全
freeking101的博客
02-17 2785
From：https://www.cnblogs.com/zengjie123/p/4893546.html jQuery 参考手册 - 选择器：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 一、核心 $ 是 jquery 类的一个别名，$() 构造一个 jquery 对象，jQuery 的核心功能都是通过这个函数实现的。 jQuery 中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。 1、 $(表..
Jquery查找元素的方法汇总
shuncheng_hu的博客
12-15 1万+
Jquery查找元素的方法汇总 通过具体的class，id,标签查找 $('div') // 所有div元素 $('.item') // class为item的元素 $('#main') // id为main的元素 $('#main span, .item') // id为main内的span 或 class为item的元素 $('*') // 文档中所有元素
jQuery基础——使用过滤器—2查找
weixin_57575133的博客
11-05 1091
查找操作主要是以jQuery对象为基础，查找父级、同级或者下级相关元素，以便实现延伸筛选，增强对文档的控制能力。jQuery查找方法主要包括16种。
【jQuery】jQuery操作之如何查找元素_02
青春木鱼的博客
07-04 1932
本博客是对jQuery中常用的元素查找方法进行了详细的总结和介绍，过万字的梳理，倾情奉献给大家，需要的朋友可以参考下
jQuery查找节点方法完整实例
10-21
主要介绍了jQuery查找节点方法,结合完整实例形式分析了jQuery针对DOM节点属性的相关操作技巧,需要的朋友可以参考下
JQuery查找DOM节点的方法
10-24
主要介绍了JQuery查找DOM节点的方法,实例分析了jQuery选择器实现DOM元素结点与属性结点的查找技巧,需要的朋友可以参考下
jquery查找tr td 示例模拟
10-25
jquery怎么查找tr td，下面模拟了一个table出来，给大家参考
jQuery 查找元素操作实例小结
10-16
主要介绍了jQuery 查找元素操作,结合实例形式总结分析了jQuery针对页面元素的各种常见查找操作实现方法,需要的朋友可以参考下
Jquery实现搜索效果,进阶实战篇
weixin_45957302的博客
11-09 1332
首先,我们实现搜索效果的思路一,使用点击事件调用后台api数据参数实现搜索;(1)这个其实是最简单的,因为调取后台api我们需要填参数,(有的不需要填,需要在后台重新写sql语句);而这个参数的值,就是我们输入文本框的内容,然后点击事件触发这个获取api的函数;二,使用jquery显示隐藏效果实现搜索,把我们要搜索的字段显示,而其他的就隐藏;js:代码 方法一和二都可以实现搜索效果,但是我们实际运用的需要用第一个方法,因为或许api接口数据,不能把全部数据同时展示,也许我们只获取前二十个,然后剩下的用分
jquery页面内容查找
lihaofeifei的博客
03-29 1644
思路： 利用RegExp正则表达式进行匹配； 在搜索框下方显示搜索提示； 对匹配性进行高亮显示； 对多个匹配性进行逐个区别显示； 再次搜索时清除上次匹配结果； 固定搜索框。 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt...
jquery 的一般常用方法
qq_27487739的博客
06-13 983
以上三个例子都通过检查字符串/数组中是否存在指定的字符串，返回一个布尔值来判断它是否存在。元素中查找包含字符串 “some” 的文本，并将找到的所有匹配元素的背景色设置为黄色。在上面的代码中，我们注册了一个表单提交事件处理函数。你也可以在表单提交之前使用该方法去掉用户输入的字符串中的空格。例如，在一个单击事件的处理函数中，你可以使用以下代码获取。在上面的示例代码中，我们首先定义了一个带有左右两边空格的字符串。方法去掉字符串左右两边的空格，并将结果保存在。方法去掉字符串左右两边的空格，并将结果保存在。
jQuery Bootgrid插件
qq_37085954的博客
10-28 478
jQuery Bootgrid插件 Bootgrid是一款基于BootStrap 开发的带有查询，分页功能的列表显示组 bootgrid文档链接：http://www.jquery-bootgrid.com/Examples#data
jQuery（一）jQuery概述、使用方式、原理、查找元素
热门推荐
商务合作 | 共同学习 | 携手共进
09-29 3万+
JavaScript jQuery：jQuery概述、使用、原理、API特点，查找元素。
纯客户端页面关键字搜索高亮jQuery插件（转载）
weixin_34236497的博客
05-13 270
一、效果抢鲜展示 此插件是我今天下午写的，为了直观地看到是个什么东东，先展示效果，您可以狠狠地点击这里：搜索页面文字jQuery插件Demo 下图为Demo页面的两个测试截图 – 测试页面HTML代码取自豆瓣网帮助页面： 下载 您可以狠狠地点击这里：jquery.textSearch-1.0.js 文件较小，功能简单，恕不打包~~ 二、功能简述 从上图也应该看出来了，就是对HTML页面上的文字内...
jQuery常用的元素查找方法总结
qq_38861429的博客
12-29 2027
$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素，返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass") 层叠选择器： $...
un8.22:用jQuery实现增删改查功能。
努力是为了让自己不平庸。。。
08-22 566
做项目的时候，我们难免会用到各种各样的技术，今天我就来和大家分享一下如何用jQuery来实现增删改查。
jQuery查询数据
weixin_44561520的博客
07-08 2306
开发工具与关键技术：SQL Server 2014与jquery 作者：戴怡斌 撰写时间：2019年7月7日 查询语句在jquery里面是非常常见的，qq登录需要，游戏登录也需要，所以查询是非常常见也是非常重要的。 查询语句一般分两种，一种是多表查询，一种单表查询，多表查询从字面上来理解就是两张或者两张以上的表，单表查询也就不难理解，就是查询一张表的数据较单表查询。 查询一条数据或者多...
jquery closest方法
最新发布
03-07
jQuery的closest()方法是用于查找与指定选择器匹配的最近的祖先元素。它从当前元素开始向上遍历DOM树，直到找到匹配选择器的元素为止。closest()方法的语法如下： ```javascript $(selector).closest(filter) ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值