使用jQuery管理选择结果

2020-05-23 06:09:11易采站长站整理

        <div class=”middle”></div>
        <div class=”middle”></div>
        <div></div>

以上代码中其中4个class属性为middle,Jq先给所有的div块都添加了css1样式,然后通过filter()方法,把class中包含middle的div添加css2样式。

在filter()的参数中,不能直接的等于匹配(=),只能使用前匹配(^=)、后匹配(&=),或者任意匹配(*=).

filter()另外一种类型的参数是函数,对于返回ture元素匹配保留,否则排除集合。函数参数功能十分强大,可以让用户自定义筛选函数。

例如:


<script type=”text/javascript”>
            $(function() {
                $(“div”).addClass(“css1”).filter(function(index) {
                    return index == 1 || $(this).attr(“id”) == “fourth”;
                }).addClass(“css2”);
            });
        </script>     
<div id=”first”></div>
    <div id=”second”></div>
    <div id=”third”></div>
    <div id=”fourth”></div>
    <div id=”fifth”></div>

以上jq执行:

将所有的div添加css1然后利用filter()返回的函数将div列表中第一个(index为1),id是fourth的div元素筛选出来,添加css2.

4.查询过滤新元素组

jq还提供了 一些很有的用的方法组合,通过查询来获取新元素组合。例如find()方法。通过匹配选择器来筛选元素

$(“p”).find(“span”)
表示查找到<p>标记下含有<span>标记的组合

完全等于


$(“span”,$(“p”))
$(function(){
    $(“p”).find(“span”).addClass(“css1”);
});

<p><span>Hello</span>, how are you?</p>

表示给Hello添加css1的样式.

另外,还可以通过is()方法来检测是否包含指定的元素,例如可以通过下面代码检测页面中<div>块中是否包含图片。

var himg = $(“div”).is(“img”);
试想下,is()还可以结合filter()使用,是不是很惬意?