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 解析url的search方法
Feb 09 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
javascript实现拖放效果
Dec 16 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 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数组转xml的代码分享
2015/05/14 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
PHP钩子实现方法解析
2019/05/21 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
学生保证书
2015/01/16 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
大学军训通讯稿
2015/07/18 职场文书
公司档案管理制度
2015/08/05 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python