一，第一个元素
:first
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
</style>
</head>
<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>
<input name="none" />
</body>
</html>
<script>
$(function(){
//第一种写法，直接取到第一个
$("li:first").css({
"background-color" : "red"
})
//第二种写法，利用数组取到第一个元素的话，返回的是一个普通的对象，并不是一个jQuery对象
$($("li")[0]).css({
"background-color" : "red"
})
})
</script>
二， 最后一个
:last
三，去除所有与给定选择器匹配的元素
:not(selector)
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css"></style>
</head>
<body>
<ul>
<li name="hello">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>
<input name="none" />
</body>
</html>
<script>
$(function(){
$("li:not([name='hello'])").css({
"background-color" : "red"
})
})
</script> 
四，选取奇数行
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
</style>
</head>
<body>
<ul hello="hello">
<li name="hello">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>
<ul>
<li name="hello">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>
<input name="none" />
</body>
</html>
<script>
//属性选择器 + 层级选择器 + 基本过滤器
$(function(){
$("ul[hello='hello'] li:even").css({
"background-color" : "red"
})
})
</script> 
五，选取偶数行
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
</style>
</head>
<body>
<ul hello="hello">
<li name="hello">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>
<ul>
<li name="hello">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>
<input name="none" />
</body>
</html>
<script>
$(function(){
//属性选择器（用前面的部分元素匹配）+ 层级选择器（自选择子代元素） + 基本过滤器
$("ul[hello^='hel']>li:odd").css({
"background-color" : "red"
})
})
</script>
六，选择一定的范围eq(), gl(), lt()
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
</style>
</head>
<body>
<ul hello="hello">
<li name="hello">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>
<ul>
<li name="hello">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>
<input name="none" />
</body>
</html>
<script>
$(function(){
$("ul[hello^='hel']>li:eq(3)").css({
"background-color" : "red"
})
$("ul[hello^='hel']>li:gt(1)").css({
"border" : "1px solid blue"
})
$("ul[hello^='hel']>li:lt(1)").css({
"color" : "red"
})
})
</script> 
七，:animated和focus
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button id="run">Run</button>
<div>
</div>
</body>
</html>
<script>
$(function(){
$("#run").on("click", function(){
$("div:not(:animated)").animate({
height : "200px",
}, 1000)
})
})
</script>
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
/* div{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
margin-right: 10px;
}*/
</style>
</head>
<body>
<div id="content">
<input tabIndex="1">
<input tabIndex="2">
<select tabIndex="3">
<option>select menu</option>
</select>
<div tabIndex="4">
a div
</div>
</div>
</body>
</html>
<script>
$(function(){
$("#content").on("click", "input", function(){
$("input:focus").css({
"border" : "2px solid red"
})
$("input:not(:focus)").css({
"border" : "1px solid black"
})
})
})
</script>