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 输入框数字限制插件
Nov 10 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
Vue组件通信的几种实现方法
Apr 25 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调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
js简易版购物车功能
2017/06/17 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
Python提取网页中超链接的方法
2016/09/18 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
Python测试模块doctest使用解析
2019/08/10 Python
python 创建一维的0向量实例
2019/12/02 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
绘画专业自荐信范文
2014/02/23 职场文书
2014年师德承诺书
2014/05/23 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
小学教师岗位职责
2015/04/02 职场文书
高中班主任心得体会
2016/01/07 职场文书