<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选</title>
<script rel="script" src="js/jquery.min.js"></script>
<script rel="script" src="js/vue.min.js"></script>
<style>
</style>
</head>
<body>
<p>Anna</p>
<p>Jack</p>
<p>Sunny</p>
<p>Anny</p>
<ol>
<li>列表项1</li>
<li>列表项<strong>2</strong></li>
<li>列表项3</li>
<li><strong>列</strong>表项<strong>4</strong></li>
</ol>
<em>wind</em>
<em class="weather">snow</em>
<em>sunny</em>
<ul>
<li>1</li>
<li>2
<ul>
<li>4</li>
<li>6</li>
<li>5</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
<script>
1、eq();
$(document).ready(function () {
$("p").eq(1).css({"color":"red"});//正数第二个
$("p").eq(0).css({"color":"green"});//正数第一个
$("p").eq(-1).css({"color":"yellow"});//倒数第一个
$("p").eq(-2).css({"color":"blue"}); //倒数第二个
2、first();
$("li").first().css({"color":"#ff00ff"});//获取第一个元素
3、last();
$("li").last().css({"color":"red"});//获取最后一个元素
4、is();
$("li").click(function() {
var $li = $(this),
isWithTwo = $li.is(function() {//is 筛选器的使用
return $('strong', this).length === 2;//列表项内有两个strong标签的是列表项4
});
if ( isWithTwo ) {
$li.css("border", "1px solid #11dd22");//当当前点击列表项有两个strong标签时就把边框色改为#11dd22
} else {
$li.css("border", "1px solid #647787");//点击列表项时把边框改为#647787.
}
});
5、has();
$('li').has('ul').css('border', '1px solid #f0f');//给含有ul的li加上边框,即只有距离ul很近的li才会被识别到，
// 否则是无法识别到的
6、slice();
//slice(start, [end])使用：
// start:开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。
//end:结束选取自己的位置，如果不指定，则就是本身的结尾。
$("p").slice(0, 1).wrapInner("<i></i>");//第一个p标签文本变为倾斜
});
</script>
</body>
</html>