Jquery过滤器

浏览数：54 / 时间：2015年06月09日

1.表达式过滤

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div").filter(".red").css("background-color", "#495485");
            $("p").filter(function (index) {
                return $("span", this).length == 2;
            }).css("background-color", "red");
            $("p").has("span.red").css("background-color", "#652345");
        })
    </script>
    <style type="text/css">
        div
        {
            position: absolute;
            width: 100px;
            height: 100px;
        }

        .blue
        {
            background-color: blue;
            left: 0px;
        }

        .red
        {
            background-color: red;
            left: 120px;
            z-index: 2;
        }

        .green
        {
            background-color: green;
            left: 240px;
        }

        .pos
        {
            top: 120px;
        }
    </style>
</head>
<body>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="pos"></div>
    <div class="red pos">hhhhhhhhhhhhhhhhhhhhhhhhhhhhh广泛大概</div>
    <p><span class="red">hhhhhhhhhhhhhhhhhhhhhhhh第一段文本</span></p>
    <p><span>第二段文本</span><span></span></p>
</body>
</html>

2.查找

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#menu").children(".home").css("text-decoration", "underline");

        })
    </script>
</head>
<body>
      <ul id="menu">
        <li class="home">首页</li>
        <li>论坛</li>
        <li>微博</li>
        <li>团购</li>
        <li>博客</li>
    </ul>
</body>
</html>

3.类过滤

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div").click(function () {
                if ($(this).hasClass("red"))
                    $(this)
                       .animate({ left: 120 })
                       .animate({ left: 240 })
                       .animate({ left: 0 })
                       .animate({ left: 240 })
                       .animate({ left: 120 });
            })

        })
    </script>
    <style type="text/css">
        div
        {
            position:absolute;
            width:100px;
            height:100px;
        }
        .blue
        {
           background-color:blue;
           left:0px;
        }
        .red
        {
            background-color:red;
            left:120px;
            z-index:2;
        }
        .green
        {
            background-color:green;
            left:240px;

        }
        .pos
        {
            top:120px;
        }
    </style>
</head>
<body>
    <div class="blue" ></div>
    <div class="green"></div>
    <div class="pos"></div>
    <div class="red pos" >广泛大概</div>
</body>
</html>

4.判断是否包含元素

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("p").has("span.red").css("background-color", "red");
            if ($("div").has("p")) {
                alert("当前JQuery对象中包含span子元素。");
            }
        })
    </script>
</head>
<body>    <p><span class="red">第一段文本</span></p>
    <p><span class="red">第2段文本</span><span></span></p>
    <p>第3段文本</p>

    <div class="blue"></div>
    <div class="red"></div>
    <div class="green"></div>
    <div class="black"></div>
</body>
</html>

 5.向下查找后代元素

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var j = $("body>div");
            alert(j.children("div").length);//返回3个元素
            alert(j.find("div").length);//返回5个元素
            alert(j.contents().length);//返回7个元素，5个div,2个文本节点（空格）

        })

    </script>

</head>
<body>
    <div>
        <div>
            <div></div>
            <div></div>
        </div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

6.映射清洗截取

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        //映射
        $(function () {
            $("p").append($("input").map(function () {
                return $(this).val();
            }).get().join("、       "));
      
        });
    </script>
    <script type="text/javascript">
        //清洗
        $(function () {
            $("#menu li").not(".home").css("color", "red");
        })
    </script>
    <script type="text/javascript">
        $(function () {
            $("#mn li").slice(2, 4).css("color", "red");
        })
       
    </script>
</head>
<body>
    <p><b>注册信息:</b></p>
    <input type="text" name="name"  value="用户名"/>
    <input type="text" name="password" value="密码" />
    <input type="text" name="url" value="http://baidu.com" />
    <ul id="menu">
        <li class="home">首页</li>
        <li>论坛</li>
        <li>微博</li>
        <li>团购</li>
        <li>博客</li>
    </ul>
    <ul id="mn">
        <li class="home">首页2</li>
        <li>论坛2</li>
        <li>微博2</li>
        <li>团购2</li>
        <li>博客2</li>
    </ul>
</body>
</html>

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style java src html com log http word class style java src html com log http word

相关文章

随机文章

您可能还喜欢

您可能还喜欢