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

jQuery中的选择器

2016-04-18 16:16 519 查看
<div class="box">
<div class="box1"></div>
<div class="box2">
<p class="p1">
<ul class="ul3">
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
<ul class="ul4">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</p>
</div>
<div class="box3">
<p class="p2"></p>
<ul class="ul1">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
<ul class="ul2">
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>

<form action="">
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="news" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
</form>
</div>


jquery中基础:
选择器:
1层次的:
$(.box ul)->(获取子子孙孙)将ul1 和 ul2 都获取到。
$(.box > ul)->(只获取子集)只是将它的子集获取到 只将ul2 都获取到
$(.box3 + ul)->(获取相邻的弟弟级元素)  只是将ul2获取到
$(.box1 ~ div)->(这个获取同一级别的兄弟姐妹)获取到的是box2 box3

$(.ul1 li:first)->   (一定是li然后冒号 ul1的第一个li~~)<li>list item 1</li>
$(.ul1 li:first-child)->(一定是li然后冒号 ul1的第一个li~~)<li>list item 1</li>
console.log( $("div p:first"));  得到的是第一个div 中的 第一个 p(.p1)对象 ;
console.log( $("div p:first-child")); 得到的是所有div 中的 第一个 p(.p1 和 .p2)对象
console.log($(".box ul:first-of-type")):得到的是:[ul.ul3, ul.ul1, ul.ul2]指的是一个标签中出现所有中的第一个,而不是便签按顺序排列的第一个出现的。

$(.ul1 li:last)->(一定是li然后冒号 ul1最后一个li~~)<li>list item 3</li>
$(.ul1 li).gt(0)->      是大于索引0的  也就是 1 2        <li>list item 2</li>    <li>list item 3</li>

$(.ul1 li).It(2->      是小于索引3的  也就是0 1         <li>list item 2</li>    <li>list item 3</li>

$("div:has(p)").addClass("test")->box2 下的p

$("input[name='accept'] ").attr("checked", true) ->
<input type="checkbox" name="accept" value="Evil Plans"  checked = true /> 判断input拥有name=accept的标签。设置checked并且 checked = true

$(input[value^ = 'news'])- > 查找所有 value 以 'news' 开始的 input 元素
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="news" value="Cold Fusion" />

这样的还有好多 $(input[value $ ='news'])  查找所有 value 以 'news' 结尾的 input 元素 *                 $(input[value * ='news'])  查找所有 value 以 'news' 所有的 input 元素
$(input[id][!value = 'news'])  查找所有拥有id的 并且value值不是news的input

$(":text")这是匹配所有的单行文本框

区分:eq  nth-child  get()
$(".ul1 li:nth-child(2)")->     是孩子从1开始      <li>list item 2</li>
$(".ul1 li").eq(2)->      是孩子从0开始               <li>list item 3</li>

$(".box").get(0)<==>$(".box")[0]  jQuery转变为原生:直接通过索引获取对应的元素对象即可
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: