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 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
javascript实用方法总结
Feb 06 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
微信小程序实现底部弹出模态框
Nov 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
简单介绍Python中的readline()方法的使用
2015/05/24 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
Python如何生成xml文件
2020/06/04 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
工商企业管理专业自荐信范文
2014/04/12 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
三方协议书范本
2014/04/22 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
Python Django模型详解
2021/10/05 Python