jQuery Judgment Element Collation Summary

Does it contain an class

Before the form is submitted, we often use JavaScript to verify the user's input value. If the user inputs incorrectly, we add an class of error to the form element, and then cooperate with CSS, and the form element will be displayed in red to remind the user.

Finally, we decide whether to submit the form according to whether there is error. How to judge? As follows:

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

Use hasClass. As long as there is one element with error, class, then true is returned; false is returned only if all elements do not have error.

Does the element exist

if ($("#good").length <= 0) {
  alert(" It doesn't exist. ");
}
else {
  alert(" Existence. ");
}

As above, the length attribute is used to judge the length of the array to determine whether the element exists or not.

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

As in the above code, there are 6 input, which are shown as: the first 5 are selected and the last 1 is unselected.

For alert, the first five are checked, and the last one is undefined.

That is to say, as long as there is checked in the label, it is selected, which has nothing to do with its attribute value, and jQuery also recognizes it when taking the attribute value. To determine whether it is selected, use attr ("checked") = = "checked".

However, pay attention to 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>

As in the above code, there are 6 input. Because they are radio and name are the same, it is displayed as: the fifth is selected and the rest is unselected.

For alert, the first five are checked and the last one is undefined.

Therefore, jQuery should pay attention to 1 here, and its value does not match the display.

A better way to deal with radio

Sometimes, we only need to care about the selected radio, so we can do this:

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

So the result is 5.

Whether to disable

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

As in the code above, there are six input, which are shown as: the first five are disabled and the last one is available.

For alert, the first five are disabled, and the last one is undefined.

That is to say, as long as there is disabled in the label, it is disabled, regardless of its attribute value, and jQuery takes the attribute value as well. To determine whether it is disabled, use attr ("disabled") = = "disabled".