【父元素parent】【子元素children】【同胞siblings】【过滤】

1.父元素

$("span").parent()           //定位到span的父元素

$("span").parents()          //定位到span的所有父元素

$("span").parents("ul")          //定位到span的ul父元素

$("span").parentsUntil("div");              //指定span直到div元素的所有父元素,不包含div

2.子元素

$("div").children();                 //指定div的子元素

$("div").children("p.1")           //指定div的子元素中第1个<p>元素

$("div").find("p")                   //指定div的子元素中的<p>元素,可以同时查找多个

$("div").find("*")                   //指定div的所有子元素

3.同胞(兄弟姐妹)

$("span").siblings()                 //指定span的所有同级元素,即span的同胞

$("span").siblings("p")             //指定span的<p>同胞

$("span").next()                     //span的下一个同胞元素

$("span").nextAll()                      //span下面的所有同胞元素

$("span").nextUntil("p")                //span直到p的所有同胞元素,不包含span和p

4.过滤

$("div p").first()                      //选取首个 <div> 元素内部的第一个 <p> 元素,即first对div和p都有效果

$("div p").last()                       //选择最后一个 <div> 元素中的最后一个 <p> 元素

$("p").eq(1);                            //选择索引为1的p元素,即第2个p元素。

$("div").filter(".intro")                 //选择类名 "intro" 的所有 <div> 元素     filter是过滤的意思

$("div").not(".intro")                //返回不带有类名 "intro" 的所有 <p> 元素

时间: 2024-10-05 05:11:39

【父元素parent】【子元素children】【同胞siblings】【过滤】的相关文章

jQuery中兄弟元素、子元素和父元素的获取

我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行获取和操作. jQuery提供的方法 上来就把jQuery提供的方法摆在这里是不是有点不好呀,不过,我们从jQuery的方法名称上就能知道这些方法是干嘛的了. parent(selector) 查找父元素,可传入selector进行过滤(下同) parents(selector) 查找所有的祖先节点

jQuery获取所有父级元素及同级元素及子元素的方法

1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id").closest() 获取其最近的祖先元素,依次上溯 2.获取同级元素 $("#id").next(selector) 获得匹配元素紧邻的下一个同胞元素.如果提供选择器,则取回匹配该选择器的下一个同胞元素. $("#id").nextAll(selector) 获

jquery选择器如何获取父级元素、同级元素、子元素

一.新建页面 1 <ul> 2 <li>list item 1</li> 3 <li>list item 2</li> 4 <li class="third-item">list item 3</li> 5 <li>list item 4</li> 6 <li>list item 5</li> 7 </ul> 8 9 <p>Hell

jquery选择器 之 获取父级元素、同级元素、子元素

一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 href_fir href_sec href_thr href_fiv $(document).ready(function(){ $("a").parent().addClass('a_par'); }); firebug查看jquery parent效果 二.获取同级元素: 1.next([expr]): 获取指定元素的下一个同级元素(注意是下一个同级元素哦) list item 1 list it

jquery选择器:获取父级元素、同级元素、子元素

jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获取父级元素.同级元素.子元素的方法. 一.获取父级元素1.parent()获取指定元素的父级元素,注意:是最靠近指定元素的父级元素. 2.parents()获取指定元素的所有父级元素,注意:是所有的父级元素,包括body,html 二.获取同级元素1.next()获取指定元素的下一个同级元素(注意:

jquery选择器 之 获取父级元素、同级元素、子元素(转)

一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="href_fir" href="#">href_fir</a><a id="href_sec" href="#">href_sec</a><a id="href_thr" href=&quo

jquery查找父元素、子元素(个人经验总结)

使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents() parent() 向下查找子元素 用到的方法:find() children() js用的是 children[] 属性 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt

jQuery选择器--&gt;当前元素的父元素的兄弟元素的子元素

<script> // jQuery 加载函数 $(function () { // 设置文本框的readonly属性 $(":text").attr("readonly","readonly"); // 点击事件 $(":text").click(function () { // 获取当前元素的父元素的指针 也就是 爸爸在他们的兄弟中排行老几 var i = $(this).parent().index(); /

关于父元素,子元素,同级元素的DOM操作技巧

复杂,沉重的web应用在现在是常态,想jquery这样的易于使用的库,跨浏览器的兼容性,各种各样的功能,在操作HTML上非常有帮助.所以难怪很多开发者选择使用这样的库,而不是过去有很多问题原生的DOM API.虽然浏览器的差异仍然是一个问题,今天的DOM是比5年或6年前jQuery刚开始流行时更好. 在这篇文章中,我将讨论和展示一些不同的DOM的功能,可以用来操纵HTML,主要聚焦在父元素,子元素和同级节点的关系上. 在最后还是介绍到浏览器的支持兼容情况.但是有一点需要注意的是像jquery这样

css设置时父元素随子元素margin值移动

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div class="box1"> <div class="box2"> <div class="content"> <div class="margin">123</div> &l