快捷導(dǎo)航

jQuery 判斷元素整理匯總

更新時(shí)間：2017年02月28日 08:35:15 投稿：hebedich

本文給大家匯總介紹了jQuery的幾種判斷元素的方法，包括是否含有某 class、元素是否存在、是否 checked以及元素是否禁用，都是常用的方法，希望大家能夠喜歡

是否含有某 class

在表單提交之前，我們往往要利用 JavaScript 校驗(yàn)用戶輸入值，如果用戶輸入有誤，那么我們就往該表單元素添加一個(gè) error 的 class，再配合 CSS，該表單元素就顯示為紅色，以提醒用戶。

最后我們還要根據(jù)是否有 error 來(lái)決定是否提交表單。怎么判斷呢？如下：

<input type="text" name="username" />
<input type="text" name="password" class="error" />
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
<!--
alert($("input").hasClass("error"));
//-->
</script>

用 hasClass 即可。只要有一個(gè)元素具備 error 這個(gè) class，那么就返回 true；只有所有元素都不具備 error，才返回 false。

元素是否存在

if ($("#good").length <= 0) {
  alert("不存在。");
}
else {
  alert("存在。");
}

如上，用 length 屬性判斷數(shù)組長(zhǎng)度，以決定元素是否存在。

是否 checked

<input type="checkbox" checked="true" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="disabled" />
<input type="checkbox" checked="hahaha" />
<input type="checkbox" checked />
<input type="checkbox" />
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
<!--
$("input").each(function (){
  alert($(this).attr("checked"));
});
//-->
</script>

如上代碼，有六個(gè) input，顯示為：前五個(gè)為選中狀態(tài)，最后一個(gè)為未選中。

alert 時(shí)：前五個(gè)為 checked，最后一個(gè)為 undefined。

也就是說(shuō)只要標(biāo)簽中有 checked，即為選，與其屬性值無(wú)關(guān)，而 jQuery 取屬性值時(shí)也是這么認(rèn)的。要判斷是否選中，用 attr("checked") == "checked" 即可。

不過(guò)對(duì)于 radio 要注意

<input type="radio" name="r1" checked="true" />
<input type="radio" name="r1" checked="false" />
<input type="radio" name="r1" checked="disabled" />
<input type="radio" name="r1" checked="hahaha" />
<input type="radio" name="r1" checked />
<input type="radio" name="r1" />
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
<!--
$("input").each(function (){
  alert($(this).attr("checked"));
});
//-->
</script>

如上代碼，有六個(gè) input，由于是 radio，且 name 相同，顯示為：第五個(gè)為選中狀態(tài)，其余為未選中。

alert 時(shí)：前五個(gè)為 checked，最后一個(gè)為 undefined。

所以 jQuery 在這里要注意一下，它取的值與顯示情況不符。

應(yīng)付 radio 更好的辦法

有時(shí)候，我們只需要關(guān)心已經(jīng)選中的 radio，所以可以這么做：

<input type="radio" name="r1" value="1" checked="true" />
<input type="radio" name="r1" value="2" checked="false" />
<input type="radio" name="r1" value="3" checked="disabled" />
<input type="radio" name="r1" value="4" checked="hahaha" />
<input type="radio" name="r1" value="5" checked />
<input type="radio" name="r1" value="6" />
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
<!--
alert($("input:radio:checked").val());
//-->
</script>

這樣結(jié)果就是 5。

是否禁用

<input type="text" disabled="true" />
<input type="text" disabled="false" />
<input type="text" disabled="disabled" />
<input type="text" disabled="hahaha" />
<input type="text" disabled />
<input type="text" />
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
<!--
$("input").each(function (){
  alert($(this).attr("disabled"));
});
//-->
</script>

如上代碼，有六個(gè) input，顯示為：前五個(gè)為禁用狀態(tài)，最后一個(gè)為可用。

alert 時(shí)：前五個(gè)為 disabled，最后一個(gè)為 undefined。

也就是說(shuō)只要標(biāo)簽中有 disabled，即為禁用，與其屬性值無(wú)關(guān)，而 jQuery 取屬性值時(shí)也是這么認(rèn)的。要判斷是否禁用，用 attr("disabled") == "disabled" 即可。

您可能感興趣的文章: