jquery 选择器

jQuery.noConflict() 函数详解
jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权。
// 让出对变量$的控制权，并将jQuery赋给新的别名j
var j = jQuery.noConflict();
即使是多个库共存，我们也可以在jQuery.ready()的回调函数或其他自定义函数中将局部变量$作为jQuery的别名使用：
// 让出jQuery库对变量$的控制权
jQuery.noConflict();


jQuery(document).ready(function($){
    // 使用局部变量$进行jQuery操作
    $("p").css("color", "");    
});




(function($){
    // 使用局部变量$进行jQuery操作
    $("ul li").addClass("item");    
}(jQuery))


// 让出jQuery-1.11.1对变量$和变量jQuery的控制权
var j = jQuery.noConflict( true );
jQuery.selector 属性详解
selector属性用于返回获取当前jQuery对象时传给jQuery(selector, context)函数的原始选择器(即selector参数)。


示例&说明


以下面这段HTML代码为例：


<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>


我们编写如下jQuery代码：


var $li = $("ul li");
document.writeln( $li.selector ); // ul li


var $p = $("#n1 p");
// 虽然$p是一个空的jQuery对象，没有匹配到任何元素，但也包含了传入的选择器信息
document.writeln( $p.selector ); // #n1 p


var $ul = $("#n1").find("ul");
// jQuery根据我们的操作自动计算出相应的选择器
document.writeln( $ul.selector ); // #n1 ul


var div_n2 = document.getElementById("n2");
var $n2 = $(div_n2); // 以DOM元素的方式获取jQuery对象
document.writeln( $n2.selector ); // (空字符串)


jQuery.context 属性详解
context属性用于返回获取当前jQuery对象时传给jQuery(selector, context)函数的context参数。


jQuery.length 属性详解
属性用于返回当前jQuery对象封装的元素个数。


以下面这段HTML代码为例：


<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>


我们编写如下jQuery代码：


var j_li = $("ul li");
document.writeln( j_li.length ); // 3


var j_p = $("p"); // 没有p元素，返回空的jQuery对象
document.writeln( j_p.length ); // 0


jQuery.size() 函数详解
函数用于返回当前jQuery对象封装的元素个数。


jQuery 选择器(selector1,selector2,selectorN)详解
jQuery的selector1,selector2,selectorN选择器(联合选择器)用于将多个不同选择器获取的元素合并到一起，将其封装为jQuery对象并返回。


示例&说明


以下面这段HTML代码为例：


<div id="n1">
    <p id="n2" class="test"></p>
    <p id="n3" class="detail">
        <span id="n4" class="test codeplayer"></span>
    </p>
</div>


现在，我们想要一次性查找到id为"n1"的div标签、id为"n2"的p标签、包含类名"test"的span标签，则可以编写jQuery代码：


// 选择了id分别为n1、n2、n4的三个元素
$("#n1,#n2,span.test");


如果要一次性查找到包含类名"detail"的p标签、包含类名"test"的所有标签，则对应的jQuery代码如下：


// 选择了id分别为n3、n2、n4的三个元素
$("p.detail,.test");


parent > child  满足parent下child的子元素


prev + next  jQuery的prev + next选择器用于匹配紧接在prev元素后面的同辈next元素，将其封装为jQuery对象并返回。 相邻的下一个元素


prev ~ siblings jQuery的prev ~ siblings选择器用于匹配prev元素之后的所有同辈的siblings元素，将其封装为jQuery对象并返回。


:first jQuery的:first选择器用于获取匹配到的第一个元素，将其封装为jQuery对象并返回。:first选择器等价于:eq(0)选择器。
:last jQuery的:last选择器用于获取匹配到的最后一个元素，将其封装为jQuery对象并返回。
:even 匹配所有索引值为偶数的元素
：odd  匹配所有索引值为奇数的元素
：eq(index)获取匹配的元素中指定索引的元素
:gt(index)获取匹配的元素中大于指定索引的元素
:lt(index)获取匹配的元素中小于指定索引的元素
（：first-child) jQuery的:first-child选择器用于匹配作为父元素的第一个子元素的元素，将其封装为jQuery对象并返回。:first-child选择器等价于:nth-child(0)选择器。
(:last-child)  jQuery的:last-child选择器用于匹配作为父元素的最后一个子元素的元素，将其封装为jQuery对象并返回。
(:only-child) 匹配作为父元素的唯一子元素的元素


:nth-child(n)选择器用于匹配作为父元素下的第n个(或特定顺序的)子元素的元素，将其封装为jQuery对象并返回。
:nth-last-child(n)选择器用于匹配作为父元素下的倒数第n个子元素或符合特定顺序规则的元素，将其封装为jQuery对象并返回。
:first-of-type选择器用于匹配作为父元素的第一个该类型的子元素的元素，将其封装为jQuery对象并返回。:first-of-type选择器等价于:nth-of-type(1)选择器。
:last-of-type选择器用于匹配作为父元素的最后一个该类型的子元素的元素，将其封装为jQuery对象并返回。:last-of-type选择器等价于:nth-last-of-type(1)选择器。
:has(selector)选择器用于匹配所有包含selector元素的元素，将其封装为jQuery对象并返回。
以下面这段HTML代码为例：


<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Hello</span>
        <span id="n4">Hello</span>
    </p>
    <p id="n5" class="detail">
        <span id="n6" class="b codeplayer">World
            <span id="n7" class="a">http://365mini.com</span>
            <span id="n8"></span>
            <span id="n9"></span>
        </span>
    </p>
</div>


现在，我们想要在id为"n1"的div标签内查找所有包含span标签的元素，则可以编写如下jQuery代码：


// 选择了id分别为n2、n5、n6的3个元素
$("#n1 :has(span)");


接着，我们在id为"n1"的div标签内查找包含类名为"b"的span标签的元素，则可以编写如下jQuery代码：


// 选择了id为n5的一个元素
$("#n1 :has(span.b)");
contains(text)选择器用于匹配包含指定文本的元素，将其封装为jQuery对象并返回。
:parent选择器用于匹配所有有内容的元素，将其封装为jQuery对象并返回。
:empty选择器用于匹配所有空的元素，将其封装为jQuery对象并返回。
:visible选择器用于匹配所有可见的元素，将其封装为jQuery对象并返回。
:hidden选择器用于匹配所有不可见的元素，将其封装为jQuery对象并返回。
:header选择器用于匹配所有的标题元素(h1 ~ h6)，将其封装为jQuery对象并返回。
jQuery的:focus选择器用于匹配当前获得焦点的元素，将其封装为jQuery对象并返回。


示例&说明


以下面这段HTML代码为例：


<div id="n1">
    <input name="name" type="text" label="姓名"><br>
    <input name="age" type="text" label="年龄"><br>
    <input name="cellphone" type="text" label="手机号码">
</div>
<div id="message"></div>


现在，我们为当前获得焦点的<input>元素显示提示信息，则可以编写如下jQuery代码：


// 当<input>元素获得焦点时，在#message中显示"请输入[姓名]"、"请输入[年龄]"等相应的提示信息。
$("input").on("focus blur", function(){
    var me = $(this);
    var msg = me.is(":focus") ? ("请输入[" + me.attr("label") + "]") : "";
    $("#message").html(msg);
});


[attribute]选择器用于匹配所有具有指定属性的元素，将其封装为jQuery对象并返回。
以下面这段HTML代码为例：


<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item2</li>
            <li id="n5" class="c" tabindex="3">item3</li>
        </ul>
    </div>
    <div id="n6" class>
        <ul id="n7">
            <li id="n8" class="">item1</li>
            <li id="n9">item2</li>
        </ul>
    </div>
</div>


现在，我们想要查找所有具有"class"属性的元素，则可以编写如下jQuery代码：


// 选择了id分别为n5、n6、n8的3个元素
$("[class]");


接着，查找所有同时具有"class"属性和"tabindex"属性的元素，则可以编写如下jQuery代码：


// 选择了id为n5的一个元素
$("[class][tabindex]");


[attribute=value]选择器用于匹配指定属性为指定值的所有元素，
[attribute！=value]选择器用于匹配指定属性不为指定值的所有元素，
[attribute^=value]选择器用于匹配指定属性以指定值开始的所有元素
[attribute$=value]选择器用于匹配指定属性以指定值结尾的所有元素
[attribute|=value]选择器用于匹配指定属性等于指定值或以指定值为前缀的所有元素，将其封装为jQuery对象并返回。
[attribute~=value]选择器用于匹配指定属性的值中包含指定单词的所有元素
[attribute*=value]选择器用于匹配指定属性包含指定值的所有元素，
input选择器用于匹配所有的表单控件元素
:text选择器用于匹配所有的单行文本框元素
:password选择器用于匹配所有的密码框元素
:radio选择器用于匹配所有的单选按钮元素
:button选择器用于匹配所有的按钮元素，将其封装为jQuery对象并返回。
这里的按钮指的是所有的button标签(不区分type)以及type为"button"的input标签




：submit选择器用于匹配所有的提交按钮元素，将其封装为jQuery对象并返回。
提交按钮框就是type为"submit"的input或button标签：<input type="submit">或<button type="submit"></button>。


:enabled选择器用于匹配所有可用的表单控件元素，将其封装为jQuery对象并返回。
可用的表单控件是指没有disabled属性的<input>、<button>、<select>、<textarea>、<option>等元素。


:checked选择器用于匹配所有选中的表单域元素，将其封装为jQuery对象并返回。
选中的表单域是指具有checked属性的radio和checkbox表单域，以及具有selected属性的option标签。