您的位置：首页 > Web前端 > JQuery

jquery选择器之层次选择器

2013-11-20 14:11 218 查看

层次选择器中包括：
1、ancestor descendant 使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input.
例：$("bgRed div") 选择css类为bgRed的元素中的搜有<div>元素。
2、parent > child 选择parent的直接子节点chid。child必须包含在parent中并且父类是parent元素。
例：$(".myList>li")选择css类为myList元素中的直接子节点<li>对象。
3、prev + next prev和next是两个同级别的元素。选中在prev元素后面的next元素。
例：$("#hibidcus+img")选在id为hibiscus元素后面的img图像
4、prev ~ siblings 选择prev后面的根据sibilngs过滤的元素（siblings是过滤器）
例：$("#someDiv~[title]")选择id为someDiv的对象后面所有带有title属性的元素

层次选择器网页实例，（参考）：

[html] view
plaincopy

<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="jquery.1.8.0.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 层次选择器 jquery

相关文章推荐

新的分享

章节导航