每天学点JQuery(1)—选择器

在JQuery库中，$就是JQuery的一个简写形式，例如$(“#foo”)与jQuery(“#foo”)是等价的。

$(document).ready(function(){
//...
});

也可以简写成:
$(function(){

});

这段代码等价于传统JS中的window.onload方法。

DOM对象与JQquery对象是不同的，每一份DOM都可以表示成一棵树，而JQuery对象则是通过包装DOM对象后产生的对象。在JQuery对象中无法使用DOM对象的任何方法。

可通过[index]或get(index)将JQuery对象转为DOM对象，如：

var a = $("#a") //JQuery对象
var b = a[0] //DOM对象
var c = a.get(0)//DOM对象

也可以通过$()将DOM对象包起来转化为JQuery对象

var a = document.getElementById("a")//DOM对象
var b = $(a)//JQuery对象

JQuery中的选择器完全继承了CSS风格。利用JQuery选择器，可以非常便捷和快速的找出特定DOM元素，然后为他们添加行为，而无需担心浏览器是否支持这一选择器。

基本选择器：它通过元素id，class和标签名等来查找DOM元素。

$("#test") //选取id为test的元素
$(".test") //选取所有class为test的元素
$("p") //选取所有<p>元素
$("div,span,p.test")//选取所有<div>,<span>和class为test的<p>的一组元素

层次选择器：通过DOM元素之间的层次关系获取特定的元素，例如后代元素、子元素、相邻元素和同辈元素。

1.$("div span") //选取<div>里的元素名是<span>的所有元素
2.$("div > span") //选取<div>元素下元素名是<span>的子元素

例如:
<div>
    <span class="1">
        <span class="2">123<span>
    </span>
</div>
$("div > span")只会选择class为1的<span>元素，而$("div span")则会选择所有<span>元素

3.$(".div + span")选取class为div的下一个同辈元素<span> //不包含同辈子元素
4.$(".div ~ span")选取class为div的元素后面的所有同辈<span>

在层次选择器中，第1个和第2个选择器比较常用，而后面两个因为在JQuery中可以也更加简单的方法代替，所以用的比较少。

可以用next()方法代替$(“.div + span”)

$(".div").next("span")

可以用nextAll方法代替$(“.div ~ span”)

$(".div").nextAll("span")

siblings 方法不管位置，匹配所有同辈元素

$(".div").siblings("span")

过滤选择器：过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，选择器都是以”:”开头，按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤。
1.基本过滤器：

$("div:first") //选取第一个<div>元素
$("div:last") //选取最后一个<div>元素
$("div:not(:first)") //选取除第一个<div>元素以外的<div>元素
$("div:even") //选取索引为偶数的<div>元素，索引从0开始
$("div:odd") //选取索引为奇数的<div>元素，索引从0开始
$("div:eq(1)") //选取索引为1的<div>元素
$("div:gt(1)") //选取索引大于1的<div>元素
$("div:lt(1)") //选取索引小于1的<div>元素
$(":header") //选取所有标题元素<h1-6>
$("div:animated") //选取正在执行动画的的<div>元素
$(":focus") //获取当前获取焦点的元素

2.内容过滤器：

$("div:contains('jquery')")//选取含有文本jquery的<div>元素
$("div:has(selector)")//选取含有某种选择器的<div>元素
$("div:empty")//选取不包含子元素(包含文本元素)的<div>元素
$("div:parent")//选取拥有子元素或文本元素的<div>元素

3.可见性过滤器：

$("div:hidden")//选取不可见的<div>元素
$("div:visible")//选取可见的<div>元素

4.属性过滤选择器：

$("div[id]") //选取拥有属性id的<div>元素
$("div[title=test]") //选取拥有属性title值等于test的<div>元素
$("div[title!=test]") //选取拥有属性title值不等于test的<div>元素
$("div[title^=test]") //选取拥有属性title值以test开始的<div>元素
$("div[title$=test]") //选取拥有属性title值以test结束的<div>元素
$("div[title*=test]") //选取拥有属性title值含有test的<div>元素
$("div[title|="test"]") //选取拥有属性title值等于test或已test为前缀后接连字符-(如test-en)的<div>元素
$("div[title~=test]") //选取拥有属性title值用空格分割有test(如en test)的<div>元素
$("div[id][title=test]") //选取拥有属性id并且title值等于test的<div>元素

5.子元素过滤选择器：

//eq()只匹配一个元素，而nth-child()匹配每个父元素的子元素，而却nth-child()索引值是从1开始的
$("div.one :nth-child(2)") //选取class为one的<div>元素下，索引值为2的元素
$("div.one :nth-child(even)") //选取class为one的<div>元素下，索引值为偶数的元素
$("div.one :nth-child(odd)") //选取class为one的<div>元素下，索引值为奇数的元素
$("div.one :nth-child(3n+1)") //选取class为one的<div>元素下，索引值是(3n+1)的元素，n从1开始
$("div.one :first-child") //选取class为one的<div>元素下第一个子元素
$("div.one :last-child") //选取class为one的<div>元素下最后一个元素
$("div.one :only-child") //选取class为one的<div>元素下，具有唯一子元素的元素(不包含文本元素)

6.表单对象属性过滤选择器：

$("#form1:enabled") //选取id为"form1"的表单内的所有可用元素
$("#form1:disabled") //选取id为"form1"的表单内的所有不可用元素
$("#input:checked") //选取所有被选中的<input>元素
$("#select option:selected") //选取所有被选中的选项元素

表单过滤器：利用这个选择器，能极其方便的获取到表单的某个或某类型的元素

$(":input") //选取所有<input>、<textarea>、<select>、<button>元素
$(":text") //选取所有单行文本框
$(":password") //选取所有密码框
$(":radio") //选取所有单选框
$(":checkbox") //选取所有复选框
$(":submit") //选取所有提交按钮
$(":image") //选取所有图像按钮
$(":reset") //选取所有重置按钮
$(":button") //选取所有按钮
$(":file") //选取所有上传域
$(":hidden") //选取所有不可见元素

选择器中的一些注意事项：
1.选择器中含有”.”、”#”、”（”或”]”等特殊字符时需要转义”\”

<div id="id#b">bb</div>
<div id="id[1]">cc</div>

获取:
$("#id\\#b")
$("#id\\[1\\]")

2.选择器中空格的问题

$(".test:hidden")//选取隐藏的class为hidden的元素
$(".test :hidden")//选取class为test的元素里的隐藏元素