jQuery筛选

用JQuery筛选方法,我们平常要获取元素中的数据和改变元素的样式就很简单了,下面我使用几个方法说明。

引用JQuery插件。
HTML代码:

<div class="container"> 
        <ul id="myjq">
            <li>作者</li>
            <li>理论</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>著作</li>
        </ul>
    </div>

1、eq(index|-index)
描述:获取当前链式操作中第N个jQuery对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个。当参数为负数时为反向选取,比如-1为倒数第一个。类似的有get(index),不过get(index)返回的是DOM对象。
参数说明:index 一个整数,指示元素基于0的位置,这个元素的位置是从0算起。
-index 一个整数,指示元素的位置,从集合中的最后一个元素开始倒数。(-1算起)
jQuery 代码:

$("#myjq li").eq(1).css('color', 'red');// <li>理论</li>字体颜色红色
$("#myjq li").eq(-2).css('color', 'blue');// <li>jQuery</li>字体颜色蓝色

2、first()
描述:获取第一个元素
jQuery 代码:

$("li").first().css('font-size', 20);//设置字体大小

3、last()
描述:获取最后个元素
jQuery 代码

$("li").last().css('font-size', 30);//设置字体大小

4、filter(expr|obj|ele|fn)
描述:筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
HTML代码:

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery 代码

$("p").filter(".selected")//保留带有select类的元素
$("p").filter(".selected, :first")//保留第一个以及带有select类的元素

HTML代码:

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

jQuery 代码

$("p").filter(function(index) {
    return $("ol", this).length == 0;
 });

其实还有很多方法可以用的,详细的见jQuery API文档,我这些这是粗略总结。
1、2、3方法的结果图片:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值