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解析json数据的方法，非常的详尽,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jQuery实现鼠标滑过预览图片大图效果的方法,涉及jQuery鼠标事件响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下2017-04-04
在使用Thymeleaf进行数据填充的时候,发现使用jquery原始方式获取内容参数发现拿不到数据,本文主要介绍了使用Jquery获取Thymeleaf参数的三种方式小结,感兴趣的可以了解一下2024-07-07
这篇文章主要介绍了jQuery仅用3行代码实现的显示与隐藏功能,以完整实例形式分析了jQuery实现鼠标响应及页面元素属性变换的相关技巧,需要的朋友可以参考下2015-10-10
之前写过ajax让返回的内容显示在特定div里最近在看jquery，所以又用jquery重新写了个,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了jQuery实现的五星点评功能,结合具体实例形式分析了jQuery事件响应及页面元素属性动态操作实现五星点评功能相关操作技巧,需要的朋友可以参考下2019-02-02
下面小编就为大家带来一篇Jquery元素追加和删除的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了jquery.validate使用时遇到的问题的解决方法的汇总，真是应了那句老话，会者不难难者不会，这里记录一下，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要介绍了jquery插件实现堆叠式菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了用jquery实现可输入多选下拉组合框的实例代码，非常不错，具有参考借鉴价值，需要的朋友参考下2017-01-01
最新评论