jQuery提供了is()方法可以很方便的判斷元素是否可見，是否隱藏，是否選中。
一、判斷元素是否隱藏
如下html中的div元素是隱藏的：
復制代碼 代碼如下:
<!doctype html>
<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
</head>
<body>
<div>你看不到我</div>
<span ></span>
<script type="text/javascript">
$('span').html('test div is visible? ' + $('#test').is(':visible'));
</script>
</body>
</html>
二、判斷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" checked="checked"/> chkChecked
<input type="checkbox" /> 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>
三、判斷是否使用了某個樣式
復制代碼 代碼如下:
<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></div>//注意這里出現了第2個div
<div></div>//注意這里出現了第3個div
<div></div>//注意這里出現了第4個div
<div><br/><span>Peter</span></div>//注意這里出現了第5個div
<div></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>
新聞熱點
疑難解答
圖片精選
