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 相关文章推荐
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
js瀑布流布局的实现
Jun 28 Javascript
js实现飞机大战游戏
Aug 26 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
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
Python语法快速入门指南
2015/10/12 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
Yahoo的PHP面试题
2014/05/26 面试题
年终考核实施方案
2014/05/26 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
法院授权委托书范文
2014/08/02 职场文书
处级干部考察材料
2014/12/24 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS