美文网首页JAVA学习我爱编程
jQuery笔记（三）-- 使用过滤器

jQuery笔记（三）-- 使用过滤器

作者: 寒桥 | 来源:发表于2017-11-09 10:20 被阅读47次

jQuery选择器能够模仿CSS和XPath语法，提供高效、准确匹配元素的方法，jQuery过滤器是一系列简单，实用的jQuery对象，建立在选择器基础上对jQuery对象进行二次过滤。在jQuery框架中，过滤器通过Sizzle.filter子类实现，包含过滤、查找和串联三类操作行为

1、过滤

过滤是对jQuery对象所包含的元素进行再筛选的操作，jQuery过滤方法主要包括8种：

过滤方法 说明
eq(index) 获取第N个元素
hasClass(class) 检查当前的元素是否包含某个特定的类，如果有则返回true
filter(expr) 筛选出与指定表达式匹配的元素集合
is(expr) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
map(callback) 将一组元素转换成其他数组（不论是否是元素数组）
has(expr) 保留包含特定后代的元素，去掉那些不含有指定后代的元素
not(expr) 删除与指定表达式匹配的元素
slice(start,[end]) 选取一个匹配的子集
  • 类过滤：就是根据元素的类特性进行过滤操作，hasClass(className)
  • 下表过滤：可以精确找出jQuery对象中指定下表为止的元素，eq(index)，参数index是一个整数值，从0开始，用来指定元素在jQuery对象中的下标位置
  • 表达式过滤：是最强大的过滤工具，因为表达式具有较大的灵活性，只要表达式符合jQuery选择器语法形式，可以是简单的选择符，也可以是复合型选择器。
    • filter()：接受表达式参数的filter(expr)、接受函数参数的filter(fn)
    • has()：是一个轻便的过滤器，没有filter()复杂，它保留包含特定后代的元素，去掉那些不含有指定后代的元素。
  • 判断：is(expr)方法不直接过滤元素，仅作为一个检测工具判断jQuery对象是否包含特定条件的元素
  • 映射：map()方法能够把jQuery对象中每个元素映射到一个新的jQuery对象中，map(callback)
  • 清除：not(expr)方法能从jQuery对象中删除符合条件的元素，并返回清除后的jQuery对象
  • 截取：slice()方法能够从jQuery对象中截取部分元素，并把这个被截取的元素集合装在一个新的jQuery对象中返回，用法：slice(start,[end])。参数start表示开始选取子集的位置，第一个元素的0，若该参数是负数，则表示从集合尾部开始选起。end是一个可选参数，表示选取结束的位置，如果不指定，则表示到集合的结尾，但不包括end所指定位置的元素

使用过滤器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $("p").filter(function () {
            return $("span", this).length == 2;
        }).css("background-color","blue");
        $("p").has("span.red").css("background-color","red");
    })
    </script>
    <title>使用过滤器</title>

</head>
<body>

<p><span class="red">床前明月光，疑是地上霜。</span></p>
<p><span>举头望明月，</span><span>低头思故乡。</span></p>
<p>独在异乡为异客，每逢佳节倍思亲。</p>
<p>遥知兄弟登高处，遍插茱萸少一人。</p>
</body>
</html>

map映射：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $("#submit").click(function () {
            $("p").html("<h2>提交信息</h2>").append($("input").map(function () {
                return $(this).val();
            }).get().join("、 "));
        })
    })
    </script>
    <title>map映射</title>
</head>
<body>
<form action="#">
    用户名<input type="text" name="name" value="zhangsan" /><br><br>
    密码<input type="password" name="password" value="12345678" /><br><br>
    网址<input type="text" name="url" value="http://www.baidu.com" /><br><br>
    <button id="submit">提交</button>
</form>


<p></p>
</body>
</html>

2、查找

查找操作主要是以jQuery对象为基础，查找父级、同级或者下级相关元素，以便实现延伸筛选，增强对文档的控制能力。jQuery中的查找方法主要包括16种

查找方法 说明
add(expr,[context]) 把与表达式匹配的元素添加到jQuery对象中
children([expr]) 取得一个匹配的元素集合中每一个元素的所有子元素的元素集合
closest(expr,[context]) 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
contents() 查找匹配元素内部所有的子节点(包括文本节点)
find(expr) 搜索所有与指定表达式匹配的元素
next([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
nextAll([expr]) 查找当前元素之后所有的同辈元素
nextUntil([seletor]) 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
offsetParent() 返回第一个匹配元素用于定位的父节点
parent([expr]) 取得一个包含所有匹配元素的唯一父元素的元素集合
parents([expr]) 取得一个包含所有匹配元素的祖先元素的元素集合(不包含根元素)
parentsUntil([seletor]) 查找当前元素的所有父辈元素，直到遇到匹配的那个元素为止
prev([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
prevAll([expr]) 查找当前元素之前所有的同辈元素
prevUntil([seletor]) 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的唯一同辈元素的元素集合
  • 向下查找
    • children()方法能够查找当前元素的所有或者部分子元素，用法childern(expr)
    • contents()方法不仅可以获取子元素也可以获取文本节点和注释节点，该方法没有参数，功能等同于DOM的childNodes
    • find()方法能够查找所有后代元素，而childern()方法仅能够查找子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        var j = $("body > div");
        alert(j.children("div").length); // 返回3个div元素
        alert(j.find("div").length); // 返回5个div元素
        alert(j.contents().length); // 返回7个元素，包括5个div元素，2个文本节点（空格）
    })
    </script>
    <title>向下查找</title>
</head>
<body>
<div>
    <div>
        <div></div>
        <div>  </div>
    </div>
    <div></div>
    <div></div>
</div>

</body>
</html>
  • 向上查找
    • parents()方法能够查找所有匹配元素的祖先元素
    • parent()方法是对parents()方法的延伸，它可以取得一个包含着所有匹配元素的唯一父元素的元素集合。用法parent([expr])
    • parentsUntil()方法可以查找指定范围的所有祖先元素，相当于在parents()方法返回集合中截取部分祖先元素。用法parentsUntil([selector]) 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
//        $("img").parents().css({"border":"solid 1px red", "margin":"10px"});
        $("img").parent().css({"border":"solid 1px red", "margin":"10px"});
//        alert($("img").parents().length); // 返回4，分别是span、div、body和html
        alert($("img").parent().length); // 返回2，分别是span和div
        $("img").parent().each(function () {
            alert(this.nodeName); // 提示SPAN和DIV
        })

    })
    </script>
    <style type="text/css">
        img {height: 200px; width: 200px;}
    </style>
    <title>向上查找</title>
</head>
<body>
<div>
    <span>
        <img src="../resource/test_image.jpeg">
    </span>
    <img src="../resource/test_image.jpeg">
</div>
</body>
</html>
  • 向前查找
    • prev()方法能够匹配前一个相邻元素。用法prev([expr])
    • prevAll()方法能够向前选取所有相邻的同辈元素。用法prevAll([expr])
    • prevUntil()方法能够向前选取指定范围的相邻元素。用法prevUntil([selector])
  • 向后查找
    • next()方法仅能够匹配后一个相邻的元素。用法next([expr])
    • nextAll()方法能够向后查找所有同辈元素。用法nextAll([expr])
    • nextUntil()方法能够向后查找指定范围内的同辈元素。用法nextUntil([selector]) 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
//        $(".red").prev().css("border","solid 1px red");
//        $(".red").prevAll("p").css("border","solid 1px red");
//        $(".red").prevUntil("h1").css("border","solid 1px red");
//        $(".red").next("p").css("border","solid 1px red");
//        $(".blue").nextAll("p").css("border","solid 1px red");
//        $(".blue").nextUntil(".red").css("border","solid 1px red");
        // 查找同辈元素
//        $(".red").siblings("p").css("border","solid 1px red");
        // 添加查找
//        $(".red").siblings("p").add("h1,h2").css("border","solid 1px red");
        $(".red").siblings().css("border","solid 1px red");
    })
    </script>
    <title>向前向后查找</title>
</head>
<body>
<h1>回乡偶书</h1>
<h2>贺知章</h2>
<p class="blue">少小离家老大回</p>
<p>乡音未改鬓毛衰</p>
<p class="red">儿童相见不相识</p>
<p>笑问客从何处来</p>
</body>
</html>
  • 查找同辈元素
    • siblings()方法可以查找所有兄弟元素，不管其位置在前还是在后。用法siblings([expr])
  • 添加查找
    • 使用add()方法可以为查找的结果集添加新的查找内容。用法：add(expr,[context])

3、串联

jQuery链式语法能够实现在一行代码中完成各种复杂的任务。但是在很多情况下用户希望jQuery方法能够操作不同的jQuery对象，或者前后方法能够相互影响，为此jQuery提供了两个串联方法：addBack()和end()

  • 合并jQuery对象addBack()
  • 返回jQuery()对象end() 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
//        $("div").find("p").addBack().css({"border":"solid 1px red","margin":"4px"})
        // 当调用find("p).css()之后，再调用end()方法返回$("div")方法匹配的jQuery对象，而不是find()方法所查找到的jQuery
        $("div").find("p").css({"border":"solid 1px red","margin":"4px"}).end().css({"background":"blue","color":"white","padding":"4px"});
    })
    </script>
    <title>串联</title>
</head>
<body>
<div>
    <p>少小离家老大回，乡音未改鬓毛衰。</p>
    <p>儿童相见不相识，笑问客从何处来。</p>
</div>
</body>
</html>

相关文章

网友评论

    本文标题：jQuery笔记（三）-- 使用过滤器

    本文链接：https://www.haomeiwen.com/subject/nlkpmxtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    JAVA学习

    我爱编程

    关于我们|服务条款|联系我们|jQuery笔记（三）-- 使用过滤器|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！