JAVA学习我爱编程

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

2017-11-09  本文已影响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]) 选取一个匹配的子集

使用过滤器：

<!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]) 取得一个包含匹配的元素集合中每一个元素的唯一同辈元素的元素集合 
<!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>

<!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>

<!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>

3、串联

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

猜你喜欢

热点阅读