jQuery 判断元素整理汇总


Posted in Javascript onFebruary 28, 2017

是否含有某 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" 即可。

Javascript 相关文章推荐
jquery CSS选择器笔记
Mar 29 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
javascript中clone对象详解
Dec 03 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
小程序云开发之用户注册登录
May 18 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
jQuery倒计时代码(超简单)
Feb 27 #Javascript
js实现图片左右滚动效果
Feb 27 #Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 #Javascript
原生js实现旋转木马轮播图效果
Feb 27 #Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 #Javascript
js实现简单的手风琴效果
Feb 27 #Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 #Javascript
You might like
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
jquery 插件开发方法小结
2009/10/23 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python使用chardet判断字符编码
2015/05/09 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
python实现银行实战系统
2020/02/26 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
vue+django实现下载文件的示例
2021/03/24 Vue.js
房地产公司见习自我鉴定
2014/04/28 职场文书
保护野生动物倡议书
2014/05/16 职场文书
工作自我评价范文
2019/03/21 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
Moment的feature导致线上bug解决分析
2022/09/23 Javascript
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL