当前位置:首页 > 电脑知识 > 正文内容

居然可以这样(js closest方法)什么是closest方法,jquery中 closest() 方法的详解和使用,jquery中 closest() 方法的详解和使用,

sauo3年前 (2022-09-17)电脑知识143

写在一个JS动态效果的时候,发现了一个在JQuery中从来没有见过的 closest() 方法,看了一下介绍和使用方法,发现非常的好用。下面的博文,飞鸟慕鱼博客就来详细的说一下。

jQuery closest() 方法

closest():从当前元素开始向上,遍历所有的祖先元素,直达文档的html元素标签。

语法:

JavaScript
$(selector).closest(filter)复制

参数:

filter:必填,搜索祖先元素范围的选择器表达式、元素或 jQuery 对象。

context:选填,在其内可以找到匹配元素的 DOM 元素。

jQuery closest() 方法的使用

示例1:

Markup
<ul> <li><span id="mochu">sdfsdf</span></li> </ul> <script> $(#mochu).closest(ul).css(color,red); </script>复制

示例2:

Markup
<div class="divs"> <ul> <li><span id="mochu">feiniaomy.com</span></li> <li><span>我会变成红色</span></li> <li><span>飞鸟慕鱼博客</span></li> </ul> </div> <script> $(#mochu).closest(.divs).css(color,red); </script>复制

示例3:

Markup
<div class="divs"> <ul> <li><span id="mochu">feiniaomy.com</span></li> <li><span>我会变成红色</span></li> <li><span>飞鸟慕鱼博客</span></li> </ul> </div> <script> $(#mochu).closest(ul).find(li).eq(1).css(color,red); </script>复制

本文链接:http://blog.sauo.top/?id=300 感谢分享!

分享到:

扫描二维码推送至手机访问。

版权声明:本文由冬眠先生个人博客发布,如需转载请注明出处。

本文链接:http://blog.sauo.top/?id=300

分享给朋友:

“居然可以这样(js closest方法)什么是closest方法,jquery中 closest() 方法的详解和使用,jquery中 closest() 方法的详解和使用,” 的相关文章

万万没想到(Ubuntu安装ssh服务)ubuntu配置ssh服务器,ubuntu安装ssh服务器的方法,ubuntu安装ssh服务器的方法,

万万没想到(Ubuntu安装ssh服务)ubuntu配置ssh服务器,ubuntu安装ssh服务器的方法,ubuntu安装ssh服务器的方法,

免费领取腾讯云服务器! 安装了一个ubuntu系统,想着在内网中用ssh进行远程连接管理。下面这篇博文就说说如果在ubuntu系统中安装ssh远程管理服务。 ubuntu 安装ssh服务器的方法 1、安装 openssh-s...

这都可以?(常用正则表达式大全)常用正则表达式大全图片,常用正则表达式大全,常用正则表达式大全,

免费领取腾讯云服务器! 网上收集了一些常用的正则表达式,基本上都全,需要的可以拿去了。 关于号码的正则表达式 QQ号正则表达式 BASIC /^[1-9][0-9]{...

燃爆了(jquery给元素添加点击事件)jquery怎么触发点击事件,jquery实现点击某元素外触发事件的方法,jquery实现点击某元素外触发事件的方法,

燃爆了(jquery给元素添加点击事件)jquery怎么触发点击事件,jquery实现点击某元素外触发事件的方法,jquery实现点击某元素外触发事件的方法,

免费领取腾讯云服务器! 写了一个jq指定元素排除某个事件触发的效果,正好用上了上一篇博文中所说的 closest 方法,那么下面就来详细的说一下。 jq实现点击某元素外触发事件的方法 排除某元素触发事件,无非是整个文档中,点...

居然可以这样(css画爱心)爱心图形创意,CSS实现爱心形状动态加载条的方法,CSS实现爱心形状动态加载条的方法,

居然可以这样(css画爱心)爱心图形创意,CSS实现爱心形状动态加载条的方法,CSS实现爱心形状动态加载条的方法,

免费领取腾讯云服务器! 下面记录一个利用纯CSS样式代码实现一个爱心形状的动态加载条,用到了CSS中的动画效果与伪元素样式,有一定的参考价值。感兴趣的小伙伴,不妨测试一下。 纯CSS实现心形加载动画效果 1、动画效果...

越早知道越好(html打字机效果)css打字机效果逐行打印,CSS实现打字机效果的方法,CSS实现打字机效果的方法,

越早知道越好(html打字机效果)css打字机效果逐行打印,CSS实现打字机效果的方法,CSS实现打字机效果的方法,

免费领取腾讯云服务器! 发现一个有趣的东西,就是使用纯CSS代码实现打字机的效果。所谓的打字机效果就是控制一个字符串字符,并且字符串中的每个一个字符一个接着一个的出现。 纯CSS实现文字的打印机效果,要用到 animation 动画元素,下...

一看就会(js判断有没有滚动条)js判断div是否有滚动条,js判断元素是否有滚动条的方法,js判断元素是否有滚动条的方法,

免费领取腾讯云服务器! 前端网页的有事动态事件中,需要我们判断某些DIV元素是否有滚动条,下面就详细的介绍一下。 js 判断是否有滚动条的方法 js 判断页面或DIV是否滚动条,其解决思路非常的简单,首先使用js控制元素先滚...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。