首页 > 资讯 > 精选 >jquery查找方法怎么使用

196

分享到

jquery查找方法怎么使用

2023-07-05 00:07:08 196人浏览八月长安

摘要

本文小编为大家详细介绍“Jquery查找方法怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“jquery查找方法怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。查找方法有：1、parent()，可查

本文小编为大家详细介绍“Jquery查找方法怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“jquery查找方法怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

查找方法有：1、parent()，可查找当前元素的父元素；2、parents()，可查找当前元素的祖先元素；3、children()，可查找当前元素的子元素；4、find()，可查找当前元素的后代元素；5、contents()；6、siblings()；7、next()；8、nextAll()；9、nextUntil()；10、prev()；11、prevUntil()等等。

为了更灵活地操作元素，除了选择器之外，jQuery还为我们提供了以“方法”形式存在的两种方式：一种是“过滤方法”；另外一种是“查找方法”。过滤方法和查找方法，其实就是对jQuery选择器的一种补充。

过滤方法，指的是对所选元素进一步地筛选。查找方法，主要是以当前所选元素为基点，找到这个元素的父元素、子元素或兄弟元素。

在jQuery中，对于查找方法，我们可以分为以下3种情况。

查找祖先元素
查找后代元素
查找兄弟元素

jQuery查找祖先元素

在jQuery中，如果想要查找当前元素的祖先元素（父元素、爷元素等），我们有以下3种方法。

（1）parent()
（2）parents()
（3）parentsUntil()

1、parent()

在jQuery中，我们可以使用parent()方法来查找当前元素的“父元素”。注意，元素只有一个父元素。

语法：

$.parent(selector)

说明：

selector是一个可选参数，它是一个选择器，用来查找符合条件的父元素。当参数省略，表示父元素不需要满足任何条件；当参数不省略时，表示父元素需要满足条件。

举例：不带参数的parent()

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title></title>    <style type="text/CSS">        table, tr, td{border:1px solid silver;}        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", "silver");            }, function () {                $(this).parent().css("background-color", "white");            })        })    </script></head><body>    <table>        <tr>            <td>2</td>            <td>4</td>            <td>8</td>        </tr>        <tr>            <td>16</td>            <td>32</td>            <td>64</td>        </tr>        <tr>            <td>128</td>            <td>256</td>            <td>512</td>        </tr>    </table></body></html>

默认情况下，预览效果如下图所示。

jquery查找方法怎么使用

当鼠标移到某一个单元格上面时，此时预览效果如下图所示。

jquery查找方法怎么使用

分析：

$(this).parent()表示选取当前td元素的父元素（tr），但是爷元素（table）不会被选中。

举例：带参数的parent()

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title></title>    <style type="text/css">        table, tr, td{border:1px solid silver;}        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", "silver")            }, function () {                $(this).parent(".select").css("background-color", "white")            })        })    </script></head><body>    <table>        <tr>            <td>2</td>            <td>4</td>            <td>8</td>        </tr>        <tr class="select">            <td>16</td>            <td>32</td>            <td>64</td>        </tr>        <tr>            <td>128</td>            <td>256</td>            <td>512</td>        </tr>    </table></body></html>

默认情况下，预览效果如下图所示。

jquery查找方法怎么使用

当鼠标移到class="select"的td元素上时，此时预览效果如下图所示。

jquery查找方法怎么使用

分析：

$(this).parent(".select")表示选取当前td元素的父元素（tr），并且父元素必须含有类名“select”。

2、parents()

在jQuery中，我们可以使用parents()方法来查找当前元素的“祖先元素”。注意，元素可以有多个祖先元素

parent()和parents()这两个方法很好区分。其中，parent()是单数，因此查找的元素只有一个，那就是父元素。parents()是复数，因此查找的元素有多个，那就是所有的祖先元素（包括父元素、爷元素等）。

语法：

$().parents(selector)

说明：

selector是一个可选参数，它是一个选择器，用来查找符合条件的祖先元素。当参数省略，表示祖先元素不需要满足任何条件；当参数不省略时，表示祖先元素需要满足条件。

举例：查找所有祖先元素

<!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 item = this.tagName.toLowerCase();                result.push(item);            });            console.log(result.join(","));        })    </script></head><body>    <div>        <p>            <strong>                <span>绿叶学习网</span>            </strong>        </p>    </div></body></html>

控制台输出结果如下图所示。

jquery查找方法怎么使用

分析：

("span").parents()返回的是一个jQuery对象集合，在这个例子中，我们使用.each()来遍历span元素的所有祖先元素。对于.each()方法，我们在后续章节会详细介绍。有些小伙伴们就会问了：“获取元素的标签名，不是应该使用(this).tagName吗？为什么这里使用的是this.tagName呢？”

$(this)是jQuery对象，它调用的是jQuery的方法或属性，例如click()、keyup()等。this是DOM对象，它调用的是DOM对象的方法或属性，例如this.id、this.value等。由于tagName属性是属于DOM对象的，所以我们这里使用的是this.tagName。

3、parentsUntil()

在jQuery中，parentsUntil()方法是parents()方法的一个补充，它可以查找“指定范围”的所有祖先元素，相当于在parents()方法返回的集合中截取一部分。

语法：

$().parentsUntil(selecotr)

说明：

selector是一个可选参数，它是一个选择器，用来选择符合条件的祖先元素。

举例：

<!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("div");            var result = [];            $.each(parents, function(){                var item = this.tagName.toLowerCase();                result.push(item);            });            console.log(result.join(","));        })    </script></head><body>    <div>        <p>            <strong>                <span>绿叶学习网</span>            </strong>        </p>    </div></body></html>

控制台输出结果如下图所示。

jquery查找方法怎么使用

分析：

在实际开发中，我们一般只会用到parent()方法和parents()这两个，极少用到parentsUntil()。因此对于parentsUntil()方法，我们了解一下就行。

jQuery查找后代元素

在jQuery中，如果想要查找当前元素的后代元素（子元素、孙元素等），我们有以下3种方法：

（1）children()
（2）find()
（3）contents()

1、children()

在jQuery中，我们可以使用children()方法来查找当前元素的“子元素”。注意，children()方法只能查找子元素，不能查找其他后代元素。

语法：

$().children(selector)

说明：

selector是一个可选参数，它是一个选择器，用来查找符合条件的子元素。当参数省略，表示选择所有子元素；当参数不省略时，表示选择符合条件的子元素。

举例：

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title></title>    <style lang="">        p{margin:6px 0;}    </style>    <script src="js/jquery-1.12.4.min.js"></script>    <script>        $(function(){            $("#wrapper").hover(function(){                $(this).children(".select").css("color", "red");            },function(){                $(this).children(".select").css("color", "black");            })        })    </script></head><body>    <div id="wrapper">        <p>子元素</p>        <p>子元素</p>        <div>            <p>孙元素</p>            <p>孙元素</p>        </div>        <p>子元素</p>        <p>子元素</p>    </div></body></html>

默认情况下，预览效果如下图所示。

jquery查找方法怎么使用

当鼠标移到id="wrapper"的div元素上面，此时预览效果如下图所示。

jquery查找方法怎么使用

分析：

$(this).children(".select")表示获取当前元素下的class="select"的子元素。我们可以发现，class="select"的孙元素却不会被选中。

2、find()

在jQuery中，我们可以使用find()方法来查找当前元素的“后代元素”。注意，find()方法不仅能查找子元素，还能查找其他后代元素。

语法：

$().find(selector)

说明：

selector是一个可选参数，它是一个选择器，用来查找符合条件的后代元素。当参数省略，表示选择所有后代元素；当参数不省略时，表示选择符合条件的后代元素。

举例：

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title></title>    <style lang="">        p{margin:6px 0;}    </style>    <script src="js/jquery-1.12.4.min.js"></script>    <script>        $(function(){            $("#wrapper").hover(function(){                $(this).find(".select").css("color", "red");            },function(){                $(this).find(".select").css("color", "black");            })        })    </script></head><body>    <div id="wrapper">        <p>子元素</p>        <p>子元素</p>        <div>            <p>孙元素</p>            <p>孙元素</p>        </div>        <p>子元素</p>        <p>子元素</p>    </div></body></html>

默认情况下，预览效果如下图所示。

jquery查找方法怎么使用

当鼠标移到id="wrapper"的div元素上面，此时预览效果如下图所示。

jquery查找方法怎么使用

分析：

$(this).find(".select")表示不仅会选取当前元素下的class="select"的子元素，还会选取class="select"的孙元素。

3、contents()

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

在实际开发中，我们极少会用到contents()方法，因此小伙伴们不需要深入了解，这里简单认识一下即可。

jQuery查找兄弟元素

兄弟元素，指的是该元素在同一个父元素下的同级元素。

在jquery中，查询同级元素一般有七个方法：siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()

siblings()方法，主要用于获得指定元素的同级所有元素
next()方法，主要用于获得指定元素的下一个同级元素
nextAll()方法，主要用于获得指定元素的下一个同级的所有元素
nextUntil()方法，主要用于获得指定元素的下一个同级元素，这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素
prev()方法，主要用于获得指定元素的上一级同级元素
prevAll()方法，主要用于获得指定元素上一级所有的同级元素
prevUntil()方法，主要用于获得指定元素的上一个同级元素，这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素

siblings()方法

<!DOCTYPE html><html><head><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script></head><body><div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p><script>$("p").siblings(".selected").css("background", "yellow");</script></body></html>

jquery查找方法怎么使用

next()方法

<!DOCTYPE html><html><head><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script></head><body><ul><li>list item 1</li><li>list item 2</li><li class="third-item">list item 3</li><li>list item 4</li><li>list item 5</li></ul><script>$('li.third-item').next().css('background-color', 'red');</script></body></html>

jquery查找方法怎么使用

nextAll()方法

<!DOCTYPE html><html><head><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script></head><body><ul><li>list item 1</li><li>list item 2</li><li class="third-item">list item 3</li><li>list item 4</li><li>list item 5</li></ul><script>$('li.third-item').nextAll().css('background-color', 'red');</script></body></html>

jquery查找方法怎么使用

nextUntil()方法

<!DOCTYPE html><html><head><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><style>.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script>$(document).ready(function() {$("li.start").nextUntil("li.stop").css({"color": "red","border": "2px solid red"});});</script></head><body><div style="width:500px;" class="siblings"><ul>ul (父节点)<li>li (兄弟节点)</li><li>li (兄弟节点)</li><li class="start">li (类名为"start"的兄弟节点)</li><li>li (类名为"start"的li节点的下一个兄弟节点)</li><li>li (类名为"start"的li节点的下一个兄弟节点)</li><li>li (类名为"start"的li节点的下一个兄弟节点)</li><li class="stop">li (类名为"stop"的兄弟节点)</li></ul></div><p>在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。</p></body></html>

jquery查找方法怎么使用

prev()方法

<!DOCTYPE html><html><head><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><style>.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script>$(document).ready(function() {$("li.start").prev().css({"color": "red","border": "2px solid red"});});</script></head><body><div style="width:500px;" class="siblings"><ul>ul (父节点)<li>li (兄弟节点)</li><li>li (类名为"start"的li节点的上一个兄弟节点)</li><li class="start">li (类名为"start"的li节点)</li><li>li (兄弟节点)</li><li>li (兄弟节点)</li></ul></div></body></html>

jquery查找方法怎么使用

prevAll()方法

<!DOCTYPE html><html><head><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><style>.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script>$(document).ready(function() {$("li.start").prevAll().css({"color": "red","border": "2px solid red"});});</script></head><body><div style="width:500px;" class="siblings"><ul>ul (parent)<li>li (类名为"start"的li的上一个兄弟节点)</li><li>li (类名为"start"的li的上一个兄弟节点)</li><li>li (类名为"start"的li的上一个兄弟节点)</li><li class="start">li (类名为"start"的li节点)</li><li>li (兄弟节点)</li><li>li (兄弟节点)</li></ul></div><p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p></body></html>

jquery查找方法怎么使用

prevUntil()方法

<!DOCTYPE html><html><head><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><style>.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script>$(document).ready(function() {$("li.start").prevUntil("li.stop").css({"color": "red","border": "2px solid red"});});</script></head><body><div style="width:500px;" class="siblings"><ul>ul (父节点)<li class="stop">li (类名为"stop"的兄弟节点)</li><li>li (类名为"start"的li节点的上一个兄弟节点)</li><li>li (类名为"start"的li节点的上一个兄弟节点)</li><li>li (类名为"start"的li节点的上一个兄弟节点)</li><li class="start">li (类名为"start"的li节点)</li><li>li (兄弟节点)</li><li>li (兄弟节点)</li></ul></div><p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。</p></body></html>

jquery查找方法怎么使用

读到这里，这篇“jquery查找方法怎么使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网精选频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jquery查找方法怎么使用

本文链接: https://www.lsjlt.com/news/348775.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

jquery查找方法怎么使用

本文小编为大家详细介绍“jquery查找方法怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“jquery查找方法怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。查找方法有：1、parent()，可查...

99+

2023-07-05
jQuery中的关系查找方法

目录一、jQuery关系查找方法二、jQuery其他关系查找方法一、jQuery关系查找方法 $(this):在原生的DOM操作中,事件函数内部都有一个this关键字指向的就是触发事...

99+

2024-04-02
Golang排序和查找方法怎么使用

本文小编为大家详细介绍“Golang排序和查找方法怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“Golang排序和查找方法怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。排序的介绍排序是将一组数据...

99+

2023-07-04
jQuery查找dom的方法有哪些

这篇文章给大家分享的是有关jQuery查找dom的方法有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。首先我们要用到的是console.time()和console.time...

99+

2024-04-02
jquery怎么查找元素

使用jquery查找指定元素的方法：1.新建html项目，引入jquery；2.创建html测试标签，设置id属性；3.添加button按钮，绑定onclick点击事件；4.通过id属性查找指定元素；具体步骤如下：首先，新建一个html项目...

99+

2024-04-02
jQuery中的关系查找方法是什么

这篇文章主要介绍了jQuery中的关系查找方法是什么，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。一、jQuery关系查找方法$(this):在原生的DOM操作中,事件函数内...

99+

2023-06-29
jquery toggle方法怎么使用

jQuery的toggle()方法可以用于切换元素的可见性。它根据元素的当前状态决定是显示还是隐藏元素。使用toggle()方法的语...

99+

2023-09-20

jquery
jQuery keypress()方法怎么使用

jQuery的keypress()方法用于在元素上触发键盘按下事件。它绑定一个事件处理程序来处理按键事件。以下是keypress()...

99+

2023-10-12

jQuery
jquery isEmptyObject()方法怎么使用

这篇文章主要介绍“jquery isEmptyObject()方法怎么使用”，在日常操作中，相信很多人在jquery isEmptyObject()方法怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”j...

99+

2023-07-04
jquery include方法怎么使用

本篇内容介绍了“jquery include方法怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！什么是jQuery include方法...

99+

2023-07-05
jQuery ajax()方法怎么使用

jQuery的ajax()方法用于向服务器发送HTTP请求。它可以接收一个对象作为参数，该对象用于指定请求的方法、URL、数据、成功...

99+

2023-10-12

jQuery
jQuery mouseout()方法怎么使用

jQuery的mouseout()方法用于在鼠标指针移出元素时触发指定的事件。使用方法如下：```javascript$(selec...

99+

2023-10-12

jQuery
python二分法查找怎么使用

这篇文章主要讲解了“python二分法查找怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“python二分法查找怎么使用”吧！对于要搜索的元素越多，二分查找速度比简单查找快的更多这是...

99+

2023-06-25
php插值查找的使用方法

这篇文章给大家分享的是有关php插值查找的使用方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。PHP开发环境搭建工具有哪些一、phpStudy，是一个新手入门最常用的开发环境。二、WampServer，Wamp...

99+

2023-06-14
python通配符查找方法怎么用

Python中通配符查找方法可以使用fnmatch模块的fnmatch函数。该函数用于测试文件名是否与指定的模式匹配，支持通配符*和...

99+

2024-04-02
jquery遍历方法怎么使用

这篇文章主要介绍“jquery遍历方法怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“jquery遍历方法怎么使用”文章能帮助大家解决问题。遍历方法有：1、add()，用于把元素添加到匹配元素...

99+

2023-07-05
jquery的toggle()方法怎么使用

本篇内容主要讲解“jquery的toggle()方法怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery的toggle()方法怎么使用”吧!toggle()方法可用于切换被选元素的...

99+

2023-07-05
jquery的find方法怎么使用

jQuery的`find`方法用于查找匹配选择器的后代元素。它可以与其他选择器方法（如`$`和`children`）一起使用，以便在...

99+

2023-09-01

jquery
jQuery的serializeArray()方法怎么使用

jQuery的serializeArray()方法用于序列化表单元素为一个对象数组。使用方法如下：1. 选择要序列化的表单元素，例如...

99+

2023-09-05

jQuery
jQuery的children()方法怎么使用

jQuery的children()方法用于获取匹配元素的所有直接子元素。使用方法如下：```$(selector).children...

99+

2023-09-05

jQuery