在jQuery中，我们一般通过一个字符串来标识匹配的元素，例如：

$("#uid"); // 选取id属性为"uid"的单个元素 $("p"); // 选取所有的p元素 $(".test"); // 选择所有带有CSS类名"test"的元素 $("[name=books]"); // 选择所有name属性为"books"的元素

是否感觉这和CSS选择器非常相似？是的，jQuery获取元素就是通过类似于CSS选择器的字符串来匹配对应的元素，我们一般将其称作jQuery选择器(selector)。几乎所有的CSS选择器都可以当做jQuery选择器来使用，只要CSS选择器对哪些元素生效，对应的jQuery选择器就可以选取到哪些元素。

和CSS选择器一样，jQuery选择器也支持多个选择器任意组合使用。

// 多个选择器以空格或指定符号隔开，将匹配与前者具有指定关系的最后一个选择器所表示的元素 $("#uid span"); // 选择id为"uid"的元素的所有后代span元素 $("p > span"); // 选择p元素的所有子代span元素 $("div + p"); // 选择div元素后面紧邻的同辈p元素 $("div p span"); // 选择div元素的所有后代p元素的后代span元素 // 多个选择器之间没有空格，将匹配同时满足这些选择器条件的元素 $("p#uid"); // 选择id属性为"uid"的p元素 $("div.foo"); // 选择所有带有CSS类名"foo"的div元素 $(".foo.bar"); // 选择所有同时带有CSS类名"foo"和"bar"的元素 $("input[name=books][id]"); // 选择所有name属性为"books"并且具备id属性的元素

此外，为了更加便于使用，jQuery还定制了特有的选择器：

// jQuery特有的选择器，当然也可以和其他选择器任意组合使用 $(":checkbox"); // 选取所有的checkbox元素 $(":text"); // 选取所有type为text的input元素 $(":password"); // 选取所有type为password的input元素 $(":checked"); // 选取所有选中的radio、checkbox、option元素 $(":selected"); // 选取所有选中的option元素 $(":input"); // 选取所有的表单控件元素(所有input、textarea、select、button元素)

jQuery的选择器较多，请直接参考jQuery选择器一览表。

当我们使用$("选择器字符串")匹配到指定的元素后，将返回一个jQuery对象。该对象就包含匹配到的所有DOM元素。如果指定的选择器没有匹配到任何元素，将返回一个空的jQuery对象(不包含任何DOM元素)。

将现有的DOM元素封装为jQuery对象

当然，jQuery也可以直接把一个或多个DOM元素直接转换成jQuery对象，以便于我们使用jQuery对象的方法对其进行操作。

var uid = document.getElementById("uid"); var ps = document.getElementsByTagName("p"); var unames = document.getElementsByName("uname"); var domsArray = [ document.getElementById("uid1"), document.getElementById("uid2") ]; // 将以上DOM元素直接转换为jQuery对象 $( uid ); $( ps ); $( unames ); $( domsArray ); $( ); // 不传入任何参数，返回空的jQuery对象(不匹配任何元素)将HTML字符串封装为jQuery对象

jQuery还支持将HTML字符串转换为临时DOM元素，并包含在返回的jQuery对象中。

// 你同样可以使用jQuery对象的方法对这些临时的DOM元素进行操作，或者将它们插入到文档的指定位置。 $('<span></span>'); // 包含一个临时的span元素 $('<span/>'); // 包含一个临时的span元素，和上一行代码的作用相同 $('<div id="mydiv"><p class="foo bar">Hello CodePlayer</p></div>'); // 包含一个临时的div元素，其内嵌一个子节点p元素元素筛选

有些时候，我们已经获得了一个匹配指定DOM元素的jQuery对象。不过我们需要根据jQuery对象来筛选指定的元素。例如：只选取集合中符合某些条件的元素，删除集合中符合某些条件的元素，查找当前匹配元素的子元素、父元素、同辈元素、上一个元素、下一个元素等与之具有特定关系的元素。

jQuery为我们提供了一系列的文档筛选方法，方便我们快速地选取我们所需的元素。

// 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素 $("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素) $("ul li").first(); // 选取ul li中匹配的第一个元素 $("ul li").last(); // 选取ul li中匹配的最后一个元素 $("ul li").slice(1, 4); // 选取第2 ~ 4个元素 $("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素 $("div").find("p"); // 选取所有div元素的所有后代p元素 $("div").children(); // 选取所有div元素的所有子代元素 $("div").children("p"); // 选取所有div元素的所有子代p元素 $("span").parent(); // 选取所有span元素的父元素 $("span").parent(".foo.bar"); // 选取所有span元素的带有CSS类名"foo"和"bar"的父元素 $("#uid").prev(); // 选取id为uid的元素之前紧邻的同辈元素 $("#uid").next(); // 选取id为uid的元素之前紧邻的同辈元素

jQuery的筛选方法比较多，甚至允许你自定义函数来筛选，请参考jQuery的文档筛选方法一览表。

同样的，如果筛选结果没有匹配任何DOM元素，则返回一个空的jQuery对象。

jQuery 核心：DOM操作的原则

当我们选取到指定的DOM元素并将其封装为jQuery对象后，接下来我们就可以对这些元素进行操作了。当然，磨刀不误砍柴工，我们也应该首先了解一下jQuery DOM操作的一些原则。

切记混淆jQuery对象和Element对象的方法

对于初学者，尤其要注意这一点。上面我们提到的所有选取元素的方法，返回的并不是DOM元素(Element对象)，而是jQuery对象，只是其中封装了所有DOM元素。接下来我们进行DOM操作，也应该使用jQuery对象的方法，而不是Element对象的方法。当然，jQuery对象也可以转换为DOM元素，后面我们会提到。

Get and Set in One 原则