基本选择器
<%--基本选择器 --%>
<script type="text/javascript">
$("#test") //选取Id 为test的元素,等价JS的 document.getElementById("test");
$("#one").css("background", "#bbffaa"); //改变Id为one的元素的背景色
$(".test") //选取所有class为test的元素
$(".mini").css("background", "#bbffaa"); //改变class为mini的所有元素的背景色
$("p") //选取所有p元素 等价JS的 document.getElementsByTagName("p");
$("p").css("background", "#bbffaa"); //改变所有<p>标签的背景色
$("*") //选取所有元素
$("*").css("background", "#bbffaa"); //改变所有元素的背景色
$("div,span,p.MyClass") //选取所有<div>,<span>和拥有class为MyClass的<p>标签的一组元素
$("span,#two").css("background","#bbffaa"); //改变所有<span>标签和id为two的元素的背景色
</script>
层次选择器
<%--层次选择器 --%>
<script type="text/javascript">
$("div span") //选取<div>里的所有<span>元素
$("body div").css("background", "#bbffaa"); //改变<body>标签内所有<div>的元素
$("div > span") //选取<div>元素下元素名是<span>的子元素
$("body > span").css("background", "#bbffaa"); //改变<body>内所有子<div>的元素
$(".one + div") //选取class为one的下一个<div>元素
$(".one + div").css("background", "#bbffaa"); //改变class为one的下一个<div>元素的背景色
//等价于(常用)
$(".one").next("div").css("background", "#bbffaa"); //改变class为one的下一个<div>元素的背景色
$("#two~div") //选取Id为two的元素后边的所有<div>兄弟元素
$("#two~div").css("background", "#bbffaa"); //改变id为two的元素后边所有同辈<div>元素的背景色
//等价于(常用)
$("#two").nextAll("div").css("background", "#bbffaa"); //改变id为two的元素后边所有同辈<div>元素的背景色
$("#two").siblings("div").css("background","#bbffaa"); //改变id为two的所有同辈的div元素的背景色
</script>
过滤选择器
<%-- 过滤选择器 --%>
<script type="text/javascript">
//基本过滤选择器
$("div:first") //选取所有<div>元素中第一个<div>元素
$("div:last") //选取所有<div>元素中的最后一个<div>元素
$("input:not(.myClass)") //选取class不是myClass的<input>元素
$("input:even") //选取索引是偶数的<input>元素
$("input:odd") //选取索引是奇数的<input>元素
$("input:eq(1)") //选取索引等于1的<input>元素
$("input:gt(1)") //选取索引大于1的<input>元素(不包括等于)
$("input:lt(1)") //选取索引小于1的<input>元素(不包括等于)
$(":header") //选取网页中所有的<h1>,<h2>...
$("div:animated") //选取正在执行动画的<div>元素
//内容过滤选择器
$("div:contains('我')") //选取含有文本"我"的<div>元素
$("div:empty") //选取不包含子元素（包括文本元素）的<div>空元素
$("div:has(p)") //获取含有<p>元素的<div>元素
$("div:parent") //选取拥有子元素（包括文本元素的）的<div>元素
//可见性过滤选择器
$(":hidden") //选取所有不可见的元素
$("p:hidden") //选取不可见的<p>元素
$("div:visible") //选取所有可见的<div>元素
//属性过滤选择器
$("div[id]") //选取拥有属性Id的<div>元素
$("div[title=tset]") //选取属性title=test的<div>元素
$("div[title!=test]") //选取属性title!=test的<div>元素（包括没有title属性的<div>元素）
$("div[title^=test]") //选取属性title以test开始的<div>元素
$("div[title$=test]") //选取属性title以test结束的<div>元素
$("div[title*=test]") //选取属性title含有test的<div>元素
$("div[id][title$=test]") //选取拥有属性Id，并且属性title以test结束的<div>元素
//子元素过滤选择器
$(":nth-child(even)") //选取每个父元素下的索引值是偶数的元素
$(":nth-child(odd)") //选取每个父元素下的索引值是奇数的元素
$(":nth-child(3n)") //选取每个父元素下的索引值是3的倍数的元素（n从0开始）
$("div.one:nth-child(2)") //获取每个class为one的<div>父元素下的第二个子元素（索引从1开始）
$("div.one:first-child") //获取每个class为one的<div>父元素下的第一个子元素
$("div.one:last-child") //获取每个class为one的<div>父元素下的最后一个子元素
$("div.one:only-child") //获取class为one的<div>父元素下只有一个子元素的元素
//表单对象过滤选择器
$("#form1:enable") //选取Id为"form1"的表单内的所有可用元素
$("#form2:disable") //选取Id为"form2"的表单内所有不可见的元素
$("input:cheched") //选取所有被选中的<input>元素
$("select:selected") //选中所有被选中的选项元素
//表单选择器
$(":input") //选取所有<input>、<textarea>、<select>和<button>元素
$(":test") //选取所有的单行文本框
$(":passworld") //选取所有的密码框
$(":radio") //选取所有的单选框
$(":checkbox") //选取所有的复选框
$(":submit") //选取所有的提交按钮
$(":image") //选取所有的图像按钮
$(":reset") //选取所有的重置按钮
$(":button") //选取所有的按钮
$(":file") //选取所有上传域
$(":hidden") //选取所有不可见元素
</script>