jQuery筛选

最新推荐文章于 2022-04-21 11:15:42 发布
最新推荐文章于 2022-04-21 11:15:42 发布
阅读量879 收藏
点赞数
本文详细介绍了jQuery中的多种选择器函数，包括parents(), prev(), prevAll(), data(), is(), eq(), each(), hasClass(), first(), last(), 和 slice()等。通过实际示例展示了这些函数的使用方法及应用场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

parents()函数用于选取每个匹配元素的祖先元素，并以jQuery对象的形式返回。

你还可以使用选择器来进一步缩小选取范围，只选取其中符合指定选择器的元素。

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

语法

jQueryObject.parents( [ selector ] )

参数

参数 描述
selector 可选/String类型指定的选择器字符串，用于筛选匹配的元素。

parents()函数将选取当前jQuery对象每个匹配元素的符合选择器selector的祖先元素。

如果省略selector参数，则选取所有的祖先元素。

返回值

parents()函数的返回值为jQuery类型，返回一个新的jQuery对象，该对象封装了当前jQuery对象每个匹配元素的符合选择器selector(如果指定了的话)的所有祖先元素。

如果没有符合条件的元素，则返回空的jQuery对象。

示例&说明

以下面这段HTML代码为例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery.parents() 函数详解</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
       $(function(){
           /*扩展jQuery对象，添加showTagInfo()方法  用于将jQuery对象所有匹配元素的标识信息追加到body元素内  每个元素的标识信息形如："tagName"或"tagName#id"*/
           jQuery.fn.showTagInfo=function(){
               var tags=this.map(function () {
                   return this.tagName+(this.id?"#"+this.id:"");
               }).get();
               $('body').append(tags.join("<br>")+"<br><br>");
           };
           var $n4=$('#n4');
           /*获取n4的祖先元素*/
           var $parents1=$n4.parents();
           $parents1.showTagInfo();
           var $p=$('p');
           /*获取所有p元素的祖先元素*/
           var $parents2=$p.parents();
           $parents2.showTagInfo();
           /*获取所有p元素的包含类名"bar"的祖先元素*/
           var $parents3=$p.parents('.bar');
           $parents3.showTagInfo();
           var $foo=$('.foo');
           /*获取所有包含类名"foo"的元素的祖先元素中的div元素*/
           var $parents4=$foo.parents('div');
           $parents4.showTagInfo();
       });

    </script>
</head>
<body>
<div id="n1">
    <p id="n2"></p>
    <p id="n3"><span id="n4" class="foo"></span></p>
</div>
<div id="n5" class="bar">
    <p id="n6" class="foo"></p>
</div>
</body>
</html>

prev()函数用于筛选每个匹配元素之前紧邻的同辈元素，并以jQuery对象的形式返回。

你还可以使用指定的选择器进一步缩小筛选范围，筛选出符合指定选择器的元素。

与该函数相对的是next()函数，用于筛选每个匹配元素之后紧邻的同辈元素。

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

语法

jQueryObject.prev( [ selector ] )

参数

参数 描述
selector 可选/String类型指定的选择器字符串。

prev()函数将在当前jQuery对象每个匹配元素的上一个相邻的同辈元素中筛选符合指定选择器的元素。

如果省略selector参数，则选取每个匹配元素的上一个相邻的同辈元素。

返回值

prev()函数的返回值为jQuery类型，返回一个新的jQuery对象，该对象封装了当前jQuery对象所有匹配元素的上一个紧邻的符合指定选择器的同辈元素。

如果没有符合条件的元素，则返回空的jQuery对象。

示例&说明

以下面这段HTML代码为例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery.prev() 函数详解b</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
           /*扩展jQuery对象 添加showTagInfo()方法 用于将jQuery对象所有匹配元素的标识信息追加到body元素内 每个元素的标识信息形如："tagName"或"tagName#id"*/
            jQuery.fn.showTagInfo=function(){
                var tags=this.map(function () {
                    return this.tagName+(this.id?"#"+this.id:"");
                }).get();
                $('body').append(tags.join("<br>")+"<br><br>");
            }
            /*匹配所有span元素：e2 e3 e4 e5 e7 e9*/
            var $span=$('span');
            var $span_prev=$span.prev();
            $span_prev.showTagInfo();
            /*匹配所有span元素之前相邻的同辈span元素*/
            var $span_prev_span=$span.prev('span');
            $span_prev_span.showTagInfo();
        });
    </script>
</head>
<body>
<p id="e1">
   <span id="e2" class="site">
      <span id="e3" class="item site-name">CodePlayer</span>
      <span id="e4" class="item site-desc">专注于编程开发技术分享</span>
   </span>
    <span id="e5" class="site-url">http://www.365mini.com</span>
</p>
<p id="e6">
    JavaScript<span id="e7" class="highlight">jQuery</span>
    <a id="e8" href="http://www.365mini.com">CodePlayer</a>
    <span id="e9" class="highlight">PHP</span>
</p>
</body>
</html>

prevAll()函数用于选取每个匹配元素之前的所有同辈元素，并以jQuery对象的形式返回。

你还可以使用选择器来进一步缩小选取范围，筛选出符合指定选择器的元素。

与该函数相对的是nextAll()函数，用于选取每个匹配元素之后的所有同辈元素。

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

语法

jQuery 1.2 新增该函数。

jQueryObject.prevAll( [ selector ] )

参数

参数 描述
selector 可选/String类型指定的选择器字符串。

prevAll()函数将在当前jQuery对象每个匹配元素之前的同辈元素中筛选符合指定选择器的元素。

如果省略selector参数，则选取每个匹配元素之前的所有同辈元素。

返回值

prevAll()函数的返回值为jQuery类型，返回一个新的jQuery对象，该对象封装了当前jQuery对象每个匹配元素之前的所有符合指定选择器的同辈元素。

如果没有符合条件的元素，则返回空的jQuery对象。

示例&说明

以下面这段HTML代码为例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery.prevAll() 函数详解</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /*扩展jQuery对象 添加showTagInfo()方法 用于将jQuery对象所有匹配元素的标识信息追加到body元素内 每个元素的标识信息形如："tagName"或"tagName#id"*/
            jQuery.fn.showTagInfo=function(){
                var tags=this.map(function () {
                    return this.tagName+(this.id?"#"+this.id:"");
                }).get();
                $('body').append(tags.join("<br>")+"<br><br>");
            }
            var $n6=$('#n6');
            /*匹配n6之前所有的同辈元素*/
            var $n6_prevAll=$n6.prevAll();
            $n6_prevAll.showTagInfo();
            /*匹配n6之前的所有同辈strong元素*/
            var $n6_prevAll_strong=$n6.prevAll('strong');
            $n6_prevAll_strong.showTagInfo();
            var $label=$('label');
            /*匹配所有label元素之前的包含类名"active"的同辈元素*/
            var $label_prevAll_active=$label.prevAll('.active');
            $label_prevAll_active.showTagInfo();
        })
    </script>
</head>
<body>
<p id="n1">
   <span id="n2">
      <span id="n3">A</span>
   </span>
    <strong id="n4" class="active">B</strong>
    <span id="n5" class="active">C</span>
    <label id="n6">D</label>
   <span id="n7">
      <span id="n8">E</span>
   </span>
</p>
<p id="n9">
    <span id="n10" class="active"></span>
    <label id="n11"></label>
    <span id="n12"></span>
</p>
</body>
</html>

data()函数用于在当前jQuery对象所匹配的所有元素上存取数据。

通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。

该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，请使用removeData()函数。

语法

data()函数有以下两种用法：

用法一：

jQueryObject.data( [ key [, value ] ])

以指定的键名key存取数据。如果指定了value参数，则表示以键名key存放值为value的数据；如果没有指定value参数，则表示读取之前以键名key存放的数据；如果没有指定任何参数，则以对象形式返回之前存储的所有数据。

用法二：

jQueryObject.data( object )

以对象形式同时传入任意多个key-value形式的数据，对象的每个属性就是键名key，属性值就是value。

注意：data()函数的所有"存储数据"操作针对当前jQuery对象所匹配的每一个元素；所有"读取数据"操作只针对第一个匹配的元素。

参数

请根据前面语法部分所定义的参数名称查找对应的参数。

参数 描述
key 可选/String类型指定的键名字符串。
value 可选/任意类型需要存储的任意类型的数据。
object Object类型指定的对象，用于封装多个键值对，同时存储多项数据。

返回值

data()函数的返回值是任意类型，返回值的类型取决于当前data()函数执行的是"存储数据"操作还是"读取数据"操作。

如果data()函数执行的是"存储数据"操作，则返回当前jQuery对象本身；如果是"读取数据"操作，则返回读取到的数据。

如果当前jQuery对象匹配多个元素，读取数据时，data()函数只以其中第一个匹配的元素为准。

如果执行data(key)函数(仅传入一个参数key)时找不到相应的数据，则返回undefined。如果执行data()函数(不带任何参数)时找不到相应的数据，则返回一个空的对象(没有任何属性)。

示例&说明

以下面这段HTML代码为例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery.data() 函数详解</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
           /*在当前页面内追加换行标签和指定的HTML内容*/
            function w(html){
                $(document.body).append("<br>"+html);
            }
            var $li=$('li');
            /*同时向所有的li元素存储数据*/
            $li.data('name','CodePlayer');
            $li.data('desc','专注于编程开发技术分享');
            $li.data('url','http://www.365mini.com/');
            var $n5=$('#n5');//通过n4 n5 n6都可以读取数据
            /*返回键值对name所对应的数据*/
            w($n5.data('name'));
            /*以对象的形式返回所有数据*/
            var obj=$('#n6').data();
            for(var i in  obj){
                w(i+"="+obj[i]);
            }
            /*移除掉n4上存储的键名为name的数据*/
            $('#n4').removeData('name');
            /*虽然$li匹配3个li元素，但是读取数据只以第一个li元素n4为准,因此返回undefinded*/
            w($li.data('name'));
            var object={
                name:"张三",
                age:18,
                score:[87,23,56],
                options:{gender:'男',address:'水帘洞'}
                /*同时向所有的div元素以对象形式设置对个key-value数据  value值可以是任意类型的数据 包括数组，对象等*/
            }
            $('div').data(object);
            var $n2=$('#n2');
            w($n2.data('name'));
            w($n2.data('age'));
            w($n2.data('score'));
            w($n2.data('options'));
        });
    </script>
</head>
<body>
<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>
</body>
</html>

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

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

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

语法

jQueryObject.is( expr )

参数

参数 描述
expr String/Element/jQuery/Function类型指定的表达式。

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代码为例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery.is() 函数详解</title>
</head>
<body>
<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>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
    $(function(){
       /*在当天页面内追加换行标签和指定的HTML内容*/
        function w(html){
            $(document.body).append("<br>"+html);
        }
        var $n3=$('#n3');
        w($n3.is("ul"));
        w($n3.is('[data_id]'));
        var $n5=$('#n5');
        w($n5.is('.foo'));
        w($n5.is('li'));
        w($n5.is('ul li'));
        w($n5.is('p li'));
        var n5=document.getElementById('n5');
        w($n5.is(n5));
        var $li=$('li');
        w($n5.is($li));
        /*判断li元素是否含有类名"level-index"，这里的index表示li元素的索引值(0、1、2……)*/
        w($li.is(function(index){
            return $(this).hasClass('level-'+index);
        }));
        var $input=$('input');
        w($input.is(':text'));
        w($input.is(':checked'));
        var div=document.getElementsByTagName('div');
        var $n7=$('#n7');
        w($n7.is(div));
    });
</script>
</html>

eq()函数用于获取当前jQuery对象所匹配的元素中指定索引的元素，并返回封装该元素的jQuery对象。

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

语法

jQuery 1.1.2 新增该函数。

jQueryObject.eq( index )

参数

参数 描述
index Number类型指定的索引值，从0开始计数。

jQuery 1.4 新增支持：参数index可以为负数。如果index为负数，则将其视作length + index，这里的length指的是匹配到的元素的个数(负数的index也可理解为从后往前计数)。

返回值

eq()函数的返回值为jQuery类型，返回封装了指定索引index处的元素的jQuery对象。

如果索引值超出有效范围，则返回空的jQuery对象。

示例&说明

eq()函数与:eq()选择器具有如下等价代码：

$( "selector" ).eq( index );
//等价于
$( "selector:eq(index)" );

以下面这段HTML代码为例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery.eq() 函数详解</title>
</head>
<body>
<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>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    /*在当前页面内追加换行标签和指定的HTML内容*/
   $(function(){
       function w(html){
           $(document.body).append('<br>'+html);
       }
       /*匹配n4 n5 n6 n9 n10这5个元素*/
       var $li=$('li');
       /*获取匹配到的第二个元素 即：n5*/
       var $n5=$li.eq(1);
       w($n5.attr('id'));//attr() 方法设置或返回被选元素的属性和值。
       /*获取匹配到的第四个元素 即：n9*/
       var $n9=$li.eq(3);
       w($n9.attr('id'));
       /*获取匹配的第-3个元素 即n6*/
       var $n6=$li.eq(-3);
       w($n6.attr('id'));
   });
</script>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery：遍历求和</title>
</head>
<body>
<table width="100%" border="0" class="table_sum">
    <tr><td colspan="2">产品1号(table的class=num_sum)</td></tr>
    <tr>
        <td>数量</td>
        <td>单价</td>
    </tr>
    <tr>
        <td>10</td>
        <td>2</td>
    </tr>
    <tr>
        <td>20</td>
        <td>3</td>
    </tr>
    <tr>
        <td>合计</td>
        <td class="sum">5(JQUERY自动计算结果,td的class=sum)</td>
    </tr>
</table>
<table width="100%" border="0" class="table_sum">
    <tr><td colspan="2">产品2号(table的class=num_sum)</td></tr>
    <tr>
        <td>数量</td>
        <td>单价</td>
    </tr>
    <tr>
        <td>10</td>
        <td>6</td>
    </tr>
    <tr>
        <td>20</td>
        <td>7</td>
    </tr>
    <tr>
        <td>合计</td>
        <td class="sum">13(JQUERY自动计算结果,td的class=sum)</td>
    </tr>
</table>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
  /*遍历class="table_sum"的表 判断tr中的第一个td是不是数字 是数字的话就计算第二个td的值  最后把结果放到该表的class="sum"的td格中*/
    $(function(){
       $('.table_sum').each(function(){//each()函数用于以当前jQuery对象匹配到的每个元素作为上下文来遍历执行指定的函数。所谓的上下文，意即该函数内部的this指针引用了该元素。
           var sum=0;
           $('tr',this).each(function(){
               if(Number($('td',this).eq(0).html())>=0){//Number() 函数把对象的值转换为数字。
                   sum+=Number($('td',this).eq(0).html());
               }
           })
           $('.sum',this).html(sum);
       })
    });
</script>
</html>

each()函数用于以当前jQuery对象匹配到的每个元素作为上下文来遍历执行指定的函数。

所谓的上下文，意即该函数内部的this指针引用了该元素。

该函数属于jQuery对象(实例)。请注意，这与全局jQuery对象的each()函数不同。

语法

jQueryObject.each( callback )

参数

参数 描述
callback Function类型指定的用于循环执行的函数。

each()函数将根据匹配到的每一个元素循环调用函数callback。每次调用函数callback时，each()函数都会将callback函数内部的this引用指向当前正在迭代的元素，并为其传入两个参数。第一个参数是当前迭代元素在匹配到的元素中的索引值(从0开始计数)，第二个参数是当前迭代元素(与this的引用相同)。

each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。

返回值

each()方法的返回值为jQuery类型，返回当前jQuery对象本身。

示例&说明

以下面这段HTML代码为例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery.each() 函数详解</title>
</head>
<body>
<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>
<form id="demoForm">
    <input name="goods_weight" type="checkbox" value="20">A(20kg)<br>
    <input name="goods_weight" type="checkbox" value="33">B(33kg)<br>
    <input name="goods_weight" type="checkbox" value="36">C(36kg)<br>
    <input name="goods_weight" type="checkbox" value="49">D(49kg)<br>
    <input name="goods_weight" type="checkbox" value="56">E(56kg)<br>
    <input name="goods_weight" type="checkbox" value="78">F(78kg)<br>
    <input id="btnBuy" type="button" value="订购">
</form>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function(){
        $('ul li').each(function(index,element){
            $(element).html('编号'+(index+1));
        })
        $('#btnBuy').click(function(){
            var weight=0;
            $('[name=goods_weight]:checked').each(function(){
                weight+=parseInt(this.value);// this === element
                if(weight>100){//重量超标 停止循环
                    return false;
                }
            });
            if(weight <= 0){
                alert("没有选择任何商品!");
            }else if(weight > 100){
                alert("一次订购的商品重量不能超过100kg!");
            }else{
                // 订购商品
                alert("订购商品成功!");
            }
        });
    });
</script>
</html>

hasClass()函数用于指示当前jQuery对象所匹配的元素是否含有指定的css类名。

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

语法

jQuery 1.2 新增该函数。

jQueryObject.hasClass( className )

参数

参数 描述
className String类型指定的css类名。

返回值

hasClass()函数的返回值是Boolean类型，返回表示是否包含指定css类名的boolean值，如果包含就返回true，否则返回false。

如果当前jQuery对象匹配多个元素，只要其中有任意一个元素含有指定的css类名，就返回true。

示例&说明

hasClass(className)函数等价于is(".className")：

$element.hasClass( className );
// 等价于
$element.is( "." + className );

以下面这段HTML代码为例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery.hasClass() 函数详解</title>
</head>
<body>
<div id="n1">
    <p id="n2" class="site-name">CodePlayer</p>
    <p id="n3" class="foo bar demo">专注于编程开发技术分享</p>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function(){
        /*在当前页面内追加换行标签和指定的html内容*/
      function w(html){
          $(document.body).append('<br>'+html);
      }
        var $n2=$('#n2');
        w($n2.hasClass('site-name'));
        var $n3=$('#n3');
        w($n3.hasClass('bar'));
        /*不存在该css类名 返回false*/
        w($n3.hasClass('noClass'));
        var $p=$('p');
        /*只要jQuery对象匹配的元素中有任意一个元素包含指定的css类名 即返回true*/
        w($p.hasClass('site-name'));
        w($p.hasClass('foo'));
    });
</script>
</html>

first()函数用于获取当前jQuery对象所匹配的元素中的第一个元素，并返回封装该元素的jQuery对象。

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

语法

jQuery 1.4 新增该函数。

jQueryObject.first( )

返回值

first()函数的返回值为jQuery类型，返回封装了第一个匹配元素的jQuery对象。

如果当前jQuery对象没有匹配任何元素，自然也不存在第一个匹配到的元素，此时将返回空的jQuery对象。

示例&说明

first()函数与:first选择器具有如下等价代码：

$( "selector" ).first( );
//等价于
$( "selector:first" );
//等价于
$( "selector:eq(0)" );
//等价于
$( "selector" ).eq( 0 );

以下面这段HTML代码为例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery.first() 函数详解</title>
</head>
<body>
<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5" class="list">item2</li>
            <li id="n6" class="list">item3</li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function(){
       /*在当前页面内追加换行标签和指定的HTML内容*/
        function w(html){
            $(document.body).append('<br>'+html);
        }
        /*获取第一个li元素 即：n4*/
        /*先匹配所有的li元素 再获取其中的第一个*/
        w($('li').first().attr('id'));//attr():设置或返回被选元素的属性和值
        /*获取第一个li.list元素，即：n5*/
        /*先匹配所有的li.list元素 再获取其中的第一个*/
        w($('li.list').first().attr('id'));
        /*获取第1个div元素 即：n1  先匹配所有的div元素 再获取其中的第一个*/
        w($('div').first().attr('id'));
    });
</script>
</html>

last()函数用于获取当前jQuery对象所匹配的元素中的最后一个元素，并返回封装该元素的jQuery对象。

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

语法

jQuery 1.4 新增该函数。

jQueryObject.last( )

返回值

last()函数的返回值为jQuery类型，返回封装了最后一个匹配元素的jQuery对象。

如果当前jQuery对象没有匹配任何元素，自然也不存在所谓的最后一个元素，此时将返回空的jQuery对象。

示例&说明

last()函数与:last选择器具有如下等价代码：

$( "selector" ).last( );
//等价于
$( "selector:last" );

以下面这段HTML代码为例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery.last() 函数详解</title>
</head>
<body>
<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4" class="list">item1</li>
            <li id="n5" class="list">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function () {
       /*在当前页面内追加换行标签和指定的HTML内容*/
        function w(html){
            $(document.body).append('<br>'+html);
        }
        /*获取最后一个li元素 即：n6  先匹配所有li元素 再获取其中的最后一个*/
        w($('li').last().attr('id'))//attr():设置或换回被选元素的属性和值
        /*获取最后一个li.list元素 即：n5  先匹配所有li.list元素 再获取其中的最后一个*/
        w($('li.list').last().attr('id'));
        /*获取最后一个div元素 即：n2  先匹配所有div元素 再获取其中的最后一个*/
        w($('div').last().attr('id'))
    });
</script>
</html>

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

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

语法

jQuery 1.1.4 新增该函数。

jQueryObject.slice( startIndex [, endIndex ] )

参数

参数 描述
startIndex Integer类型指定选取的起始索引，从0开始算起。
endIndex 可选/Integer类型指定的结束索引(不包括该索引位置的元素)。

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

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

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

返回值

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

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

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

示例&说明

请参考下面这段HTML演示代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery.slice() 函数详解</title>
</head>
<body>
<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>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function(){
        /*扩展jQuery对象 添加showTagInfo()方法 用于将jQuery对象所有匹配元素的标识信息追加到body元素内 每个元素的标识信息形如:"tagName"或"tagName#id"*/
        jQuery.fn.showTagInfo=function(){
            var tags=this.map(function(){
                return this.tagName+(this.id?"#"+this.id:"");
            }).get()
            $('body').append(tags.join('<br>')+'<br><br>');
        }
        /* $("li") 匹配n4、n5、n6、n7、n8这5个元素 */
        //选取第二元素
        $('li').slice(1,2).showTagInfo();
        //获取第四 五个元素
        $("li").slice( 3 ).showTagInfo();

        //选取第1~4个元素
        //startIndex = length + (-5) = 0，endIndex = length + (-1) = 4
        $("li").slice( -5,  -1).showTagInfo( ); // LI#n4,LI#n5,LI#n6,LI#n7
    });
</script>
</html>

Vip宅男
关注
jQuery 筛选查找
vvvac1314的专栏
10-23 1154
children([expr]) 概述 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。 参数 expr (可选)String 用以过滤子元素的表达式 示例 描述: 查找DIV中的每个子元
Jquery的筛选
snowlLXM的博客
12-01 640
1.eq(index|-index)表示：获取第N个元素。 请注意： index表示一个整数，指示元素基于0的位置,这个元素的位置是从0算起。 -index表示：一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(1算起) 2.first()表示：获取第一个元素。 3.last()表示：获取最后一个元素。 4.hasClass(class)表示：检查当前的元素是否含有某个特定的
jQuery 筛选器简单操作示例
10-16
本文将详细介绍jQuery筛选器的简单操作，包括对元素、字符串、属性等的操作技巧和注意事项。 首先，我们要了解的是基本的元素选择。使用$(this)可以选取当前被操作的元素，这是jQuery中最基础的筛选方法之一。接...
JQuery筛选
05-01
**jQuery筛选**是一种在网页开发中广泛使用的技巧，它允许开发者高效地操作DOM（文档对象模型）中的元素，实现各种动态效果和数据处理。在这个场景中，我们关注的是如何使用jQuery来实现城市名称按首字母排序的功能...
JQuery筛选器全系列介绍
01-19
1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素。例如：$(“#id”)·element 根据给定的元素名匹配所有元素。例如：$(“div”)·.class 根据给定的类匹配元素。例如：$(“.style1”);·* 匹配所有元素。...
jquery插件库-jquery筛选排序插件listnav.zip
03-15
"jquery插件库-jquery筛选排序插件listnav.zip"就是一个这样的插件，它专注于列表的筛选和排序功能，对于构建有大量数据展示的网页非常有用。 ListNav插件是jQuery的一个扩展，主要针对那些含有大量列表项（如或...
筛选-文档处理
long_2004的博客
04-21 310
筛选-文档处理1.过滤2.查找3.文档处理 1.过滤 (1).过滤：在jQuery对象数组中，过滤出一部分元素 ： // 1)、首先获取ul中所有的li子元素，即会产生一个li数组uls。然后： // var asd = $("ul>li"); // 2)、first()：获取数组uls中的第一个元素，即第一个li标签. // asd.first().css({"background":"yellow"}); // 3)、last()：获取数组uls中的最后
Jquery筛选一览
Byte_Dance的博客
02-16 476
首先我们要搞清楚,筛选和选择器的区别 :选择器是直接返回选中的对象，比如$("hid") ,这么做是使用id选择器直接返回一个对象而筛选则是从已经找到的对象中进一步做一些选取操作,简单来说就是选择器操作的是HTML标签, 而筛选操作的是已经选取了的Jquery对象 , first()是从集合中返回需要的对象，不更改原来的集合，你可以对集合进行更过的过滤操作，而选择器你只能重新另外选对象了筛选 1....
jQuery筛选方法
Three_lifetime的博客
09-30 737
1，兄弟筛选选择器和方法 筛选选择器 -：first第一个 -：last最后一个子节点 -：eq(index)索引 -：even偶数索引 -：odd奇数索引 -：lt小于指定索引 -：gt大于指定索引 方法 -first() -last() -eq(index) -prev()上一个兄弟 -prevAll()上面所有的 -next()下一个兄弟 ...
Jquery 筛选
饭桶一生奋斗
01-15 816
//is()函数用于判断当前jQuery对象所匹配的元素是否符合指定的表达式 //这里的表达式包括：选择器(字符串)、DOM元素(Element)、jQuery对象、函数 //这里的expr 表示表达式 jQueryObject.is( expr )//eq()函数用于获取当前jQuery对象所匹配的元素中指定索引的元素 jQueryObject.eq( index )//first()函数用于获取
jQuery 筛选
RONG51920的博客
09-26 184
jQuery 筛选 过滤 eq：根据索引匹配元素 + -1 HTML： <ul> <li>1</li> <li>2</li> <li class="lilist">3</li> <li>4</li> <p>41</p> <...
JQuery 筛选
HelloWord176的博客
10-17 178
1.dom.eq(index)； 返回dom中索引为index的对象 2.dom.first();返回dom集合中索引为0的对象集合； 3.dom.last();获取dom集合中索引为最后一个对象的集合 4.dom.find(选择器)；返回dom后代元素中，符合表达式规则的元素集合； 5.dom.next();返回dom下一个相邻兄弟节点的集合 ...
jquery之筛选
weixin_45454695的博客
02-17 209
1.过滤 eq(index|-index) eq与nth-child eq索引从0开始，若为负数，代表倒序从最后一个开始 nth-child找的也是同级的某个元素，但是索引从1开始 console.log($("ul>li").eq(1)); console.log($("ul>li").eq(-1)); console.log($("ul>li:nth-child(1)"));...
掌握JQUERY筛选技术，提升网页交互体验
JQUERY筛选器是JQUERY中的一个核心功能，它允许开发者选择和操作DOM元素。筛选器可以基于元素的id、类、属性等多种方式进行筛选。例如，可以使用"#"加上id的方式筛选出具有特定id的元素，也可以使用"."加上类名的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值