jQuery-表单过滤器语法使用【详细代码及注释】表单过滤器

101 阅读 0 评论 67 点赞

我是靠谱客的博主高大鼠标，最近开发中收集的这篇文章主要介绍jQuery-表单过滤器语法使用【详细代码及注释】表单过滤器，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

表单过滤器

根据对象的状态作为条件。筛选dom对象.

1)获取可用的文本框

语法：$(":text:enabled")

2)获取不可用的文本框

语法：$(":text:disabled")

3)获取选中的复选框

语法：$(":checkbox:checked")

4)获取选中的下拉列表框

语法：$(“选择器>option:selected”)


<script type="text/javascript">

			$(function(){
				//	页面dom对象加载后执行，相当于onload事件
				$("#btn1").click(function(){
					//所有可用的文本框的值
					var obj=$(":text:enabled");
					obj.val("hello");
				})
				
				$("#btn2").click(function(){
					//显示选中的复选框
					var obj=$(":checkbox:checked");
					for(var i = 0 ;i<obj.length;i++){
						console.log(obj[i].value+"，jquery="+$(obj[i]).val());
					}
				})
				$("#btn3").click(function(){
					//下拉列表选中的值
					
					// var obj=$("select>option:selected");
					// console.log(obj.val());
					var obj=$("#lang>option:selected");
					alert("obj.val()="+obj.val())
				})
		
			})
		</script>
	</head>
	<body>
		<p>文本框</p>
		<input  type="text" value="文本1"  /><br/>
		<input  type="text" value="文本2" disabled="true" /><br/>
		<input  type="text" value="文本3"  /><br/>
		<input  type="text" value="文本4" disabled /><br/>
        <br/>
        <br/>
		<p>复选框</p>
		<input  type="checkbox" value="游泳"/>游泳<br/>
		<input  type="checkbox" value="健身" checked="true"/>健身<br/>
		<input  type="checkbox" value="电子游戏"checked />电子游戏<br/>
		<br/>
		<br/>
		<p>下拉框</p>
		<select id="lang">
			<option value="java">java语言</option><br/>
			<option value="go" selected >go语言</option><br/>
			<option value="python">python语言</option>
		</select>
		<br/>
		<br/>
		<p>功能按钮</p>
		<button id="btn1">所有可用的text设置hello</button>
		<button id="btn2">显示被选中的复选框的值</button>
		<button id="btn3">显示下拉列表选中的值</button>
	
		</body>

复制代码可直接运行