JQuery的筛选常用函数
eq,获取第N个元素
first, 获取第一个元素
last,获取最后一个元素
hasClass,获取有指定类选择器的元素
filter,筛选 出与指定表达式匹配的元素
parent,获取一个包含所有匹配的元素的唯一父元素的集合
is, 检测匹配的元素,如果其中至少有一个元素符合给定的表达式就返回true
map, 将一组元素转换成数组
has,从一个集合中选取满足has 条件的子集元素
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-1.11.1.min.js"></script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>========jQuery 的筛选操作=========</p>
<p> This is just a test.</p>
<p> So is this</p>
<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>
<div class="protected">this is div1 class="protected"</div>
<div>this is div2</div>
<p>Hello</p>
<p>Hello Again</p>
<p class="selected">And Again</p>
<div>this is outer div
<div>this is inner div
<p class="testp">Hello111</p>
<p>Hello222</p>
</div>
</div>
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>
<form><input type="checkbox"/></form>
<ul>
<li><strong>list</strong> item 1 - one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li>
<li>list item 3</li>
</ul>
<p class="testpp"><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://ejohn.org/"/>
</form>
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
</body>
</html>
<script>
$(function () {
//eq
//$("p").eq(1).css("color", "red");
//$("p").eq(-1).css("color", "red");
//first
// $('li').first().css("color", "red");
//last
//$('li').last().css("color", "red");
//hasClass
// $("div").click(function () {
// if ($(this).hasClass("protected")) {
// $(this).css("color", "red");
// }
// });
//filter
//$("p").filter(".selected, :first").css("color", "red");
//parent
//$("p.testp").parent().css("color", "red");
// $("p").parent(".selected").css("color", "red");
//is 返回一个boolean
//alert($("input[type='checkbox']").parent().is("form"));
/**
* 判断点击li标签增加背景色为红色,如果点击的是第2个strong,当前的li增加背景色为绿色,
*/
// $("li").click(function () {
// var $li = $(this);
// var isTwoStrong = $li.is(function () {
// return $("strong", this).length === 2;//当前点击的是strong的标签的个数为2的li
// })
// if(isTwoStrong){
// $li.css("color", "red");
// }else{
// $li.css("color", "blue");
// }
//
// })
//map
// $("p.testpp").append($("input:text").map(function () {
// return $(this).val();
// }).get().join(", "))
//has 给含有ul的li加上背景色
// $('li').has('ul').css('color', 'red');
});
</script>