Jquery筛选一览

最新推荐文章于 2022-08-01 09:49:50 发布

Byte_Dance

最新推荐文章于 2022-08-01 09:49:50 发布

阅读量443

点赞数

分类专栏： Jquery

Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

首先我们要搞清楚,筛选和选择器的区别 :

选择器是直接返回选中的对象，比如$("hid") ,这么做是使用id选择器直接返回一个对象

而筛选则是从已经找到的对象中进一步做一些选取操作,简单来说就是选择器操作的是HTML标签, 而筛选操作的是已经选取了的Jquery对象 ,

first()是从集合中返回需要的对象，不更改原来的集合，你可以对集合进行更过的过滤操作，而选择器你只能重新另外选对象了

筛选

1.过滤

eq(index)      获取对象组指定索引位置的中的元素(和选择器中的 :eq 作用差不多,区别选择器中的是
                                    在创建对象的时候进行获取,而这个在获取对象组后,调用这个方法来获取指定索引元素)
first()          获取对象组元素中的第一个索引位置的元素,(同理,也和选择器中的效果一样)
last()        获取对象组元素中的最后个索引位置的元素,(同理,也和选择器中的效果一样)
hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true。$("li").hasCLass("类名");
filter(expr | fn) 筛选出与指定表达式匹配的元素集合。$("p").filter(".类名") 筛选出选择指定类名表达式的元素
is(expr)     用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
map(callback) 将一组元素转换成其他数组（不论是否是元素数组）

has(expr) 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

$('li').has('ul').css('background-color', 'red');

not(expr) 获取对象组元素中除了指定索引位置的其他所有元素,(同理,也和选择器中的效果一样)
slice(start, [end]) 选取一个匹配的子集 $("p").slice(0, 1).wrapInner("<b></b>");

2.查找

add(expr)      一个用于匹配元素的选择器字符串,(没有获取到需要用的时候又添加上)。$("h1").add("p");
children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
contents() 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
find(expr) 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
next([expr]) 下一个同辈元素节点组 $("h1").next();
nextAll([expr]) 下边的所有同辈节点元素 $("h1").nextAll();
nextUntil([expr]) 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
                                    $('#term-2').nextUntil('dt').css('background-color', 'red');
offsetParent() 返回第一个匹配元素用于定位的父节点。
parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。
                                    可以通过一个可选的表达式进行筛选。 $("span").parents("p")

parentsUntil([expr]) 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

$('li.item-a').parentsUntil('.level-1')

prev([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的上一个同辈元素的元素集合。
prevAll([expr]) 查找当前元素之前所有的同辈元素
prevUntil([expr]) 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可
以用可选的表达式进行筛选。$("div").siblings("类名 , 元素名 , id名")

3.串联

andSelf() 第一次获取的对象过去后再次把自己添加上(自己和自己玩)

$("div").next().andSelf().addClass("border");

end() 回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

下边一个案例就指的是使用筛选来对已经生成的Jquery对象方法进行二次操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <style>
        #divid{
            background: #cbcbcb;
        }
    </style>
</head>
<body>
    <div id="divid">
        <h1>11111111111111111</h1>
        <h1>22222222222222222</h1>
        <div>
            <h1>3333333333333333333</h1>
            <h1>4444444444444444444</h1>
        </div>
    </div>

    <script>

//        比如:我们想让整个外层div单击一下就改变里边div的h1的字体颜色
//        当这个时候,我们用基础选择器就不太容易实现了,因为要选择出子类的其中一些元素,所以要配合筛选来实现
        $("#divid").click(function(){
            $(this).children("div").children("h1").css({"color":"red"});
        });
    </script>
</body>
</html>