jquery表单对象属性过滤选择器实例分析


Posted in Javascript onMay 18, 2015

本文实例讲述了jquery表单对象属性过滤选择器用法。分享给大家供大家参考。具体分析如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单对象属性过滤选择器</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
 //=========举例1===========================
 //:enabled 用法: $(”input:enabled”) 返回值 集合元素
 //说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,
 //当然就为enabled啦.
 $("input:enabled").val("我是有效的按钮");
 //=========举例2===========================
 //:disabled 用法: $(”input:disabled”) 返回值 集合元素
 //说明: 匹配所有不可用元素.与上面的那个是相对应的.
 $("input:disabled").val("我是无效的按钮");
 //=========举例3===========================
 //:checked 用法: $(”input:checked”) 返回值 集合元素
 //说明: 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option).这话说起来有些绕口.
 //...<1> 提取所有选中的name='love'的复选框
 $("#btnTest").click(function () {
 ShowElements($("input[name='love']:checked")); //第一种写法
 //ShowElements($("[name='love']:checked"))  //第二种写法
 });
 //=========举例4===========================
 //:selected 用法: $(”select option:selected”) 返回值 集合元素
 //说明: 匹配所有选中的option元素.
 //...<1> 所有name='city'的下拉框的选中项
 $("#btnTest2").click(function () {
  ShowElements($("select[name='city'] option:selected"));
 });
 //...<2> 所有name='prov'的下拉框的选中项
 //$("#btnTest2").click(function () {
 // ShowElements($("select[name='prov'] option:selected"));
 //});
});
function ShowElements(arr) {
 //alert(arr.length);
 var output = "";
 for (var i = 0; i < arr.length; i++) {
  if (output == "") {
   output = arr.eq(i).val();
  }
  else {
   output += "," + arr.eq(i).val();
  }
 }
 alert(output);
}
</script>
</head>
<body>
<input type="button" disabled="disabled" value="button1" />
<input type="button" value="button2" />
<input type="button" value="button3" />
<input type="button" disabled="disabled" value="button4" />
<input type="button" id="btnTest" value="点击我检查复选框" />
<input type="checkbox" name="love" value="1" />足球
<input type="checkbox" name="love" value="2" />篮球
<input type="checkbox" name="love" value="3" />排球
<input type="checkbox" name="Other" value="3" />非爱好类<br />
我是下拉框<input type="button" id="btnTest2" value="点击我检查下拉框" />
<select name="city">
<option value='beijing'>北京</option>
<option value='shanghai'>上海</option>
<option value='shenzhen'>深圳</option>
</select>
<select name="prov">
<option value='jiangxi'>江西省</option>
<option value='shichuan'>四川省</option>
<option value='guangdong'>广东省</option>
</select>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
js+css3实现旋转效果
Jan 20 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
面包屑导航详解
Dec 07 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
JQuery勾选指定name的复选框集合并显示的方法
May 18 #Javascript
JavaScript的9种继承实现方式归纳
May 18 #Javascript
JQuery中上下文选择器实现方法
May 18 #Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 #Javascript
JQuery球队选择实例
May 18 #Javascript
JQuery实现动态添加删除评论的方法
May 18 #Javascript
TypeError document.getElementById(...) is null错误原因
May 18 #Javascript
You might like
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
python 实现多维数组(array)排序
2020/02/28 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
开业庆典邀请函
2014/01/08 职场文书
教师开学感言
2014/02/14 职场文书
基层党员公开承诺书
2014/05/29 职场文书
毕业生见习报告总结
2014/11/08 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
Java异常处理try catch的基本用法
2021/12/06 Java/Android
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript