首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery中parents()、parent()和closest()的区别

在jQuery向上遍历DOM树的API中,有parents()、parent()和closest(),这三个方法比较容易混淆,这里介绍一下三者的区别。 1....首先分别介绍下三个方法 parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的...同时,本方法还接受一个字符串选择器,用于从返回的节点集中筛选符合选择器的子元素集。 parent([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的父节点。...closest(selector) 本方法用于向上遍历jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,直到找到符合selector选择器的节点为止。 2....对象; $("b").parent()将返回:由span构造的jQuery对象; $("b").closest("div")将返回:由div构造的jQuery对象。

4.1K1090

JQuery中closest、parent、parents、parentsUntil的区别

定义和用法 parent() 方法返回被选元素的直接父元素。 $(selector).parent(filter) 参数 描述 filter 可选。规定缩小搜索父元素范围的选择器表达式。...表示在哪里停止搜索匹配的祖先元素的选择器表达式、元素、jQuery 对象。 filter 可选。规定缩小搜索介于 selector 与 stop 之间的祖先元素范围的选择器表达式。...规定缩小搜索祖先元素范围的选择器表达式、元素或 jQuery 对象。 context 可选。在其内可以找到匹配元素的 DOM 元素。...区别 parent():返回被选元素的直接父元素,返回包含零个或一个元素的 jQuery 对象 parents(selected):从父元素开始沿 DOM 树向上遍历,并返回匹配所传递的表达式的所有祖先...,返回包含零个、一个或多个元素的 jQuery 对象 parentsUntil(stop, selected):返回两个给定参数之间的所有祖先元素,返回包含零个、一个或多个元素的 jQuery 对象 closest

67621
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    PHP中this,self,parent的区别

    {一}PHP中this,self,parent的区别之一this篇 面向对象编程(OOP,Object OrientedProgramming)现已经成为编程人员的一项基本技能。...PHP中this,self,parent的区别之二self篇 此篇我们就self的用法进行讲解 首先我们要明确一点,self是指向类本身,也就是self是不指向任何已经实例化的对象,一般self使用来指向类中的静态变量...{三}PHP中this,self,parent的区别之三parent篇 此篇我们就parent的用法进行讲解。...首先,我们明确,parent是指向父类的指针,一般我们使用parent来调用父类的构造函数。实例如下: 的一个指针,在实例化的时候来确定指向;self是对类本身的一个引用,一般用来指向类中的静态变量;parent是对父类的引用,一般使用parent来调用父类的构造函数。

    2.3K20

    Jquery基础(七) window.parent与window.openner区别

    一、今天总结一下js中几个对象的区别和用法: 1."window.location.href"、"location.href"是本页面跳转 2."...window.top.location.href"是最外层的页面跳转 二、举例说明: 如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写...现在终于明白了连接的时候target的用法了: _blank:重新打开一个窗口 _parent:父窗口执行重定向 _self:自身页面重定向 _top:第一个父窗口重定向 小结: 1.window.open...综上所述可知:parent.window:父窗口对象 top.window:第一个父窗口的对象 三、重点看看window.parent与window.openner区别 window.parent... 是iframe页面调用父页面对象,当我们想从iframe内嵌的页面中访问外层页面是可以直接利用window.parent获取; 例子如下: A.html <title

    1.4K20

    JavaScript 动画_jquery 动画

    JavaScript—动画 一、动画原理 通过定时器setInterval不断移动盒子位置。...1毫秒移动一个像素 }, 1) 二、简单动画函数封装 注意函数需要传递的2个参数:动画对象和移动的距离。...思路: 让盒子每次移动的距离变小,速度就会慢下来; 核心算法:(目标值 – 现在的位置)/ 10 作为每次移动的距离步长; function animate(obj,target) { clearInterval...将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程叫做回调。 回调函数写的位置:定时器结束位置。...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    2.4K30

    jQuery:详解jQuery中的事件(一)

    一、jQuery中的事件   1、加载DOM:   执行时机:在常规的JavaScript中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法...注意以上两种方法的区别:   window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行,也即在此时JavaScript才可以访问网页中的任何元素;   $(document...要解决这个问题,可以使用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。...jQuery代码如下: $(window).load(function(){ //code... })   等价于JavaScript中的以下代码: window.onload = function...,jQuery中bind方法是可以多次调用的,并且可以简化为将上面的第二个bind去掉。

    1.7K20

    jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。   ...接上篇jQuery:详解jQuery中的事件(一)   3、合成事件   jQuery有两个合成事件——hover()方法和toggle()方法,同ready()方法一样,这些都是jQuery自定义的方法...*这里要注意的一点是,jQuery的hover()方法准确来说是替代jQUery中的bind("mouseenter")和bind("mouseleave"),而不是替代bind("mouseover"...停止事件冒泡:停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡。...5、移除事件:在绑定事件的过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。在此就不举例说明了。

    2.2K30

    抛弃jQuery,拥抱原生JavaScript

    模式变革 jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据/状态为中心的开发模式 应用复杂后,直接操作 DOM 意味着手动维护状态,当状态复杂后...我们在 React 应用实践中也发现,大部分当你想直接操作 DOM 的时候,就意味着你可能做错了。 2....当我们在尝试把现有应用改成同构时,因为代码要运行在服务器端,但服务器端没有 DOM,所以引用 jQuery 就会报错。这也是要移除 jQuery 的迫切原因。...jQuery 由于提供了非常易用的 API,屏蔽了浏览器差异,极大地提高了开发效率。这也导致很多前端只懂 jQuery。...但条件成熟的情况下,移除 jQuery,参照 You Don’t Need jQuery 拥抱原生 JavaScript 能同样保证开发效率,也可以给产品带来更好的性能,同时也能提高开发者水平。

    1.2K80

    jQuery VS JavaScript原生API

    但JS原生API写法依旧;并且有时候只不过小写一个Demo,或者产品中只有少量的前端效果或DOM操作,就去花时间&空间引入jQuery,或者React?不免有取宰牛之刀以杀鸡之嫌。...在jQuery的温柔乡里,是否还能记得原生她javascript原生?如果仅为使用个选择器($)或者类似的东西,是否真的有必要加载jQuery?故此了解下JS常用原生写法还是蛮有必要的。...[update-2015-12-07]有看到抛弃jQuery,拥抱原生JavaScript一文中提到,jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据.../状态为中心的开发模式; React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。...Show me the code.直接看代码;以下是jQuery和JavaScript实现相同操作的等价代码: 选择元素 // jQuery var els = $('.el'); //===

    1.6K60

    JavaScript强化教程——jQuery 核心

    本文作者:IMWeb 王军 原文出处:IMWeb社区 未经同意,禁止转载 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuety 实例...jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。...由于处理程序接受的 this 关键词中的被点击项目是纯的 DOM 元素,因此在对其调用 jQuery 的方法之前,必须用 jQuery 对象包装该元素。...在之前版本的 jQuery 中,这样会返回包含 document节点的集合。...") 或 $(""),jQuery 会通过内生的 JavaScript createElement() 函数来创建元素。 要确保跨平台兼容性,片段的结构必须良好。

    1.1K20

    JavaScript类库---JQuery(二)

    ()、jQuery.getJSON()、$.get() 、 $.post(); load():是一个方法,向它传入一个URL,它会异步加载该URL的内容,然后将内容插入到选中的元素中,去替换已存在的内容...的XMLHttpRequest对象; $.getScript():加载js代码文件;第一个参数是js文件的url(可跨域),可选的第二个参数是回调函数,形如:jQuery.getScript('http...所以必须传入回调函数作为参数,否则没有意义; jQuery.get()与jQuery.post()方法通常都由下面的这个函数实现: $.ajax():  jQuery的所有Ajax工具都会调用此函数,其仅接收一个参数...', //请求的URL data:{}, //发送请求是传递的数据,可以是字符串或对象,放到url中或请求内容体中; beforeSend:function(xhr){}, //指定Ajax请求发送前的回调函数...(xhr,statusCode){}// 请求完成时(调用sucess或error后)激活的回调函数; 只有两个参数,一般不用; }); 7、jQuery中有用的工具函数: 8、jQuery选择器和选取方法

    1.3K10
    领券