jQuery 选择器大全
一、jQuery * 选择器
定义和用法
*选择器选择文档中的每个单独的元素，包括html,head和body;- 如果与其他元素（嵌套选择器）一起食用，该选择器选取指定元素中的所有子元素
实例：选择 内的所有元素：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body *").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
二、jQuery # 选择器
定义和用法
# 选择器选择带有唯一的指定id的元素；- id应用html元素的id属性
- 相同的id值只能在文档中使用一次
语法
$(#id)
ps：id选择器必须使用HTML元素的id属性
实例：选取 id="choose" 的 元素：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#choose").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
三、jQuery . 选择器
定义和用法
. 选择器选取带有指定class的元素；- class引入HTML元素的class属性；
- 与id选择器不同，class选择器常用于多个元素；
- 这样就可以为带有相同class的任何HTML元素设置特定的样式
语法
$(.class)
ps：class选择器使用HTML元素的class属性
实例：选取 class="intro" 的元素：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".intro").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
四、jQuery :first 选择器
定义和用法
:first 选择器选取第一个元素
语法
$(":first")
实例：选择第一个
元素：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:first").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
五、jQuery :last 选择器
定义和用法
:last 选择器选取最好一个元素
语法
$(":last")
实例：选择最后一个
元素：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:last").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
六、jQuery :even 选择器
定义和用法
:even 选择器选取每个带有偶数index值的元素（比如2，4，6）- index 值从0开始，所有第一个元素是偶数（0）
语法
$(":even")
实例：选择每个相隔的（偶数） 元素：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:even").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Web Page</h1>
<table>
<tr>
<th>Id</th>
<th>LastName</th>
<th>FirstName</th>
<th>Address</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td>Adams</td>
<td>John</td>
<td>Oxford Street</td>
<td>London</td>
</tr>
<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td>Fifth Avenue</td>
<td>New York </td>
</tr>
<tr>
<td>3</td>
<td>Carter</td>
<td>Thomas</td>
<td>Changan Street</td>
<td>Beijing</td>
</tr>
<tr>
<td>4</td>
<td>Obama</td>
<td>Barack</td>
<td>Pennsylvania Avenue</td>
<td>Washington</td>
</tr>
</table>
</body>
</html>
</body>
</html>
七、jQuery :odd 选择器
定义和用法
-
:odd 选择器选取每个带有奇数 index 值的元素（比如 1、3、5）。 -
index 值从 0 开始，所有第一个元素是偶数 (0)。
语法
$(":odd")
实例：选择每个相隔的（奇数） 元素：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:odd").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Web Page</h1>
<table>
<tr>
<th>Id</th>
<th>LastName</th>
<th>FirstName</th>
<th>Address</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td>Adams</td>
<td>John</td>
<td>Oxford Street</td>
<td>London</td>
</tr>
<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td>Fifth Avenue</td>
<td>New York </td>
</tr>
<tr>
<td>3</td>
<td>Carter</td>
<td>Thomas</td>
<td>Changan Street</td>
<td>Beijing</td>
</tr>
<tr>
<td>4</td>
<td>Obama</td>
<td>Barack</td>
<td>Pennsylvania Avenue</td>
<td>Washington</td>
</tr>
</table>
</body>
</html>
</body>
</html>
八、jQuery :eq() 选择器
定义和用法
-
:eq() 选择器选取带有指定 index 值的元素。 -
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
语法
$(":eq(index)")
ps:规定元素的 index 值。
实例：选择第二个
元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:eq(1)").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
九、jQuery :gt 选择器
定义和用法
:gt 选择器选取index值高于指定数的元素；- index值从0开始
语法
$(":gt(index)")
ps: 选取index值大于指定数的元素；
实例：选择前 3 个之后的所有 元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:gt(2)").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Web Page</h1>
<table>
<tr>
<th>Id</th>
<th>LastName</th>
<th>FirstName</th>
<th>Address</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td>Adams</td>
<td>John</td>
<td>Oxford Street</td>
<td>London</td>
</tr>
<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td>Fifth Avenue</td>
<td>New York </td>
</tr>
<tr>
<td>3</td>
<td>Carter</td>
<td>Thomas</td>
<td>Changan Street</td>
<td>Beijing</td>
</tr>
<tr>
<td>4</td>
<td>Obama</td>
<td>Barack</td>
<td>Pennsylvania Avenue</td>
<td>Washington</td>
</tr>
</table>
</body>
</html>
</body>
</html>
十、jQuery :lt 选择器
定义和用法
:lt 选择器选取带有小于指定index值的元素- index值从0开始
语法
$(":lt(index)")
实例：选择前 2 个 元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:lt(2)").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Web Page</h1>
<table>
<tr>
<th>Id</th>
<th>LastName</th>
<th>FirstName</th>
<th>Address</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td>Adams</td>
<td>John</td>
<td>Oxford Street</td>
<td>London</td>
</tr>
<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td>Fifth Avenue</td>
<td>New York </td>
</tr>
<tr>
<td>3</td>
<td>Carter</td>
<td>Thomas</td>
<td>Changan Street</td>
<td>Beijing</td>
</tr>
<tr>
<td>4</td>
<td>Obama</td>
<td>Barack</td>
<td>Pennsylvania Avenue</td>
<td>Washington</td>
</tr>
</table>
</body>
</html>
</body>
</html>
十一、jQuery :header 选择器
定义和用法
header 选择器选取所有标题元素（h1-h6）
语法
$(":header")
实例：选择所有标题元素（h1 - h6
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":header").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
十二、jQuery :animated 选择器
定义和用法
:animated 选择器选取当前的所有动画元素
语法
$(":animated")
实例：选择当前的动画元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function aniDiv(){
$("#box").animate({width:300},"slow");
$("#box").animate({width:100},"slow",aniDiv);
}
aniDiv();
$(".btn1").click(function(){
$(":animated").css("background-color","blue");
});
});
</script>
<style>
div
{
background:#98bf21;
height:40px;
width:100px;
position:relative;
margin-bottom:5px;
}
</style>
</head>
<body>
<div></div>
<div id="box"></div>
<div></div>
<button class="btn1">Mark animated element</button>
</body>
</html>
十三、jQuery :contains 选择器
定义和用法
:contains 选择器选取包含指定字符串的元素- 该字符串可以是直接包含在元素中的文本，或者被包含于子元素中
语法
$(":contains(text)")
- text: 要查找的文本
实例：选择所有包含 "is" 的
元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:contains(is)").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
十四：jQuery :empty 选择器
定义和用法
:empty 选择器选择空的元素- 空元素指的是不包含子元素或文本的元素
语法
$(":empty")
实例：选择每个空元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":empty").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Web Page</h1>
<table>
<tr>
<th>Id</th>
<th>LastName</th>
<th>FirstName</th>
<th>Address</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td>John</td>
<td>Oxford Street</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td></td>
<td>New York</td>
</tr>
<tr>
<td>3</td>
<td>Carter</td>
<td>Thomas</td>
<td>Changan Street</td>
<td>Beijing</td>
</tr>
<tr>
<td>4</td>
<td>Obama</td>
<td></td>
<td>Pennsylvania Avenue</td>
<td>Washington</td>
</tr>
</table>
</body>
</html>
</body>
</html>
十五、jQuery :visible 选择器
定义和用法
:visible 选择器选取每个当前是可见的元素；
除以下几种情况之外的元素即是可见元素：
- 设置为display:none
- type='hidden'的表单元素
- Width和height设置为0
- 隐藏的父元素（同时隐藏所有子元素）
语法
$(":visible")
实例：选择 元素中每个可见的元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body :visible").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
十六、jQuery [attribute] 选择器
定义和用法
[attribute]选择器每个带有指定元素属性的元素；- 可以选取带有任何属性的元素(对于指定的属性没有限制)
语法
$("[attribute]")
- attribute: 查找的属性
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("[id]").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1 id="main_header">Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<h3 id="sub_header">My uncle is Scrooge</h3>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
