溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jQuery 判斷元素整理匯總

發布時間:2020-09-10 20:42:33 來源:腳本之家 閱讀:129 作者:hebedich 欄目:web開發

是否含有某 class

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

最后我們還要根據是否有 error 來決定是否提交表單。怎么判斷呢?如下:

<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 即可。只要有一個元素具備 error 這個 class,那么就返回 true;只有所有元素都不具備 error,才返回 false。

元素是否存在

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

如上,用 length 屬性判斷數組長度,以決定元素是否存在。

是否 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>

如上代碼,有六個 input,顯示為:前五個為選中狀態,最后一個為未選中。

alert 時:前五個為 checked,最后一個為 undefined。

也就是說只要標簽中有 checked,即為選,與其屬性值無關,而 jQuery 取屬性值時也是這么認的。要判斷是否選中,用 attr("checked") == "checked" 即可。

不過對于 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>

如上代碼,有六個 input,由于是 radio,且 name 相同,顯示為:第五個為選中狀態,其余為未選中。

alert 時:前五個為 checked,最后一個為 undefined。

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

應付 radio 更好的辦法

有時候,我們只需要關心已經選中的 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>

這樣結果就是 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>

如上代碼,有六個 input,顯示為:前五個為禁用狀態,最后一個為可用。

alert 時:前五個為 disabled,最后一個為 undefined。

也就是說只要標簽中有 disabled,即為禁用,與其屬性值無關,而 jQuery 取屬性值時也是這么認的。要判斷是否禁用,用 attr("disabled") == "disabled" 即可。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女