表单选择器:
表单选择器使用dom对象的type属性值定位dom对象,和form标签无关。
语法:$(":type属性值")
文本框
<script type="text/javascript">
function fun1(){
//使用表单选择器,获取dom对象
var obj = $(":text");
alert(obj.val());
}
</script>
<body>
<p>文本框</p>
<input type="text" value="我是type=text" /><br/>
<input type="button" value="读取文本框的value值"onclick="fun1()" /><br/>
</body>
radio
<script type="text/javascript">
function fun2(){
//$(":radio");
var obj=$(":radio");
for(var i=0;i<obj.length;i++){
var dom = obj[i];//dom是dom对象
alert("dom的属性="+dom.value+",使用jQuery的函数="+$(dom).val());
}
}
</script>
</head>
<body>
<p>radio</p>
<input type="radio" value="man" />男<br/>
<input type="radio" value="woman" />女<br/>
<input type="button" value="读取radio的value值" onclick="fun2()" />
</body>
checkbox
<script type="text/javascript">
function fun3(){
//$(":radio");
var obj=$(":checkbox");
for(var i=0;i<obj.length;i++){
var dom = obj[i];//dom是dom对象
alert("dom的属性="+dom.value+",使用jQuery的函数="+$(dom).val());
}
}
</script>
</head>
<body>
<p>checkbox</p>
<input type="checkbox" value="bike" />骑车<br/>
<input type="checkbox" value="football" />足球<br/>
<input type="checkbox" value="music" />音乐<br/>
<input type="button" value="读取radio的checkbox值" onclick="fun3()" />
</body>
</html>
** 以上代码复制可直接运行,记得 <script type="text/javascript" src="js/jquery-3.6.0.js"> </script>
**