jQuery中的筛选(六):first()、last()、has()、is()、find()、siblings()等
阅读原文时间:2023年07月08日阅读:3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>筛选</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style type="text/css">
        body{
            font-family: "Microsoft YaHei"
        }
        .cGreen{color: #4CA902}
        .cPink{color: #ED4A9F}
        .cBlue{color: #0092E7}
        .cCyan{color: #01A6A2}
        .cYellow{color: #DCA112}
        .cRed{color: #B7103B}
        .cPurple{color: #792F7C}
        .cBlack{color: #110F10}
        .cOrange{color: #FF4500}
        .cGray{color: #A9A9A9}
        .hide{display: none;}
        span {
            float:left;
        }
        ul li {
            width:120px;
            float: left;
            margin-left: 10px;
        }
    </style>
    <script type="text/javascript">
    /*
    first()、last()、is()、parent()、has()、find()、
    siblings()。
    */
    $(document).ready(function() {
        // <input type="button" id="btn1" value="first()筛选中国的第一个城市">
        $("#btn1").click(function() {
            $("#chn li").first().addClass("cGreen");
            console.log($("#chn li").first().text());
        });

        // <input type="button" id="btn2" value="last()筛选美国的最后一个城市">
        $("#btn2").click(function() {
            $("#chn li").last().addClass("cGreen");
            console.log($("#chn li").last().text());
        });

        // <input type="button" id="btn3" value="is()判断广州(li)的父元素是否是ul元素,若是则输出该元素的id值">
        $("#btn3").click(function() {
            if ($("#gz").parent().is("ul")) {
                console.log("广州的父元素是ul,并且它的id对应的值为:"+
                        $("#gz").parent().attr("id"));
            }
        });

        // <input type="button" id="btn4" value="has()筛选加粗的城市并将其颜色设置为红色">
        /* has针对于寻找特定元素 */
        $("#btn4").click(function() {
            // 也可以直接$("li")但是速度会慢一点!文档较长的时候会慢很多。
            $("ul li").has("span").addClass("cRed");
        });

        // <input type="button" id="btn5" value="find()查找美国城市中所有的span元素">
        /* find着重于搜索 */
        $("#btn5").click(function() {
            $("#usa li").find("span").addClass("cBlue");
        });

        // <input type="button" id="btn6" value="parent()查找城市(li元素)的父元素,并且父元素的id为chn">
        $("#btn6").click(function() {
            $("ul li").parent("#chn").addClass("cPurple");
        });

        // <input type="button" id="btn7" value="siblings()选取广州(li元素)的所有兄弟城市">
        $("#btn7").click(function() {
            $("#gz").siblings().addClass("cYellow");
        });
    });

    </script>

  </head>

  <body>
      <span>中国城市</span>:<br>
    <ul id="chn">
        <li id="bj"><span style="font-weight: bold;">北京</span></li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
        <li id="hk">香港</li>
    </ul>
    <br><br>
    <span>美国城市</span>:<br>
    <ul id="usa">
        <li id="wst"><span style="font-weight: bold;">华盛顿特区</span></li>
        <li id="ny">纽约</li>
        <li id="la">洛杉矶</li>
        <li id="scg">芝加哥</li>
    </ul>
    <br><br>
    <span>德国城市</span>:<br>
    <ul id="ger">
        <li id="mnh">慕尼黑</li>
    </ul>
    <div style="clear:both;"></div>
    <br><br>
    <hr>
    <input type="button" id="btn1" value="first()筛选中国的第一个城市">
    <input type="button" id="btn2" value="last()筛选美国的最后一个城市">
    <input type="button" id="btn3" value="is()判断广州(li)的父元素是否是ul元素,若是则输出该元素的id值">
    <input type="button" id="btn4" value="has()筛选加粗的城市并将其颜色设置为红色">
    <input type="button" id="btn5" value="find()查找美国城市中所有的span元素">
    <input type="button" id="btn6" value="parent()查找城市(li元素)的父元素,并且父元素的id为chn ">
    <input type="button" id="btn7" value="siblings()选取广州(li元素)的所有兄弟城市">
  </body>
</html>

其实个人感觉这个方法.first()比前面的基本过滤选择器中的(":first")更加的实用,因为这个.first()可以单独使用一直在方法后面连缀!不像(":first")必须写在表达式中。