html5中判断值是否为空,jquery判断元素是否存在

在一些页面中如果存在针对某个html元素的js动态操作逻辑，如果元素不存在的话，执行JS时会出现意想不到的后果，而解决这个问题的方法，就是在执行某一段JS时，先判断要用到的html元素是否存在，如果存在就执行操作，如果不存在就直接不执行逻辑。那么这篇文章就说一说在JS插件JQuery中是如何判断元素是否存在的。

JQuery判断HTML元素是否存在

方法1：

判断HTML元素是否存在，利用 jQuery 中的 length 属性

length 属性包含 jQuery 对象中元素的数目

html代码

我爱你中国

我爱你中国1

飞鸟慕鱼博客

墨初

JS代码

console.log($('#mochu').length);

console.log($('.mochu').length);

console.log($('#div').length);

打印结果：1 3  0注意：

1、id 为 mochu 的HTML元素在文档流中只出现了一次，所以 $('#mochu') 长度为1，

2、class 为 mochu 的HTML元素在文档流中出现了三次，所以 $('.mochu') 长度为3，

3、id 为 div 的HTML元素在文档流中没有出现，所以它的长度为 0

jquery判断元素是否存在的完整示例代码：html>

我爱你中国

if($('#mochu').length){

//存在

console.log('存在');

}else{

//不存在

console.log('不存在');

}

打印结果： 存在

方法2：

除了利用 jQuery 中的 length 属性来判断元素是否存在外，还可以将 jquery对象转换成dom对象来判断元素是否存在。

HTML代码

我爱你中国

JS代码：

console.log($('#mochu')[0]);

console.log($('#div')[0]);

打印结果如下图所示：

注意：

1、如果元素存在时，可以打印出元素本身

2、元素不存在时，直接打印 undefined (特殊值,通常用于指示变量尚未赋值)

jquery判断元素是否存在的完整示例代码：html>

我爱你中国

if($('#mochu')[0]){

//存在

console.log('存在');

}else{

//不存在

console.log('不存在');

}

打印结果：存在

ps：关于 jquery 对象 与 dom 对象之间的相互转换，可以参考本博客的相关文章。