jQuery基础——使用选择器—3属性选择器与表单选择器

5、属性选择器 

        属性选择器主要根据元素的属性及其属性值作为条件值作为过滤的条件，来匹配对应的DOM元素。属性选择器都是以括号作为起止分界符，如[attribute]，与伪类选择器特征都比较明显。jQuery定义了7类属性选择器。

属性选择器

选择器	说明
[attribute]	匹配包含给定属性的元素。注意，在jQuery1.3版本中，前导的@符号已经被废除，如果想要兼容最新版本，只需要简单去掉@符号即可。 例如，$("div[id]")表示查找所有含有id属性的div元素
[attribute=value]	匹配属性等于特定值的元素。属性值的引号在大多数情况下是可选的，如果属性值中包含“]”时，需要加引号以避免冲突。 例如，$("input[name='text']")表示查找所有name属性值是‘text’的input元素
[attribute!=value]	匹配所有不含有指定的属性，或者属性不等于特定值的元素。该选择器等价:not([attr=value])要匹配含有特定属性但不等于特定值的元素，可以使用[attr]:not([attr=value]) 例如，$("input[name!='text']")表示查找所有name属性值不是‘text’的input元素
[attribute^=value]	匹配给定的属性是以某些值开始的元素。 例如，$("input[name^='text']")表示所有name属性值是以‘text’开始的input属性
[attribute$=value]	匹配给定的属性是以某些值结尾的元素。 例如，$("input[name^='text']")表示所有name属性值是以‘text’结束的input属性
[attribute*=value]	匹配给定的属性是包含某些值的元素。 例如，$("input[name^='text']")表示所有name属性值是包含‘text’字符串的input属性
[selector1][selector2][selectorN]	复合属性选择器，需要同时满足多个条件时使用。 例如，$("input[name*='text'][id]")表示所有name属性值包含‘text’字符串，且包含了id属性的input元素

6、表单选择器

        表单是页面中使用频率较高的元素之一，为了方便用户灵活操作表单，jQuery专门定义了表单选择器，使用表单选择器可以方便地获取表单中某类表单域对象。

6.1、基本表单选择器

        jQuery定义了一组伪类选择器，利用他们可以获取页面中的表单类型元素。

基本表单选择器

选择器	说明
:input	匹配所有input、textarea、select和button元素
:text	匹配所有单行文本框
:password	匹配所有密码框
:radio	匹配所有单选按钮
:checkbox	匹配所有复选框
:submit	匹配所有提交按钮
:image	匹配所有图像域
:reset	匹配所有重置按钮
:button	匹配所有按钮
:file	匹配所有文件域
:hidden	匹配所有不可见元素，或者type为hidden的元素

		<form id="test" method="get" action="">
			<input type="text" name="" id="" value="文本域" /><br/>
			<input type="password" name="" id="" value="密码域" /><br/>
			<input type="checkbox" name="" id="" value="复选框" />复选框<br/>
			<input type="radio" name="" id="" value="单选框" />单选框<br/>
			<input type="image" name="" id="" value="图像域" src="" /><br/>
			<input type="file" name="" id="" value="文件域" /><br/>
			<input type="hidden" name="" id="" value="隐藏域" /><br/>
			<input type="button" name="" id="" value="普通按钮" /><br/>
			<input type="submit" name="" id="" value="提交按钮" /><br/>
			<input type="reset" name="" id="" value="重置按钮" /><br/>
		</form>
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#test :text").val("修改后的文本域");
				$("#test :password").val("修改后的密码域");
				$("#test :checkbox").val("修改后的复选框");
				$("#test :radio").val("修改后的单选框");
				$("#test :image").val("修改后的图像域");
				$("#test :file").val("修改后的文件域");
				$("#test :hidden").val("修改后的隐藏域");
				$("#test :button").val("修改后的普通按钮");
				$("#test :submit").val("修改后的提交按钮");
				$("#test :reset").val("修改后的重置按钮");
			})
		</script>

修改前：

修改后： 

 

 

 6.2、高级表单选择器

        jQuery根据表单域特有的特性定义了4个表单属性选择器，这些选择器与基本表单选择器不同，他可以选择任何类型的表单域，因为它主要根据属性来进行选择。

选择器	说明
:enabled	匹配所有可用元素
:disabled	匹配所有不可用元素
:checked	匹配所有被选中的元素 （复选框、单选框等，不包括select和option）
:selected	匹配所有选择中的option元素

 

		<form id="test" method="get" action="">
			<input type="text" name="" id="" disabled="disabled" value="文本域" /><br />
			<input type="text" name="" id="" disabled="disabled" value="文本域" /><br />
			<input type="text" name="" id="" value="文本域" /><br />
			<input type="checkbox" name="" id="" value="复选框" />复选框<br />
			<input type="radio" name="" id="" value="单选框" />单选框<br />
			<select name="">
				<option value="1">1</option>
				<option value="1">2</option>
				<option value="1" selected="selected">3</option>
			</select>
		</form>
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#test :disabled").val("不可用");
				$("#test :enabled").val("可用");
				$("#test :chechked").removeAttr("chechked");
				$("#test :selected").removeAttr("selected");
			})
		</script>

修改前：

修改后：