jQuery is()函數用法3例

時間 2019-11-05

標籤 jquery 函數用法欄目 JQuery 简体版

原文原文鏈接

這篇文章主要介紹了jQuery is()函數用法3例,jQuery的is()函數實際上是很是有用的，能不能用好直接決定你的代碼是否高效,須要的朋友能夠參考下。

jQuery提供了is()方法能夠很方便的判斷元素是否可見，是否隱藏，是否選中。

1、判斷元素是否隱藏

以下html中的div元素是隱藏的：
代碼以下:

<!doctype html>
<html>
    <head>
        <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    </head>
    <body>
        <div id="test" style="display:none">你看不到我</div>
        <span ></span>
         <script type="text/javascript">
            $('span').html('test div is visible? ' + $('#test').is(':visible'));
        </script>
    </body>
</html>

2、判斷checkbox是否選中

jquery中能夠經過xx.is(':checked')判斷checkbox，radiobutton是不是選中狀態，以下測試html
代碼以下:

<!doctype html>
<html>
    <head>
        <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    </head>
    <body>
        <p>
            <input type="checkbox" name="chkChecked" checked="checked"/> chkChecked
            <input type="checkbox" name="chkNoChecked" /> chkNoChecked
        </p>
        <span ></span>
        <script type="text/javascript">
            $('span').html('chkChecked checked? ' + $('input[name=chkChecked]').is(':checked') + '<br/> ' +'chkNoChecked checked? ' + $('input[name=chkNoChecked]').is(':checked') );
        </script>
    </body>
</html>

3、判斷是否使用了某個樣式

代碼以下:

<html lang="en">
     <head>
        <meta charset="utf-8">
        <title>is函數介紹</title>
        <style>  //設置一些基本樣式
              div { width:60px; height:60px; margin:5px; float:left;border:4px outset; background:green; text-align:center;font-weight:bolder; cursor:pointer; }
              .blue { background:blue; }  //樣式1
              .red { background:red; }//樣式2
              span { color:white; font-size:16px; }
              p { color:red; font-weight:bolder; background:yellow;margin:3px; clear:left; display:none; }
        </style>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script> //注意 這裏使用的是jQuery官方的腳步庫
    </head>
    <body>
        <div></div>  //注意這裏出現了第一個div
        <div class="blue"></div>//注意這裏出現了第2個div
        <div></div>//注意這裏出現了第3個div
        <div class="red"></div>//注意這裏出現了第4個div
        <div><br/><span>Peter</span></div>//注意這裏出現了第5個div
        <div class="blue"></div>//注意這裏出現了第6個div
        <p> </p>

        <script>
             $("div").one('click', function () {    //$("div").one  表明對div元素附加一個事件，
                //還能附加多個事件 譬如click或者mouseout時同時執行一些事情
                if ($(this).is(":first-child")) { //is函數發揮做用了，is(":first-child") 表明
                     //判斷此div是否第一個出現的div
                    $("p").text("It's the first div."); //text和html區別在因而否支持html標記
                     // 此時你在裏面寫個 alert是不會執行的

                 } else if ($(this).is(".blue,.red")) {  //判斷該div是否 具備blue或者red的 class
                    $("p").text("這是個藍色或者紅色的div");

                 } else if ($(this).is(":contains('Peter')")) { //判斷div中是否存在Peter這個詞
                    $("p").text("It's Peter!");

                 } else {
                    $("p").html("It's nothing <em>special</em>.");
                 }
                 $("p").hide().slideDown("slow"); //這是一個動畫效果。慢慢展示p的內容
                 $(this).css({"border-style": "inset", cursor:"default"});
            });
        </script>

    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。