end()
<p><span>Hello</span>, how are you?</p>
<script>$("p").find("span").end().css("border", "2px red solid");</script>
找到p 的子元素span ,end() 返回去找到p 设置p 元素的样式
<body> <ul class="first"> <li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li> </ul> <ul class="second"> <li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li> </ul> <script>$('ul.first').find('.foo').css('background-color', 'red') .end().find('.bar').css('background-color', 'green');</script> 先找到类名为 first 的ul,在
在类名为 first 的ul 下面找到类名为foo 的元素,设置它的样式,
返回去找到ul ,在ul下面找到类名为bar的元素,设置它的样式 </body>
andSelf()
<style> p, div { margin:5px; padding:5px; } .border { border: 2px solid red; } .background { background:yellow; } </style> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $("li.third-item").nextAll().andSelf().css("background-color", "red"); 最后三个li 的背景颜色成红色 </script>
<style> p, div { margin:5px; padding:5px; } .border { border: 2px solid red; } .background { background:yellow; } </style> </head> <body> <div> <p>First Paragraph</p> <p>Second Paragraph</p> </div> <script> $("div").find("p").andSelf().addClass("border"); div 和 p 都被添加类 $("div").find("p").addClass("background"); p 添加类 </script>
siblings()
<body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').siblings().css('background-color', 'red'); 类名为third-item 的li 元素 的同级元素 的样式
$('li.third-item').siblings().andSelf().css('background-color', 'red'); 类名为third-item 的li 元素 的同级元素 包括它自己的样式
$("li.start").siblings().css({"color":"red","border":"2px solid red"});
$("div").siblings(".selected")
找到每个div的所有同辈元素中带有类名为selected的元素
</script> </body>
$("p").prev() 找到每个段落紧邻的前一个同辈元素。 $("p").prev(".selected") 找到每个段落紧邻的前一个同辈元素中类名为selected的元素。
$("div:last").prevAll().addClass("before");
给最后一个之前的所有div加上一个类
<script>$("div:last").prevAll('.aa').addClass("before");</script>
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body> <dl> <dt id="term-1">term 1</dt> <dd>definition 1-a</dd> <dd>definition 1-b</dd> <dd id='ha'>definition 1-c</dd> <dd>definition 1-d</dd> <dt id="term-2">term 2</dt> <dd>definition 2-a</dd> <dd>definition 2-b</dd> <dd>definition 2-c</dd> <dt id="term-3">term 3</dt> <dd>definition 3-a</dd> <dd>definition 3-b</dd> </dl> <script> $("#term-2").prevUntil("dt") .css("background-color", "red"); id为term-2 的元素前面所有的元素,知道dt 结束 var term1 = document.getElementById('ha'); $("#term-3").prevUntil(term1, "dd") .css("color", "blue"); id为term-3 往前到id为ha 的元素,这之间的dd 元素 </script> </body> </html>
next()
nextAll()
nextUntil()
parent()
parents()
parentsUntil()
$("div").children()
$("div").children(".selected")
$("p").find("span")
从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同。
$("p").eq(1) 查找索引为1 的 p 元素 ,即第二个 p 元素
$("p").eq(-2) 查找倒数第二个p元素
$('li').first()
获取匹配的第一个元素
$('li').last() 获取最后个元素
检查当前的元素是否含有某个特定的类,如果有,则返回true。 if ( $(this).hasClass("protected") )
<body> <div></div> <div class="middle"></div> <div class="middle"></div> <div class="middle"></div> <div class="middle"></div> <div></div> <script> $("div").css("background", "#c8ebcc") .filter(".middle") .css("border-color", "red"); </script> </body>
$("p").filter(".selected, :first")
保留第一个以及带有select类的元素
$("input[type='checkbox']").parent().is("form") 返回 true 或false
slice() 把匹配元素集合缩减为指定的指数范围的子集。 <body> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li').slice(0,2).css('background-color', 'red'); 索引从1开始,直到索引为2结束不包括2
查找所有的li元素 ,在其中选取索引为0和1 的元素,即选取第一和第二个
$('li').slice(-4,-2).css('background-color', 'red');
slice(负数,负数),从最后的开始数,-1,-2,-3,-4 ,选取-4到-2 不包括-2
</script>
<body> <ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li> </ul> <script> $("ul").click(function(event) { var $target = $(event.target); if ( $target.is("li") ) { $target.css("background-color", "red"); } }); </script> </body>
$("input[type='checkbox']").parent().is("form") 由于input元素的父元素是一个表单元素,所以返回true。
map()
$(function(){ var arr1=[0,3,5]; var arr2= $.map(arr1,function(item){return item*2;}); document.write(arr2) alert(arr2); });
保留包含特定后代的元素,去掉那些不含有指定后代的元素。 $('li').has('ul').css('background-color', 'red'); 给含有ul的li加上背景色
查找DIV中的每个子元素。 $("div").children() 在每个div中查找 .selected 的类。 $("div").children(".selected")