在编写任何 javascript 程序时，我们必须首先获取对象。 jQuery 选择器可以完全改变我们通常获取对象的方式。我们几乎可以得到任何语义对象，比如“一个带有title属性和一个包含test的值的元素”，完成这些工作只需要编写一个jQuery选择器字符串。
Dom 对象和 jQuery 包装集
无论是编写程序还是阅读API文档，都要时刻注意区分Dom对象和jQuery Package set。
1.Dom对象
在传统的javascript开发中，我们都是先获取Dom对象，比如：
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
我们经常使用document.getElementById方法通过id获取单个Dom对象，或者使用document.getElementsByTagName方法根据HTML标签名获取Dom对象集合。
另外jq通过属性找父类jq通过属性找父类，在事件函数中，可以在方法函数中使用this来引用事件触发对象（但是IE6中存在多播事件函数的问题），或者使用事件对象的target(FF)或者srcElement( iIE6) 获取引发事件的 Dom 对象。
注意这里得到的都是Dom对象，Dom对象也有不同的类型，比如input、div、span等。Dom对象只有有限的属性和方法：
2.jQuery 包装集
jQuery wrapper set 可以说是Dom 对象的扩展。在jQuery的世界里，所有的对象，无论是一个还是一组，都被打包成一个jQuery wrapper set，比如得到一个包含一个元素的jQuery wrapper set：
var jQueryObject = $("#testDiv");
jQuery 包装器作为对象一起调用。 jQuery 包装器具有丰富的属性和方法，它们是 jQuery 特有的：
3.Dom对象与jQuery对象的转换
(1) Dom 到 jQuery Wrapper Set
如果你想使用jQuery提供的功能，你必须先构造一个jQuery wrapper set。我们可以使用本文要介绍的jQuery选择器直接构造一个jQuery包装器集，如：
$("#testDiv");
上述语句构造的包装集只包含一个id为testDiv的元素。
或者我们已经获取了一个Dom元素，比如：
var div = document.getElementById("testDiv");
上面代码中的div是一个Dom元素，我们可以将Dom元素转换成一个jQuery wrapper set：
var domToJQueryObject = $ (div);
(2)jQuery 包装器设置为 Dom 对象
jQuery wrapper set 是一个集合，因此我们可以通过索引器访问其中一个元素：
var domObject = $("#testDiv")[0];
请注意，索引器返回的不再是一个 jQuery 包装器集，而是一个 Dom 对象！
p>
jQuery包集的一些遍历方法，比如each()，可以传递一个遍历函数，而遍历函数中的this也是一个Dom元素，比如：
$("#testDiv" ).each(function() { alert(this) })
如果我们想使用 jQuery 方法来操作 Dom 对象怎么办？只需使用上述转换方法即可：
$("#testDiv").each(function() { $(this).html("修改内容") })
jQuery 选择器完整解决方案
Popular 换句话说，Selector 选择器是“具有特殊语义的字符串”。只需将选择器字符串传递给上述方法即可选择不同的 Dom 对象并将它们作为 jQuery 包装集返回。
jQuery选择器按功能主要分为“选择”和“过滤”。它们一起使用。它们可以一起使用以形成选择器字符串。主要区别在于“过滤”的选择器是指定条件从前面的匹配内容中过滤，“过滤”选择器也可以单独使用，即从所有“*”中过滤。例如：
$(":[标题]")
相当于：
$("*:[标题]")
“select”函数的选择器不会有默认范围，因为该函数是“select”而不是“filter”。
在以下选择器类别中，带有“过滤器”的类别表示它是“过滤器”选择器，否则是“选择”功能的选择器。
1.基本选择器基础
名字
说明
例子
根据元素ID选择
$("divId") 选择ID为divId的元素
根据元素名称选择，
$("a") 选择所有元素
根据元素css类选择
$(".bgRed" ) 选择 CSS 类为 bgRed 的元素
*
选择所有元素
$("*") 选择页面的所有元素
您可以用“，”分隔多个选择器，然后将它们拼成一个选择器字符串。这些选择器匹配的内容会同时被选中。
$("#divId, a, .bgRed")
2.层次结构
名字
说明
例子
使用“表单输入”的形式选择表单中的所有输入元素。即祖先（ancestor）为from，后代（descendant）为输入。
$(".bgRed div") 选择 CSS 类作为 bgRed 中的所有元素
元素。
选择父节点的直接子节点子节点。 child 必须包含在 parent 中，并且 parent 是父元素。
$(".myList>li") 选择 CSS 类作为 myList 元素中的直接子节点对象。
prev 和 next 是同一级别的两个元素。选择上一个元素之后的下一个元素。
$("#hibiscus+img") 选择id为hibiscus的元素后面的img对象。
选择prev之后被兄弟过滤的元素
注意：兄弟姐妹是一个过滤器
$("#someDiv~[title]") 选择id为someDiv的对象后面所有带有title属性的元素
3.基本过滤器基本过滤器
名字
说明
例子
：第一
匹配找到的第一个元素
找到表格的第一行：$("tr :first")
:最后
匹配找到的最后一个元素
查找表的最后一行：$("tr:last")
删除所有匹配给定选择器的元素
查找所有未选中的输入元素：$("input:not(:checked)")
：偶数
匹配所有具有偶数索引的元素，从 0 开始计数
查找表的1、3、5...行：$ ("tr:even")
：奇数
匹配所有具有奇数索引的元素，从 0 开始
查找表的 2、@ >4、第 6 行：$("tr:odd")
匹配具有给定索引值的元素
注意：索引从0开始计数
找到第二行：$("tr:eq(1)")
匹配所有大于给定索引值的元素
注意：索引从0开始计数
找到第二行和第三行，即索引值为1和2，即大于0：$("tr:gt(0)")
选择结果集中索引小于N的元素
注意：索引从0开始计数
找到第一行和第二行，即索引值为0和1，即小于2：$("tr:lt(2)")
:标题
选择所有标题标签，如 h1、h2、h3。
为页面中的所有标题添加背景颜色：$(":header").css("background", "#EEE");
:动画
匹配所有执行动画效果的元素
只对不执行动画效果的元素执行动画效果：
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
4.内容过滤器
名字
说明
例子
匹配包含给定文本的元素
查找所有包含“John”的 div 元素：$(" div:contains('John')")
:空
匹配所有不包含子元素或文本的空元素
查找所有不包含子元素或文本的空元素：$("td:empty")
匹配包含选择器匹配的元素的元素
为所有包含 p 元素的 div 元素添加一个文本类：$("div:has(p)").addClass("test");
:父母
将元素与子元素或文本匹配
查找所有带有子元素或文本的 td 元素：$("td:parent")
5.可见性过滤器
名字
说明
例子
:隐藏
匹配所有不可见元素
注意：在 1.< 在@3.2 版本中，隐藏匹配其自身或父类不占用文档空间的元素。如果使用 CSS 的可见性属性使其不可见但占用空间，请不要输入 hidden。
查找所有不可见的 tr 元素：$("tr:hidden")
:可见
匹配所有可见元素
查找所有可见的 tr 元素：$ ("tr:visible")
6.属性过滤器
名字
说明
例子
p>
匹配包含给定属性的元素
查找所有具有 id 属性的 div 元素：
$("div[id]")
匹配给定属性为特定值的元素
查找 name 属性为 newsletter 的所有输入元素：
$("input[name='newsletter']") .attr("checked", true);
匹配不包含给定属性的特定值的元素
查找 name 属性不是 newsletter 的所有输入元素：
p>
$("input[name!='newsletter']").attr("checked", true);
匹配给定属性以某个值开头的元素
$("输入[名称^='新闻']")
匹配给定属性以某个值结尾的元素
查找所有以“字母”结尾的名称结尾的输入元素：
$("输入[name$='字母']")
将给定属性匹配为包含某个值的元素
查找名称中包含“man”的所有输入元素：
$("输入[name*='man']")
复合属性选择器，需要同时满足多个条件时使用。
查找所有 id 且 name 属性以 man 结尾的属性：
$("输入[id][name$='man']")
p>
7.子过滤器
名字
说明
例子
匹配其父元素下的第N个子元素或奇偶元素
':eq(index)' 只匹配一个元素，这个元素会匹配每个父元素的子元素。 :nth-child 从 1 开始， :eq() 从 0 开始！
你可以使用：
nth-child(偶数)
:nth-child(奇数)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
在每个 ul 中找到第二个 li：
$("ul li:nth-child(2)")
:第一个孩子
匹配第一个子元素
':first' 只匹配一个元素，这个选择器会匹配每个父元素一个子元素
找到每个 ul 中的第一个 li：
$("ul li:first-child")
:最后一个孩子
匹配最后一个子元素
':last' 只匹配一个元素，而此选择器将匹配每个父元素的一个子元素
在每个ul中找到最后一个li：
$("ul li:last-child")
:独生子女
如果一个元素是其父元素中唯一的元素，它将被匹配。
如果父元素包含其他元素，则不匹配。
在ul中查找li是唯一的子元素：
$("ul li:only-child")
8.表单选择器表单
名字
说明
解释
:输入
匹配所有输入、文本区域、选择和按钮元素
查找所有输入元素：
$(":输入")
:文本
匹配所有文本框
查找所有文本框：
$(":text")
:密码
匹配所有密码框
查找所有密码框：
$(": 密码")
:收音机
匹配所有单选按钮
找到所有单选按钮
:复选框
匹配所有复选框
查找所有复选框：
$(":checkbox")
：提交
匹配所有提交按钮
查找所有提交按钮：
$(":提交")
:图片
匹配所有图像字段
匹配所有图像字段：
$(":image")
:重置
匹配所有重置按钮
查找所有重置按钮：
$(":reset")
:按钮
匹配所有按钮
查找所有按钮：
$(":button")
:文件
匹配所有文件字段
查找所有文件字段：
$(": 文件")
9.表单过滤器
名字
说明
解释
:启用
匹配所有可用元素
查找所有可用的输入元素：
$("输入：启用")
:禁用
匹配所有禁用的元素
查找所有禁用的输入元素：
$("输入：禁用")
:检查
匹配所有选中的选中元素（复选框、单选框等，不包括选择中的选项）
查找所有选中的复选框元素：
$("输入：已检查")
：选择
匹配所有选中的选项元素
查找所有选中的选项元素：
$("选择选项：选中")
转载自：
