jQuery表单选择器：快速选择＜input＞标签

姓蔡小朋友

已于 2022-10-12 20:59:29 修改

阅读量1.3k

点赞数

分类专栏： jQuery 文章标签： jquery 前端 javascript

于 2022-09-02 21:03:47 首次发布

本文链接：https://blog.csdn.net/m0_53881899/article/details/126670443

版权

jQuery 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、定义：

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等<input />元素的选择方式。该方法无论是否存在表单<form></form>,均可作出相应选择。
表单选择器是为了更加容易的操作表单。
表单选择器是根据元素类型来定义的。

二、语法：

$(": type属性值")

例如：
$(“: text”)，表示选择有所单行文本框。
$(“: button”)，表示选择所有按钮。

三、例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			
		</style>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function fun1(){
				//使用表单选择器 $(":type的值")
				var obj = $(":text");
				//获取value属性的值 val()是jquery中的函数, 读取value属性值
				alert( obj.val());
			}
			
			function fun2() {
				//定位radio
				var obj = $(":radio");//数组,目前是两个对象 man ,woman
				//循环数组,数组中的成员是 dom对象,可以dom的属性或者函数
				for(var i=0;i<obj.length;i++){
					//从数组值获取成员,使用下标的方式
					var  dom = obj[i];
					//使用dom对象的属性,获取value值
					alert(dom.value)
				}
			}
			
			function fun3(){
				//定位checkbox
				var obj = $(":checkbox"); //数组,有三个对象
				for(var i=0;i<obj.length;i++){
					var dom = obj[i];
					//alert(dom.value);可以使用dom对象的value属性，也可以使用下面jquery对象的val函数
					//使用jqueyr的val函数, 获取value的值
					//1. 需要jquery对象
					var jObj = $(dom); // jObj 是jquery对象
					//2. 调用jquery函数
					alert("jquery的函数调用=" + jObj.val());
					
				}
				
			}
			
			
			
		</script>
	</head>
	<body>
		<input type="text" value="我是type=text" /><br/>
		<br/>
		<input type="radio" value="man" /> 男 <br/>
		<input type="radio" value="woman" /> 女 <br/>
		<br/>
		<input type="checkbox" value="bike" /> 骑行 <br/>
		<input type="checkbox" value="football" /> 足球 <br/>
		<input type="checkbox" value="music" /> 音乐 <br/>
		<br/>
		<input type="button" value="读取text的值" onclick="fun1()"/>
		<br/>
		<input type="button" value="读取radio的值" onclick="fun2()"/>
		<br/>
		<input type="button" value="读取checkbox的值" onclick="fun3()"/>
	</body>
</html>