jquery表单对象属性过滤选择器实例分析
更新时间：2015年05月18日 11:41:40 作者：永远爱好写程序
这篇文章主要介绍了jquery表单对象属性过滤选择器,实例分析了jQuery选择器的相关使用技巧,需要的朋友可以参考下
本文实例讲述了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选择器相关内容感兴趣的读者可查看本站专题：《jquery选择器用法总结》
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了jQuery购物网页经典制作案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
jQuery操作select的实例代码，这篇比较简单，如果想要想了解更多可以参考脚本之家以前发布的文章2012-06-06
这篇文章主要介绍了jQuery实现动态加载select下拉列表项功能,结合实例形式较为详细的分析了jQuery动态加载select下拉列表项的步骤与相关操作技巧,需要的朋友可以参考下2018-05-05
jquery提供一种操作DOM元素属性的方法: attr(修改和增加DOM元素的属性) 和 removeAttr(移除属性)。2010-12-12
这篇文章主要汇总了20种jQuery 和 CSS 的文本特效插件，都是比较热门的特效插件，推荐给有需要的小伙伴。2014-12-12
这篇文章主要为大家详细介绍了jQuery排序插件tableSorter的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章介绍了jQuery UI旋转器部件Spinner Widget，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
jqGrid可以绑定XML,JSON和数组三种类型的数据。接下来通过本文给大家介绍jqGrid用法的相关知识，感兴趣的朋友一起学习吧2016-06-06
本篇文章主要是对jquery中常用的函数和属性进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
下面小编就为大家带来一篇深入理解jQuery之防止冒泡事件。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最新评论