jQuery筛选总结

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>筛选</title>
<script src="../jquery-1.8.3.min.js"></script>
<script>
$(function() {
// 筛选
// 过滤
//获取第N个元素
$("#list li").eq(1).css('border', '1px solid #f00');
// 获取第一个元素
$("#list li").first().css('border', '1px solid #ff0');
// 获取最后个元素
$("#list li").last().css('border', '1px solid #f0f');
//检查当前的元素是否含有某个特定的类，如果有，则返回true。
console.log($("#list li").hasClass('item'));
//筛选出与指定表达式匹配的元素集合。
$("#list li").filter('.item').css('border', '1px solid #00f');
// 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
console.log($("#list li").is('li'));
// 将一组元素转换成其他数组（不论是否是元素数组）
console.log($('#list li').map(function() {
return $(this).text();
}));
//保留包含特定后代的元素，去掉那些不含有指定后代的元素。
$('li').has('ul').css('background-color', 'skyblue');
//删除与指定表达式匹配的元素
$('li').not('.item').css('background-color', 'grey');
//选取一个匹配的子集,第一个元素是0.如果是负数，则可以从集合的尾部开始选起。
$("#list li").slice(-1).wrapInner("<b></b>");

// 查找
//取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
$("#list li").children().css('background-color', '#cea');
//从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
$("#list li").closest("ul").css('border', '2px solid #0ff');
//搜索匹配元素的所有后代元素
$("#lists").find("li").css('border', '2px solid #caf');
//取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
$("#lists li").next(".item").css('background-color', '#cee');
//查找当前元素之后所有的同辈元素
$("#lists li").nextAll("li").css('background-color', '#ce0');
//查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
$("#lists").nextUntil("p").css('background-color', '#ca0');
// 返回第一个匹配元素用于定位的父节点。
$("button").click(function() {
$("p").offsetParent().css("background-color", "red");
});
// 取得一个包含着所有匹配元素的唯一父元素的元素集合。
$("#list3 span").parent("li").css("border", "10px solid red");
//取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。
$("span").parents().css("border", "15px solid green")
// 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
$('li.item-a').parentsUntil('.level-1').css('background-color', 'red');
//取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
$("p").prev().css('border', '5px solid #cae');
//查找当前元素之前所有的同辈元素
$("div").prevAll().addClass("before");
//查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
$('#term-2').prevUntil('dt').css('background-color', 'red');
//取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合,排除自身
$("div").siblings().css('background-color', 'green');

// 串联
//添加一个新元素到一组匹配的元素中，并且这个新元素能匹配给定的表达式。
$(document).add('p,h2').css('border','25px solid #f00');
//加入先前所选的加入当前元素中
$("#list").find("p").andSelf().addClass("border");
//查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
$("em").contents().wrap("<b/>");
//回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
$("#list").children('li').end().css('border','15px solid #f90');


})
</script>
</head>

<body>
<h2>asd</h2>
<em><p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p></em>
<dl>
<dt>term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>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>term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
<p id="dd123">Hello</p>
<div><span>Hello Again</span></div>
<p>And Again</p>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<div style="width:70%;position:absolute;left:100px;top:100px">
<div style="margin:50px;background-color:yellow">
<p>点击下面的按钮可以设置本段落的最近的父（祖先）元素的背景色。</p>
</div>
</div>
<button>点击这里</button>
<ul id="list">
<li>小芸芸 和我 去钓鱼执法</li>
<li></li>
<li>
小洋洋 和我 去看电影
<ul>
<li>小芸芸 和我 去钓鱼执法</li>
<li>小静静 和我 去约跑</li>
<li>小洋洋 和我 去看电影</li>
<p class="item">小洋洋偷偷的和老母鸡去看了个电影</p>
<li class="item">小洋洋1 和我 去看电影1</li>
<li>小洋洋2 和我 去看电影2</li>
<li>小洋洋3 和我 去看电影3</li>
</ul>
</li>
<li>小洋洋1 和我 去看电影1</li>
<li class="item">小洋洋2 和我 去看电影2</li>
<li>小洋洋3 和我 去看电影3</li>
</ul>
<hr>
<ul id="lists">
<li>小芸芸 和我 去钓鱼执法</li>
<li>小静静 和我 去约跑</li>
<li>
小洋洋 和我 去看电影
<ul>
<li>小芸芸 和我 去钓鱼执法</li>
<li class="item">小静静 和我 去约跑</li>
<li>小洋洋 和我 去看电影</li>
<p class="item">小洋洋偷偷的和老母鸡去看了个电影</p>
<p>小洋洋偷偷的和老母鸡去看了个电影</p>
<li>小洋洋1 和我 去看电影1</li>
<li class="item">小洋洋2 和我 去看电影2</li>
<li>小洋洋3 和我 去看电影3</li>
</ul>
</li>
<li>小洋洋1 和我 去看电影1</li>
<p class="item">小洋洋偷偷的和老母鸡去看了个电影</p>
<li>小洋洋2 和我 去看电影2</li>
<li>
小洋洋3 和我 去看电影3
<ul>
<li>小芸芸 和我 去钓鱼执法</li>
<li>小静静 和我 去约跑</li>
<li>小洋洋 和我 去看电影</li>
<p>小洋洋偷偷的和老母鸡去看了个电影</p>
<li>小洋洋1 和我 去看电影1</li>
<li>小洋洋2 和我 去看电影2</li>
<li>小洋洋3 和我 去看电影3</li>
</ul>
</li>
</ul>
<hr>
<ul id="list3" class="xl">
<li>小芸芸 和我 去钓鱼执法</li>
<li>小静静 和我 去约跑</li>
<li>小洋洋 和我 去看电影</li>
<p>小洋洋偷偷的和老母鸡去看了个电影</p>
<li>小洋洋1 和我 去看电影1</li>
<li class="item">小洋洋2 和我 去看电影2</li>
<li><span class="item"></span></li>
<li>小洋洋3 和我 去看电影3</li>
</ul>
</body>

</html>
猜你喜欢
