码迷,mamicode.com
首页 > Web开发 > 详细

jquery中4种层级选择器的差别和使用

时间:2015-01-26 17:17:02      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:层级选择器

我使用的是JQuery-2.1.1版本,在这个版本以及之前,JQuery中的层级选择器有4种。我们通过这4种选择器,来操作下面的HTML。

<div id="outer">
	<input type="button" id="button1">
	<input type="button" id="button2">
	<input type="button" id="button3">
	<div id="inner">
		<input type="button" id="button4">
		<input type="button" id="button5">
	</div>
</div>
<input type="button" id="button6">
<input type="button" id="button7">


1、$("ancestor descendant"),选中祖先ancestor下的所有满足条件的后代descendant。

     如$("#outer input")会选中button1,button2,button3,button4,button5。

2、$("parent > child"),只会选中直接子元素。

     如$("#outer > input")会选中button1,button2,button3,不会选中button4,button5。

3、$("prev + next"),prev和next是两个同级别的元素,选中紧跟在prev后面的next。

    如$("#outer + input")只会选中button6,$("#button1 + input")只会选中button2。

4、$("prev ~ siblings"),prev和siblings是同级别元素,选中prev之后的所有同级别的siblings

    如$("#outer ~ input")选中button6button7,$("#button1 ~input")选中button2button3。

 

jquery中4种层级选择器的差别和使用

标签:层级选择器

原文地址:http://blog.csdn.net/aitangyong/article/details/43151609

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!