jQuery提供了is()方法可以很方便的判斷元素是否可見,是否隱藏,是否選中。
一、判斷元素是否隱藏
如下html中的div元素是隱藏的:
<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中可以通過xx.is(':checked')判斷checkbox,radiobutton是否是選中狀態,如下測試html
<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>
三、判斷是否使用了某個樣式
<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>
新聞熱點
疑難解答