• jQuery表单选择器:快速选择<input>标签


    一、定义:

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

    二、语法:

    $(": type属性值")
    
    • 1

    例如:
    $(“: 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>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
  • 相关阅读:
    手把手怎么把照片修复高清,p图小白也能轻松上手
    【数据库原理及应用】——基本表更新(INSERT、UPDATE、ALTER、DELETE)与视图VIEW(学习笔记)
    Linux部署项目
    总结线程池
    基于springboot实现摄影跟拍预定管理系统【项目源码+论文说明】
    STM32人脸识别系统设计(程序代码+论文)
    LVS-DR模式
    MATLAB(0)综述
    Java程序基础知识有哪些?
    AI时代的视频云转码移动端化——更快、更好,更低,更广
  • 原文地址:https://blog.csdn.net/m0_53881899/article/details/126670443