jQuery学习——入门jQuery选择器之层次选择器

今天说的是层次选择器，那层次选择器有哪几个？

$("ancestor descendant")：选取parent元素后所有的child元素
$("parent > child")：选取parent元素后所有的直属child元素，何谓“直属”，也就是第一级的意思了
$("prev + next")：prev和next是两个同级别的元素. 选中在prev元素后面的next元素
$("prev ~ siblings"):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器

这里要说下，由于最后2个用的比较少，一般会用其他选择器替代，请看下面：

?

$("prev + next")等价于next()

$("prev ~ siblings")等价于nextAll()

具体用法会在后面说到。

===========================================================================

下面我们来仔细说说这4个层次选择器

【1】$("ancestor descendant")：选取parent元素后所有的child元素

ancestor的中文意思是“祖先”，descendant的中文意思是“后代”，就像css定义层级元素方式一样,只需要不同的元素之间有空格表示，前者父级，后者子级，以此类推，同时我们把它写成这样的形式，$("Element1 Element2 Element3 Element...")。

下面是实例：

$("body div") 选取body元素下所有的div元素。
$("ul li") 选取ul元素下所有的li元素。
$("#test div") 选取id为“test”的元素所包含的所有的div子元素
$("div#test div") 选取id为“test”的div所包含的所有的div子元素
$(".test div") 选取class为“test”的元素所包含的所有的div子元素
$("div.test span") 选取class为“test”的div所包含的所有的span子元素
$("span.test .demo") 选取class为“test”的span所包含的所有的class为demo的元素
$(".test .demo") 选取class为“test”的元素所包含的所有的class为demo的元素

【2】$("parent > child")：选取parent元素后所有的直属child元素，何谓“直属”，也就是第一级的意思了

$("body > div") 选取body元素下所有的第一级div元素。
$("ul > li") 选取ul元素下所有的第一级li元素。
$("#test > div") 选取id为“test”的元素所包含的所有的第一级div子元素
$("div#test > div") 选取id为“test”的div所包含的所有的第一级div子元素
$(".test > div") 选取class为“test”的元素所包含的所有的第一级div子元素
$("div.test > span") 选取class为“test”的div所包含的所有的第一级span子元素
$("span.test > .demo") 选取class为“test”的span所包含的所有的第一级class为demo的元素
$(".test > .demo") 选取class为“test”的元素所包含的所有的第一级class为demo的元素

【3】$("prev + next")：prev和next是两个同级别的元素. 选中在prev元素后面的next元素.

（1）$("div + p")表示选择紧跟在 div 元素后的 p 一个元素

（2）$("#demo+img")选择id为demo元素后面的img对象.如果id为demo元素后面没有同级的img对象，那么这个$("#demo+img").length=0

【4】$("prev ~ siblings"):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器。

（1）$("div ~ p")表示匹配跟在 div 元素后的所有 p 元素

（2）$("#demo~[title]")选择id为demo的元素后面所有带有title属性的元素，同样如果id为demo的元素后面没有一个带有title属性的元素，那么$("#demo~[title]").length = 0

===========================================================================

这里说的是最后2个选择器的等价关系

$(".one + div")等价于$(".one").next("div")

$("#prev ~ div")等价于$(".prev").nextAll("div")

===========================================================================

这里是实例，参考w3cfuns网站的

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>实例</title>

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript"> 

$(function(){      

    $("#bt1").click(function(){

        $("div > p").text("我们都是div中的儿子，我们的名字叫做p还记得教程中的$(\"父亲 > 儿子 > ...\")这种关系吗？就是以这种方式选择的我$(\"div > p\")");

    })

    $("#bt2").click(function(){

        $("div + p").text("我是紧跟着div的p既然紧跟着，当然就得使用“+”紧密的连在一起嘛。以这种方式选择的我$(\"div + p\")");

    })

    $("#bt3").click(function(){

        $("div ~ p").text("我们是div的跟随者，我们的名字叫做p要以这种方式选择的我$(\"div ~ p\")");

    })

})

</script>

</head>

<body>

<input id="bt1" type="button" value="获取div下所有的p标签"/>

<input id="bt2" type="button" value="匹配紧跟在 div 元素后的 p 一个元素"/>

<input id="bt3" type="button" value="匹配跟在 div 元素后的所有 p 元素"/>

<div>

    <p>1</p>

    <p>2</p>

    <p>3</p>

    <p>4</p>

</div>

<p>5</p>

<p>6</p>

<p>7</p>

<p>8</p>

</body>

</html>

========================================================================

ps.全文参考梦三秋和w3cfuns网站

时间： 2024-10-12 09:08:48

jQuery学习——入门jQuery选择器之层次选择器的相关文章

jQuery学习笔记——jQuery常规选择器

一．简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red

jQuery学习笔记——jQuery基础核心

代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’);//进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’);//执行功能函数由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQ

CSS3 选择器之基本选择器

CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选择器主要是用来确定html的树形结构中的DOM元素节点. CSS3的常用选择器有: 下面举几个例子来说明选择器的实用方法: 1.创建如下的DOM结构: <div class="demo"> <ul class="clearfix"> <li

jquery选择器之层级选择器

<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css&q

jQuery选择器之全选择器(*选择器)

在css中,经常会在第一行写下这样一段样式: * { margin: 0; padding:0; } 通配符*意味着给所有的元素设置默认的边距.jQuery中我们也可以通过传递*选择器来选中文档页面中的元素. 描述: $('*') 抛开jQuery,如果要获取文档中所有的元素,通过document.getElementsByTagName()中传递'*'同样可以获取到. 不难发现,id,class,tag都可以通过原生的方法获取到对应的节点,但是我们还是要考虑到一个兼容性的问题,我们这里顺便提一

jQuery学习之路（1）-选择器

▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优

jquery学习入门到高级（转载博客园）

原文地址:http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开

jQuery学习笔记（二）使用选择器一

jQuery选择器是jQuery框架的基础,jQuery对事件的处理.DOM操作.CSS动态控制.Ajax通信.动画设计都是在选择器基础上进行的 注意,在jQuery中通过各种选择器和方法获取的结果集合实际上都是一个jQuery对象 基本选择器 说明 返回值 #id 根据给定的ID匹配一个元素,如果选择器中包含特殊字符,可以用两个斜杠转义 单个元素 element 根据指定的元素类型名称选择该类型所有元素 同类型集合元素 .class 根据指定的类名选择所有同类元素 集合元素 * 在所限定的范围

jQuery学习笔记（三）使用选择器二

简单的伪类选择器也被称为定位过滤器,因为它们主要根据编号和排位筛选特定位置上的元素,或者过滤掉特定元素 简单的伪类选择器 说明 :first 匹配找到的第一个元素 :last 匹配找到的最后一个元素 :not 去除所有与给定选择器匹配的元素 :even 匹配所有索引值为偶数的元素,从0开始计数 :odd 匹配所有索引值为奇数的元素,从0开始计数 :eq 匹配一个给定索引值的元素,从0开始计数 :gt 匹配所有大于给定索引值的元素,从0开始计数 :lt 匹配所有小于给定索引值的元素,从0开始计数