jquery 常见选择器以及一些方法

时间  2020-05-23
标签 jquery 常见 选择器 以及 一些 方法 栏目 JQuery 繁體版
原文   原文链接

// 这里的selector表示具体的选择器
jQuery( "selector:first" )css

jQuery的:first选择器用于获取匹配到的第一个元素，将其封装为jQuery对象并返回。jquery

:first选择器等价于:eq(0)选择器。数组

与:first选择器相对的是:last选择器，用于获取匹配到的最后一个元素。dom

 

注意：:first选择器与:first-child选择器的不一样之处在于：
:first选择器只匹配一个元素，而且是匹配到的第一个元素；
:first-child选择器则须要判断匹配到的元素是不是其父元素的第一个子元素，若是是就保留，不然将被舍弃。函数

 

示例&说明

如下面这段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 id="n7">         <ul id="n8">             <li id="n9">item1</li>             <li id="n10">item2</li>         </ul>     </div>
</div> 如今，咱们想要查找第一个div标签，则能够编写以下jQuery代码： // 选择了id为n1的一个元素
$("div:first"); 接着，查找全部ul标签中的第一个li标签，则能够编写以下jQuery代码： // 选择了id为n4的一个元素 // 虽然HTML中有两个ul标签，但:first不是分别取每一个ul中的第一个li，而是从上到下只要找到一个符合条件的元素就当即返回
$("ul li:first"); $("ul li:first-child");//分别取每一个ul中的第一个li

 

// 这里的selector表示具体的选择器
jQuery( "selector:first-child" )ui

jQuery的:first-child选择器用于匹配做为父元素的第一个子元素的元素，将其封装为jQuery对象并返回。:first-child选择器等价于:nth-child(1)选择器。this

与该选择器相对的是:last-child选择器，用于匹配做为父元素的最后一个子元素的元素。spa

注意：:first-child选择器与:first选择器的不一样之处在于：
:first选择器只匹配一个元素，而且是匹配到的元素中的第一个元素；
:first-child选择器则须要判断匹配到的元素是不是其父元素的第一个子元素，若是是就保留，不然将被舍弃。code

示例&说明
 如下面这段HTML代码为例： <div id="n1">     CodePlayer     <div id="n2">         <ul id="n3">             <li id="n4">item1</li>             <li id="n5" class="c">item2</li>             <li id="n6" class="c">item3</li>         </ul>     </div>     <div id="n7">         <ul id="n8">             <li id="n9">item1</li>             <li id="n10">item2</li>         </ul>     </div>
</div> 如今，咱们查找做为父元素的"长子"的div标签，则能够编写以下jQuery代码： // 选择了id分别为n一、n2的两个元素 // n1是父元素body标签的"长子"，n2是父元素n1的"长子" // 虽然在n1以内、n2以前有文本内容，但文本内容不算子元素，所以n2仍然是n1的"长子"
$("div:first-child"); 接着，查找全部匹配ul li的元素，再查找其中那些元素是父元素的"长子"，则能够编写以下jQuery代码： // 选择了id分别为n四、n9的两个元素
$("ul li:first-child"); 查找全部包含类名c的li标签，再查找这些元素是不是父元素的"长子"，对应的jQuery代码以下： // 没有选择任何元素，返回一个空的jQuery对象。 // 虽然包含类名"c"的li标签有n五、n6两个元素，但它们都不是父元素的"长子"，所以没法匹配
$("li.c:first-child");

 

// 这里的selector表示具体的选择器
jQuery( "selector:first-of-type" )orm

返回封装了匹配做为父元素的第一个该类型子元素的元素的jQuery对象。

若是找不到任何相应的匹配，则返回一个空的jQuery对象。

jQuery先会根据选择器selector去查找全部匹配的元素，再判断它们是不是本身父元素的全部此类型的子元素中的"长子"(第一个元素)，若是是就保留，不然就舍弃掉该元素。

 

示例&说明
如下面这段HTML代码为例： <div id="n1">     <div id="n2" class="abc">         <label id="n3">label1</label>         <span id="n4">span1</span>         <span id="n5" class="abc">span2</span>         <span id="n6">span3</span>     </div>     <div id="n7">         <span id="n8" class="abc">span1</span>         <span id="n9">span2</span>     </div>
</div> 如今，咱们查找做为父元素的span类型子元素中的"长子"的span标签，则能够编写以下jQuery代码： // 选择了id分别为n四、n8的两个元素 // n4虽然不是n2的第一个子元素，但它是n2全部span类型子元素中的第一个，所以能够匹配
$("span:first-of-type"); 接着，查找全部包含类名abc的元素，并且它们必须是父元素的该类型子元素中的"长子"，则能够编写以下jQuery代码： // 选择了id分别为n二、n8的两个元素 // .abc能够匹配id分别为n二、n五、n8的3个元素，n2是n1全部div类型子元素中的第一个，n8是n7全部span类型子元素中的第一个，但n5不是n2全部span类型子元素中的第一个，所以不能匹配n5。
$(".abc:first-of-type");

jQuery( ":parent" )

jQuery的:parent选择器用于匹配全部有内容的元素，将其封装为jQuery对象并返回。

有内容的DOM元素，是指该元素包含子元素或者文本内容(哪怕是空格或换行符，也算有文本内容)。

与该选择器相对的是:empty选择器，用于匹配全部空的元素。

 

返回封装了全部有内容的DOM元素的jQuery对象。

 

示例&说明
如下面这段HTML代码为例： <div id="n1">     <div id="n2">             <span id="n3">张三</span>             <span id="n4"> </span>     </div>     <div id="n5">         <span id="n6"></span>     </div>     <div id="n7">     </div>
</div> 如今，咱们想要查找id为n1的div标签内全部有内容的元素，则能够编写以下jQuery代码： // 选择了id分别为n二、n三、n四、n五、n7的5个元素
$("#n1 :parent"); 查找全部有内容的span标签，则能够编写以下jQuery代码： // 选择了id分别为n三、n4的两个元素
$("span:parent");

 

jQuery( ":input" )

返回封装了全部表单信息元素的jQuery对象。

若是找不到任何相应的匹配，则返回一个空的jQuery对象。

 

示例&说明
如下面这段HTML代码为例： <div id="n1">     <form id="n2">        <input id="n3" type="button" value="Input Button"/>        <input id="n4" type="checkbox" />        <input id="n5" type="file" />        <input id="n6" type="hidden" />        <input id="n7" type="image" />        <input id="n8" type="password" />        <input id="n9" type="radio" />        <input id="n10" type="reset" />          <input id="n11" type="submit" />        <input id="n12" type="text" />        <select id="n13">         <option id="n14">Option</option>        </select>        <textarea id="n15"></textarea>        <button id="n16">Button</button>     </form>
</div> 如今，查找全部的表单信息元素，则能够编写以下jQuery代码： // 选择了id分别为n3 ~ n16(除了n14)的13个元素
$(":input");

 

jQuery( ":text" )

返回封装了全部单行文本框元素的jQuery对象。

若是找不到任何相应的匹配，则返回一个空的jQuery对象。

 

示例&说明 如下面这段HTML代码为例： <div id="n1">     <form id="n2">        <input id="n3" type="button" value="Input Button"/>        <input id="n4" type="checkbox" />        <input id="n5" type="file" />        <input id="n6" type="hidden" />        <input id="n7" type="image" />        <input id="n8" type="password" />        <input id="n9" type="radio" />        <input id="n10" type="reset" />          <input id="n11" type="submit" />        <input id="n12" type="text" />        <select id="n13">         <option id="n14">Option</option>        </select>        <textarea id="n15"></textarea>        <button id="n16">Button</button>     </form>
</div> 如今，咱们查找全部的单行文本框元素，便可编写以下jQuery代码： // 选择了id为n12的一个元素
$(":text");

 

  • jQuery的:selected选择器用于匹配全部选中的option元素，将其封装为jQuery对象并返回。

   选中的option元素指的是具备selected属性的option标签.

 

  • 返回封装了全部选中的option元素的jQuery对象。
  • 若是找不到任何相应的匹配，则返回一个空的jQuery对象。

 

示例&说明

 

 如下面这段HTML代码为例： <div id="n1">     <form id="n2">         <label id="n3">CodePlayer</label>         <input id="n4" type="text" disabled="disabled" >        <input id="n5" type="checkbox" checked="checked" />        <input id="n6" type="checkbox" />        <input id="n7" type="radio" checked="checked" />            <input id="n8" type="radio" />              <button id="n9" type="button" disabled="disabled">Button</button>        <select id="n10">         <option id="n11" selected="selected">item1</option>         <option id="n12">item2</option>        </select>     </form>
</div> //如今，咱们查找全部选中的option元素，便可编写以下jQuery代码： // 选择了id为n11的一个元素
$(":selected");

 

jQueryObject.is( expr )

is()函数用于判断当前jQuery对象所匹配的元素是否符合指定的表达式。只要其中有至少一个元素符合该表达式就返回true，不然返回false。

这里的表达式包括：选择器(字符串)、DOM元素(Element)、jQuery对象、函数。

该函数属于jQuery对象(实例)。

 

is()函数其实是判断当前jQuery对象所匹配的元素与指定表达式expr所表示的元素是否存在交集，若是存在交集就返回true，不然返回false。

 

若是expr参数为字符串，则将其视做jQuery选择器，用以表示该选择器所匹配的元素。

 

jQuery 1.6 新增支持：参数expr能够为DOM元素(Element)、jQuery对象或函数。

 

若是expr参数为函数，is()函数将根据匹配的全部元素遍历执行该函数，函数中的this将指向当前迭代的元素。is()还会为函数传入一个参数：即该元素在匹配元素中的索引。

 

函数expr的返回值应该为true或者false。该函数的返回值将决定is()的返回值。循环执行时，只要该函数的返回值有一次为true，is()函数就当即返回true，不然返回false。

 

is()函数的返回值为Boolean类型，以指示当前jQuery对象所匹配的元素与参数expr所表示的元素是否存在交集，若是存在交集，则返回true，不然返回false。

 

示例&说明

 

 

 如下面这段HTML代码为例： <div id="n1">     <div id="n2">         <ul id="n3" data_id="12">             <li id="n4">item1</li>             <li id="n5" class="foo bar">item2</li>             <li id="n6" class="level-2">item3</li>         </ul>     </div>     <div id="n7">         <input id="n8" name="username" type="text" value="1">         <input id="n9" name="orders" type="checkbox" checked="checked" value="1">     </div>
</div> 如下jQuery示例代码用于演示is()函数的具体用法： var $n3 = $("#n3"); document.writeln( $n3.is("ul") ); // true
document.writeln( $n3.is("[data_id]") ); // true

var $n5 = $("#n5"); document.writeln( $n5.is(".foo") ); // true
document.writeln( $n5.is("li") ); // true
document.writeln( $n5.is("ul li") ); // true
document.writeln( $n5.is("p li") ); // false

var n5 = document.getElementById("n5"); document.writeln( $n5.is(n5) ); // true

var $li = $("li"); document.writeln( $n5.is($li) ); // true // 判断li元素是否含有类名"level-index"，这里的index表示li元素的索引值(0、一、2……)
document.writeln( $li.is( function(index){     return $(this).hasClass("level-" + index);       } ) ); // true


var $input = $("input"); document.writeln( $input.is(":text") ); // true
document.writeln( $input.is(":checked") ); // true

var div = document.getElementsByTagName("div"); var $n7 = $("#n7"); document.writeln( $n7.is(div) ); // true

 

jQueryObject.slice( startIndex [, endIndex ] )

slice()函数用于选取匹配元素中一段连续的元素，并以jQuery对象的形式返回。

该函数属于jQuery对象(实例)。

若是startIndex为负数，则表示startIndex + length，length表示匹配的元素个数(也可理解为从后向前计数)。

 

 

若是endIndex为负数，则表示endIndex + length，length表示匹配的元素个数(也可理解为从后向前计数)。

 

若是省略endIndex参数，则一直选取到集合末尾。

 

slice()函数的返回值为jQuery类型，返回一个新的jQuery对象，该对象封装了当前jQuery对象匹配的元素中索引从startIndex到endIndex(不包括endIndex)的一段连续的元素。

 

若是选取范围无效，将返回空的jQuery对象。

 

slice()函数并不会更改当前jQuery对象的元素匹配，选取的结果只反映在做为返回值的新的jQuery对象中。

 

请参考下面这段HTML演示代码： <div id="n1">     <div id="n2">         <ul id="n3">             <li id="n4">item1</li>             <li id="n5" class="foo bar">item2</li>             <li id="n6">item3</li>             <li id="n7">item4</li>             <li id="n8">item5</li>         </ul>     </div>
</div> 如下jQuery示例代码用于演示slice()函数的具体用法： // 返回jQuery对象全部匹配元素的标识信息数组 // 每一个元素形如：tagName或tagName#id(若是有id的话)
function getTagsInfo($doms){     return $doms.map(function(){         return this.tagName + (this.id ? "#" + this.id : "");     }).get(); } /*  $("li") 匹配n四、n五、n六、n七、n8这5个元素 */
var $li = $("li"); // 选取第2个元素
var $sub1 = $("li").slice( 1, 2); document.writeln( getTagsInfo( $sub1 ) ); // LI#n5 // 选取第四、5个元素
var $sub2 = $("li").slice( 3 ); document.writeln( getTagsInfo( $sub2 ) ); // LI#n7,LI#n8 // 选取第1~4个元素 // startIndex = length + (-5) = 0，endIndex = length + (-1) = 4
var $sub3 = $("li").slice( -5,  -1); document.writeln( getTagsInfo( $sub3 ) ); // LI#n4,LI#n5,LI#n6,LI#n7

 

filter()

$(“ul li”>.filter(“:contains(‘佳能’),:contains(‘尼康’),:contains(‘电话’)”)).addClass（”promoted”）;

Filter(expr)其中expr能够是多个选择器的组合

Filter（）是指操做当前元素集，删除不匹配的元素，获得一个一个新的集合，filter（）是获得这些元素中符合条件的元素，是对自身集合元素筛选。

Filter（）与not（）过滤条件相反，都是对选中的元素集合的操做过滤。

has()筛选出包含特定后代的元素，做用于自身。Has（）其实是根据后代元素来筛选元素

not()

jQueryObject.map( callback )

$().map();

map()函数将根据匹配的全部元素遍历执行该函数，函数中的this将指向当前迭代的元素。map()还会为函数传入两个参数：第一个参数就是该元素在匹配元素中的索引，第二个参数就是该元素。

每次执行callback函数的返回值将做为结果数组中的一个元素，若是函数的返回值为null或undefined，则不会被添加到结果数组中。map()函数的返回值就是封装该结果数组的jQuery对象。

 

map()函数的返回值为jQuery类型，返回封装指定函数执行结果的数组的jQuery对象。

 

通常经过get()方法来获取jQuery对象中封装的整个数组或数组的某个元素。

 

示例&说明 如下面这段HTML代码为例： <input id="n1" name="uid" type="checkbox" checked="checked" value="1">
<input id="n2" name="uid" type="checkbox" checked="checked" value="2">
<input id="n3" name="uid" type="checkbox" value="3">
<input id="n4" name="uid" type="checkbox" checked="checked" value="4"> 如下jQuery示例代码用于演示map()函数的具体用法： var $checkedUid = $("[name=uid]:checked"); // 将全部匹配元素的value值封装为结果数组，并返回封装了这个结果数组的jQuery对象
var $result = $checkedUid.map( function(index, element){     // 函数内部的this === element
    return this.value;   } ); // 输出封装的结果数组中索引为1的元素
document.writeln( $result.get( 1 ) ); // 2 // 获取封装的整个结果数组
var array = $result.get(); document.writeln( array ); // 1,2,4

 

jQueryObject.end( )

end()函数用于返回最近一次"破坏性"操做以前的jQuery对象。

当前jQuery对象多是经过调用以前的jQuery对象的特定方法建立的，使用该函数能够返回以前的jQuery对象。

该函数属于jQuery对象(实例)。

 

end()函数的返回值为jQuery类型，返回最近一次"破坏性"操做以前的jQuery对象。

 

只要调用jQuery对象的某个方法返回的是一个新建立的jQuery对象，则该操做被视为"过滤"操做或"破坏性"操做。jQuery对象的

 

add()、 addBack()、 andSelf()、 children()、 closest()、 contents()、 eq()、 filter()、 find()、 first()、 has()、 last()、 map()、 next()、 nextAll()、 nextUntil()、 not()、 parent()、 parents()、 parentsUntil()、 prev()、 prevAll()、 prevUntil()、 siblings()、 slice()、 clone()等方法均属于"破坏性"操做。

 

<p id="n1">     <span id="n2">A         <span id="n3">B</span>     </span>     <span id="n4">C         <label id="n5">D</label>             </span>
</p> 如下jQuery示例代码用于演示end()函数的具体用法： var $p = $("p"); //这是一个破坏性操做，返回一个新的jQuery对象
var $p_span = $p.find("span"); document.writeln( $p_span.end() === $p ); // true //这不是一个破坏性操做，css()和attr()返回的都是原jQuery对象，并无建立一个新的jQuery对象
var $me = $p.css("color", "#333").attr("uid", "12"); document.writeln( $me.end() === $p ); // false // $me和$p是同一个jQuery对象
document.writeln( $me === $p ); // true

var $span = $("span"); // 这是一个破坏性操做，虽然没有过滤掉任何元素，但返回的是一个新的jQuery对象
var $newSpan = $span.not(".foo"); document.writeln( $newSpan.end() === $span ); // true // 若是以前没有破坏性操做，可能返回包含document的jQuery对象或空的jQuery对象(视具体状况而定)
document.writeln( $("label").end().length ); // 1 (document对象)
document.writeln( $("#n1").end().length ); // 0
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程