今日说之是层次选择器,那层次选择器有哇几独?

$("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网站的

<!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网站

相关文章

网站地图xml地图