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 相关文章推荐
关于document.cookie的使用javascript
Oct 29 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
js简易版购物车功能
Jun 17 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
关于时间计算的结总
2006/12/06 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
详解Angularjs中的依赖注入
2016/03/11 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
es6学习之解构时应该注意的点
2017/08/29 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python解惑之True和False详解
2017/04/24 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
教师个人自我评价范文
2014/04/13 职场文书
节约用电倡议书
2015/04/28 职场文书
百万英镑观后感
2015/06/09 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript