欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery is()函數(shù)用法3例

 更新時(shí)間：2014年05月06日 09:40:57   作者：  
這篇文章主要介紹了jQuery is()函數(shù)用法3例,jQuery的is()函數(shù)其實(shí)是非常有用的，能不能用好直接決定你的代碼是否高效,需要的朋友可以參考下

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

一、判斷元素是否隱藏

如下html中的div元素是隱藏的：

復(fù)制代碼 代碼如下:

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

二、判斷checkbox是否選中

jquery中可以通過(guò)xx.is(':checked')判斷checkbox，radiobutton是否是選中狀態(tài)，如下測(cè)試html

復(fù)制代碼 代碼如下:

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

三、判斷是否使用了某個(gè)樣式

復(fù)制代碼 代碼如下:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is函數(shù)介紹</title>
  <style>  //設(shè)置一些基本樣式
  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官方的腳步庫(kù)
</head>
<body>
  <div></div>  //注意這里出現(xiàn)了第一個(gè)div
<div class="blue"></div>//注意這里出現(xiàn)了第2個(gè)div
<div></div>//注意這里出現(xiàn)了第3個(gè)div
<div class="red"></div>//注意這里出現(xiàn)了第4個(gè)div

<div><br/><span>Peter</span></div>//注意這里出現(xiàn)了第5個(gè)div
<div class="blue"></div>//注意這里出現(xiàn)了第6個(gè)div
<p>&nbsp;</p>
<script>
  $("div").one('click', function () {   //$("div").one  代表對(duì)div元素附加一個(gè)事件，
//還能附加多個(gè)事件 譬如click或者mouseout時(shí)同時(shí)執(zhí)行一些事情
    if ($(this).is(":first-child")) { //is函數(shù)發(fā)揮作用了，is(":first-child") 代表
   //判斷此div是否第一個(gè)出現(xiàn)的div
      $("p").text("It's the first div."); //text和html區(qū)別在于是否支持html標(biāo)記
  // 此時(shí)你在里面寫(xiě)個(gè) alert是不會(huì)執(zhí)行的
    } else if ($(this).is(".blue,.red")) {  //判斷該div是否 具有blue或者red的 class
      $("p").text("這是個(gè)藍(lán)色或者紅色的div");
    } else if ($(this).is(":contains('Peter')")) { //判斷div中是否存在Peter這個(gè)詞
      $("p").text("It's Peter!");
    } else {
      $("p").html("It's nothing <em>special</em>.");
    }
    $("p").hide().slideDown("slow"); //這是一個(gè)動(dòng)畫(huà)效果。慢慢展現(xiàn)p的內(nèi)容
    $(this).css({"border-style": "inset", cursor:"default"});
  });
</script>

</body>
</html>

相關(guān)文章

最新評(píng)論