[原创]jquery判断元素内容是否为空的方法


Posted in jQuery onMay 04, 2018

用jquery获取元素内容需要分两个情况:

input 用val();

var value = $('#test').val();

是否为空的判断方法:

if(value.length == 0){} 如果value为空执行的操作

if(value!=''){} 如果value不为空执行的操作

jQuery验证文本框内容不为空

通过$.fn 扩展jQuery方法

/**
 * 校验文本是否为空
 * tips:提示信息
 * 使用方法:$("#id").validate("提示文本");
 * @itmyhome
 */
$.fn.validate = function(tips){

  if($(this).val() == "" || $.trim($(this).val()).length == 0){
    alert(tips + "不能为空!");
    throw SyntaxError(); //如果验证不通过,则不执行后面
  }
}

html元素用html();

var value = $('#test').html();

是否为空的判断方法:

if(value.length == 0){

 也可以通过判断是说有没有子节点?对于html获取的方法可用

$('#list').children().length === 0 。

方法一

<script type="text/javascript" src="http://m.3water.com/skin/mobile/js/jquery.min.js"></script>
<div><ul id="thelist2">
<li><a href="https://m.3water.com/game/140209.html"><img src="//img.jbzj.com/do/uploads/litimg/140228/100331632c.jpg">天天飞车航哥破解版</a><em class="xj star5"></em></li>
<li><a href="https://m.3water.com/game/143515.html"><img src="//img.jbzj.com/do/uploads/litimg/140314/0944332514F.jpg"> 节奏大师全P破解版</a><em class="xj star6"></em></li>
<li><a href="https://m.3water.com/game/207971.html"><img src="//img.jbzj.com/do/uploads/litimg/140821/11594R51423.gif">海岛奇兵国服内购破解版</a><em class="xj star5"></em></li>
<li><a href="https://m.3water.com/game/144709.html"><img src="//img.jbzj.com/do/uploads/litimg/140318/161504236013.gif">天天炫斗破解版</a><em class="xj star5"></em></li>
<li><a href="https://m.3water.com/game/80896.html"><img src="//img.jbzj.com/do/uploads/litimg/130503/1J21Va46.jpg">完美女友完整版</a><em class="xj star5"></em></li>
</ul>
<div><ul id="thelist3"></ul>
<script>
alert($('#thelist2').children().length)
alert($('#thelist3').children().length)
$thelist3 = $('#thelist3');
if($thelist3.children().length==0){
//插入广告
}
/*
thel3con = $('#thelist3').html();
alert(thel3con.length);
if(thel3con=""){
alert("空");

}else{
alert("非空");
}
*/
</script>

方法二、

String.prototype.isEmpty = function () {
 var s1 = this.replace(/[\r\n]/g, '').replace(/[ ]/g, ''),
   s2 = (s1 == '') ? true : false;
 return s2;
};
$list.html().isEmpty();

if( $("#list").html() === "" ){} 用三个等号更符合

jQuery 相关文章推荐
jquery dataTable 获取某行数据
May 05 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 #jQuery
基于jquery实现左右上下移动效果
May 02 #jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 #jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 #jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 #jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 #jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 #jQuery
You might like
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
老生常谈进程线程协程那些事儿
2017/07/24 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
学习新党章思想汇报
2014/01/09 职场文书
十八大闭幕感言
2014/01/22 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2014年标准化工作总结
2014/12/17 职场文书