jQuery 判断元素是否存在

最新推荐文章于 2024-06-09 10:13:00 发布

sayyy

最新推荐文章于 2024-06-09 10:13:00 发布

阅读量9k

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/sayyy/article/details/113478199

版权

JavaScript 专栏收录该内容

88 篇文章

订阅专栏

前言

jQuery v3.5.1

jQuery 查找元素

比如查找某个input元素$("input[name='email']")。

示例：

<html>
<header>
<script crossorigin="anonymous" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#form1").submit(function(){
    alert($("input[name='email']").val());
	return false;
  });
});
</script>
</header>

<body>
  <form id="form1" action="#">
  	<span>邮箱：</span><input type="text" name="email" value="1@1.com" /><br/>
	<input type="submit" />
  </form>
</body>
</html>

jQuery 判断元素是否存在

使用 jQuery 查找元素时，如果该元素不存在，则会影响后面的代码执行。因此需要判断元素是否存在。

jQuery 查找的元素不存在时，依然会返回对象。

if($("input[name='email']")) {
    //永远执行，不管元素是否存在
}

可以通过 jQuery 的 length 属性判断元素是否存在。

if($("input[name='email']").length > 0) {
    // 存在
}

示例：

<html>
<header>
<script crossorigin="anonymous" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#form1").submit(function(){
    if ($("input[name='email']")) {
      alert("jQuery 判断元素是否存在方式1：元素存在"); /* 不管元素是否存在，永远执行这里 */
    } else {
      alert("jQuery 判断元素是否存在方式1：元素不存在");
	}

	if ($("input[name='email']").length > 0) {
      alert("jQuery 判断元素是否存在方式2：元素存在"); /* 元素存在时执行这里 */
    } else {
      alert("jQuery 判断元素是否存在方式2：元素不存在"); /* 元素不存在时执行这里 */
	}
	return false;
  });
});
</script>
</header>

<body>
  <form id="form1" action="#">
	<input type="submit" />
  </form>
</body>
</html>