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 on方法传递参数示例
Dec 09 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
js显示文本框提示文字的方法
May 07 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
js微信分享API
Oct 11 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
Vue中的字符串模板的使用
May 17 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
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
Sony CFR 320 修复改造
2020/03/14 无线电
十天学会php(2)
2006/10/09 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
浅析Ajax语法
2016/12/05 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
es6数值的扩展方法
2019/03/11 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
教你用Python写安卓游戏外挂
2018/01/11 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
绿化工程实施方案
2014/03/17 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
2014年行政部工作总结
2014/11/19 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
个人维稳承诺书
2015/05/04 职场文书
答谢酒会主持词
2015/07/02 职场文书
Ruby处理YAML和json数据
2022/04/18 Ruby
Oracle锁表解决方法的详细记录
2022/06/05 Oracle