jQuery 树形结构的选择器

melissahexiu 2010-02-15

DOM结构其实也是一种树形结构，jQuery提供的树形选择器可以用来选择DOM Tree里的节点。这些树形选择器的方法包括：children(), parent(), parents(), next(), prev(), siblings().
选择某个元素的"孩子" - children()

代码如下：

<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#parent").children().length //得到所有的”孩子“(li)的个数，“3” 
$("#parent").children("#son1").text(); //得到第一个”孩子“(li)的值 - “第一列”

选择某个元素的“父母” - parent()

代码如下：

<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#son1").parent().attr("id");//得到ul的ID - "parent"

选择某个元素的“祖先”-parents() (注意：一级一级向上选择直到<html>)

代码如下：

<div id="grand"> 
<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
</div> 
$("#son2").parents().each(function(i){ 
if(i<3) //只显示3代祖先 
alert($(this).html()); 
});

选择某个元素的“弟弟” - next()

代码如下：

<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#son2").next().text(); //选择#son3选择某个元素的“哥哥”

prev()

代码如下：

<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#son2").prev().text(); //选择#son1选择某个元素的“兄弟”

siblings()

代码如下：

<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#son2").siblings().text(); //选择#son1和#son3

: melissahexiu

相关推荐

9.jQuery初识—选择器、效果

书写繁琐，代码量大。动画效果很难实现。使用定时器，要小心各种定时器的清除。各种操作和处理事件不好实现。浏览器的兼容性。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。插件扩展开发，jQuery有着丰富的第三方插件，

83510998 0喜欢 / 0评论 2020-08-08

隐式迭代---ES5的数组方法以及jQuery的方法调用

对于选择器筛选的dom元素，比如$是一个伪数组jq对象，存放的dom元素，当执行addClass方法，对于每个dom元素都执行此方法，在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用如果获取的

tthappyer 0喜欢 / 0评论 2020-07-25

56-58-前端-jQuery

python导入模块发生了哪些事？"""我不想下载jQuery文件能不能使用呢？w.fn.init [p.c1, prevObject: w.fn.init]0: p.c1length: 1prevObject: w.fn.

tztzyzyz 0喜欢 / 0评论 2020-07-05

jquery基本用法

<script src="jquery.js"></script> //jquery.js 导入本地文件路径。var d1 = $; -- 得到jquery对象 -- jQuery.fn.init[div#d1

87281248 0喜欢 / 0评论 2020-07-04

jQuery基础及选择器2

$.css;//同辈元素选择器。$.css;//a标签带有class属性

e度空间 0喜欢 / 0评论 2020-06-28

jQuery方法（1）

　　jq是将原生js中的DOM操作全部封装了，可以增删改查，添加事件、修改内容样式、ajax事件、js动画。　　8.找到某个元素的所有结构父级，直到html为止：$.parents()//找到索引为3的li所有父级。　　　　$.find//找到div标签下

82244951 0喜欢 / 0评论 2020-06-28

jQuery基础及选择器（二）

同辈元素选择器$.css;$.css;//a标签带有class属性。<input name="show" type="button" value="显示隐藏的P元素" id="s

89510194 0喜欢 / 0评论 2020-06-27

jQuery部分选择器示例

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装。它能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率。=test]").css;});});二、通过过滤选择器选择元素1.基本

牵手白首 0喜欢 / 0评论 2020-06-14

jquery根据name属性查找

$ 选择所有的name属性等于‘keleyicom‘的input元素。$ 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以keleyi结尾的元素根据name取值：$.val()根据id取值:. -----jquery添加删除样式

开心就好 0喜欢 / 0评论 2020-06-10

JQuery

JQuery库，里面存在大量的Javascript函数。随便选个，复制<script>标签，放到<head>标签内。选择器就是css的选择器。//jQuery css 中的选择器它全部都能用。//当网页元素加载完毕之后，响应操作

89510194 0喜欢 / 0评论 2020-06-06

jquery基础入门

jQuery的版本分为1.x系列和2.x，3.x系列，1.x系列兼容低版本的游览器，2.x和3.x系列放弃支持低版本游览器，目前使用最多的是1.x系列。// 修改样式只需要在css()中，添加一个对象即可。一般我要设置一个帮了该class属性的css样式，

Web全栈笔记 0喜欢 / 0评论 2020-06-04

jQuery基础

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。它包含以下功能：1、HTML元素选取；2、HTML元素操作；3、CSS操作；4、HTML事件函数；5、JavaScript特效和动画；6、HTML DOM遍历和修改；

tztzyzyz 0喜欢 / 0评论 2020-05-31

jquery奇数、偶数选择器

:even 选择器选取每个带有偶数 index 值的元素。

tztzyzyz 0喜欢 / 0评论 2020-05-30

HTML与jQuery

,history.go历史网页前前一页，history.go对当前页面刷新，history.go(-1)网页后退。基本选择器 $(‘*‘) 所有dom元素 $ $ $ 这里是同时选取多个元素。id是指I选择器的名字，.class是指类选择器的名称，层级选择

开心就好 0喜欢 / 0评论 2020-05-27

前端-jQuery

写起来简单，省事，开发效率高，兼容性好什么是jQuery?jQuery是一个兼容多浏览器的JavaScript库。jQuery介绍　　压缩的：生产环境用　　- 没有压缩的：开发用。w.fn.init[html, head, meta,

牵手白首 0喜欢 / 0评论 2020-05-19

2、jQuery基本使用

<!DOCTYPE html>. width: 50px;height: 100px;background: red;margin-top: 5px;// var $div = $("div:empty");// conso

牵手白首 0喜欢 / 0评论 2020-05-16

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。jQ

donghongbz 0喜欢 / 0评论 2020-05-15

jQuery 语法

通过 jQuery，您可以选取 HTML 元素，并对它们执行"操作"。jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready

tztzyzyz 0喜欢 / 0评论 2020-05-15

JQuery复选框全选效果如何实现

// #tab > tbody > tr:nth-child > td:nth-child > input[type="checkbox"]. <a href="#" rel="

hehekai 0喜欢 / 0评论 2020-05-08

jQuery选择器-->过滤选择器之表单对象的属性过滤器

　　表单对象的属性过滤器通过表单元素的状态属性匹配元素

81463166 0喜欢 / 0评论 2020-05-08

jQuery选择器-->基本选择器之复合选择器

　　复合选择器将多个选择器组合在一起，两个选择器之间用逗号‘，’分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的jQuery对象。

tthappyer 0喜欢 / 0评论 2020-05-07

jQuery选择器-->层次选择器之parent>child选择器

　　parent>child选择器中parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素。使用该选择器只能选择父元素的直接子元素。

80437916 0喜欢 / 0评论 2020-05-07

jQuery选择器-->层次选择器之ancestor descendant选择器

　　ancestor descendant选择器中ancestor代表祖先，descendant代表子孙，用于在给定的祖先元素下匹配所有的后代元素。　　　　　　descendant：是用以匹配元素的选择器，并且它是ancestor所指定元素的后代元素

小仙儿 0喜欢 / 0评论 2020-05-07

JQuery入门+js库文件分享

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功

tthappyer 0喜欢 / 0评论 2020-05-06

JQuery中的选择器

<!--. $("#two").css("background-color","palegreen");});$(".mini").css("backgroun

delmarks 0喜欢 / 0评论 2020-05-06

jQuery快速入门

<1>jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。<2>jQuery是继prototype之后又一个优秀的Javascript框架。<4>jQue

89463661 0喜欢 / 0评论 2020-04-19

jquary(javascript+query)

javascript脚本语言，使用在浏览器中，控制网页中的文档对象和与用户进行交互时。jquery为javascript中的一个类库，集成javascript中常使用的功能，可实现javascript中的大量功能。使用jquery获取标签对象后，利用标

小仙儿 0喜欢 / 0评论 2020-04-17

四、jQuery

　　jQuery是目前使用最广泛的javascript函数库，jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器。　　jquery是一个函数库，一个js文件，页面用script标签引入

80437916 0喜欢 / 0评论 2020-04-16

jQuery - 删除元素：删除已有的 HTML 元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。jQuery remove() 方法删除被选元素及其子元素。jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。

82550495 0喜欢 / 0评论 2020-03-28

jQuery 选择器

$ 类选择器加过滤选择器第一个和最后一个。$ 层级选择加过滤选择器奇偶。$ // 内容过滤选择器，包含text内容的p元素。$ //内容过滤选择器，所有空标签parent 相反

donghongbz 0喜欢 / 0评论 2020-03-05

jQuery基础使用

jQuery 是一个 JavaScript 库，在原生JavaScript上进行了一层封装，极大地简化了 JavaScript 编程。// $.ready()的缩写形式，表示DOM文档加载完毕执行回调，比window.onload先执行。　　和forEac

donghongbz 0喜欢 / 0评论 2020-03-04

jQuery的核心函数

89463661 0喜欢 / 0评论 2020-03-01

zepto快速入门教程

* DOM操作配置对象：jquery不同使用配置对象添加id，class。。。

小仙儿 0喜欢 / 0评论 2020-03-01

python 学习之javascipts中的jQuery

jQuery介绍jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。下载地址:jQuery官方网站: http://jquery.com/<script type="text/javascript&qu

tthappyer 0喜欢 / 0评论 2020-02-24

vue和jquery的对比

今天将vue和之前学的jquery来对比一下。Jquery介绍：jquery是一个快速的，简洁的JavaScript框架，于2006年由John Resig发布，倡导的是写更少的代码，去做更多的事。像我们快速获取文档元素，页面的动态效果和ajax的无刷新页

89463661 0喜欢 / 0评论 2020-02-23

jQuery---基本语法

写起来简单，省事，开发效率高，兼容性好2、什么是jQuery?jQuery是一个兼容多浏览器的JavaScript库3、如何使用jQuery？jQuery就是用JS写的 js是基础，jQuery是工具5、jQuery介绍 - 版本 -

82550495 0喜欢 / 0评论 2020-02-20

jquery:class选择器（父子关系）

<div data-tab-panel-0 class="am-tab-panel am-active">

80437916 0喜欢 / 0评论 2020-02-20

jQuery

<!DOCTYPE html>. <!DOCTYPE html>. alert('点击');});<!DOCTYPE html>. $('#test-ul li[name = python]').text();$('#t

donghongbz 0喜欢 / 0评论 2020-02-19

jQuery 实例

演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。演示 jQuery jQuery click() 事件.演示jQuery hide() 和 show() 方法。另外一个隐藏文本的实例。演示如何在 jQuery animate() 方

牵手白首 0喜欢 / 0评论 2020-02-18

GitHub已完全弃用jQuery，问题是为什么？

最近，我们将 jQuery 完全从 GitHub.com 的前端代码中移除了，这标志着我们数年来逐步移除 jQuery 这个渐进式的过程终于结束了，这对我们来说是一件里程碑式的事件。这篇文章将介绍过去我们是如何依赖上 jQuery 的，随着时间地推移，我们

小仙儿 0喜欢 / 0评论 2020-02-18

jQuery入门基础知识点汇总

jquery 是 js的封装的一个框架快速开发。jquery dom获取的时候注意元素是否初始化.若不考虑是否初始化需要以下加载函数注意：jquery 加载函数类似浏览器的加载完成事件window.onload. dom元素获取方式注意：j

89463661 0喜欢 / 0评论 2020-02-14

jQuery学习-w3cschool-(1)jQuery 教程

使用 Google 的 CDN引入jQuery库：。jQuery 库包含以下特性：。jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。//若将jq库文件放在body底

小仙儿 0喜欢 / 0评论 2020-02-09

jQUery的基本操作总结

什么是jquery？<!DOCTYPE html>. // alert("hello lnj");});// alert("hello lnj");});// alert("hello lnj&

81463166 0喜欢 / 0评论 2020-02-02

JQuery之选择器篇(一)

今天回顾了之前学习的JQuery选择器，现在简单的总结一下。基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能用一次，class允许重复使用。即具有相同样式的标签分

89510194 0喜欢 / 0评论 2020-02-02

jquery和zepto的异同

文件大小比较小只有8k左右 ,是目前功能库中最小的一个，尽管不大，zepto 所提供的工具足以满足开发程序的需要，大多数在jquery中常用的API和方法Zepto 都有，Zepto 和API大部分都能和jquery兼容所以用起来和jquery差不多。

80437916 0喜欢 / 0评论 2020-02-01

jquery

　　jquery是继Prototype之后又一个优秀的JavaScript代码库,Query设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript

89463661 0喜欢 / 0评论 2020-01-31

jQuery对象与DOM对象

DOM文档对象模型，是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。jQuery对象与DOM对象的转换，jQuery选择器返回的对象实则是以对象数组的方式返回的，因此可以使用数组下标进行转换。也可使用jQuery中的ge

86281940 0喜欢 / 0评论 2013-05-13

jQuery选择器

$ 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素。$("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$. $ 选择所有的label元

limengmeng00 0喜欢 / 0评论 2013-06-02

jQuery选择器总结

$ 选择id值等于myElement的元素，$ 选择所有的label元素的下一个input元素节点，$ 选择所有的name属性包含'news'的input元素。$ 返回所有的div中只有唯一一个子节点的所有子节点的数组

83500391 0喜欢 / 0评论 2013-05-31

216 jQuery 文本属性值：html() 、text() 、 val()

jQuery的文本属性值常见操作有三种：html() 、text() 、 val() ，分别对应JS中的 innerHTML 、innerText 和 value 属性。

donghongbz 0喜欢 / 0评论 2020-01-17