search

Home  >  Article  >  Web Front-end  >  jquery form object attribute filter selector instance analysis_jquery

jquery form object attribute filter selector instance analysis_jquery

WBOY
WBOYOriginal
2016-05-16 15:58:421188browse

The example in this article describes the usage of jquery form object attribute filter selector. Share it with everyone for your reference. The specific analysis is as follows: 

<!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>

Readers who are interested in more content related to jquery selector can check out the special topic of this site: "Summary of jquery selector usage"

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：The clone method in JQuery copies nodes_jqueryNext article：The clone method in JQuery copies nodes_jquery

Related articles

See more