当前位置：首页 > news >正文

jQuery表单属性过滤器：过滤＜input＞标签、＜select＞标签

news 来源：原创 2024/5/14 18:35:49

一、作用：

同基本过滤器，但是适用范围只能是<input>标签。

二、用法：

根据表单中dom对象的状态情况，定位dom对象。

启用状态：enabled
不可用状态：disabled
选择状态：checked

三、语法：

选择该jquery对象数组中该状态下的dom对象。
$("表单选择器:状态")
对<select> 下拉列表框，选择下拉列表中被选中的元素：
基本选择器>option:selected

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: gray;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
		
			// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), 
			// 相当于是onLoad().
			$(function() {
				//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
				 $("#btn1").click(function(){
					//获取所有可以使用的text
					var obj  = $(":text:enabled");
					//设置 jquery数组值所有dom对象的value值
					obj.val("hello");
				}) 
				
				$("#btn2").click(function(){
					//获取选中的checkbox
					var obj  = $(":checkbox:checked");
					for(var i=0;i<obj.length;i++){
						//alert( obj[i].value);使用dom对象的value属性
						alert(    $(obj[i]).val()  ) //使用jquery对象
					}
				})
				
				$("#btn3").click(function(){
					//获取select选中的值
					//var obj= $("select>option:selected");标签选择器
					var obj = $("#yuyan>option:selected");//id选择器
					alert(obj.val());
				})
				
				
			})
			
			
			
		</script>
	</head>
	<body>
		<input type="text"  id="txt1" value="text1" /><br/>
		<input type="text"  id="txt2" value="text2" disabled="true"/><br/>
		<input type="text"  id="txt3" value="text3" /><br/>
		<input type="text"  id="txt4" value="text4" disabled/><br/>
		<br/>
		<input type="checkbox" value="游泳" />游泳 <br/>
		<input type="checkbox" value="健身" checked />健身 <br/>
		<input type="checkbox" value="电子游戏" checked />电子游戏 <br/>
		<br/>
		<select id="yuyan">
			<option value="java">java语言</option>
			<option value="go" selected>go语言</option>
			<option value="python">python语言</option>
		</select>
	
		<br/>
		<input type="button" value="设置可以的text的value是hello" id="btn1"/>
		<br/>
		<button id="btn2">显示选中的复选框的值</button>
		<br/>
		<button id="btn3">显示选中下拉列表框的值</button>
	</body>
</html>