jQuery第二章 jQuery选择器

最新推荐文章于 2022-12-02 10:17:54 发布

Jayco-J

最新推荐文章于 2022-12-02 10:17:54 发布

阅读量209

点赞数

分类专栏： jQuery学习路线文章标签： jquery

本文链接：https://blog.csdn.net/LvJzzZ/article/details/108294290

版权

jQuery学习路线专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript自我学习路线

jQuery选择器

jQuery选择器

选择器：就是一个字符串，用来定位DOM对象的，通知jQuery函数定位满足条件的DOM对象，然后可以通过jQuery的函数操作DOM
选择器分为基本选择器、表单选择器

一、基本选择器

根据ID、class属性，标签类型名定位HTML元素，转为jQuery对象

1. ID选择器

通过DOM对象的ID定位DOM对象，通过ID找对象，ID在当前页面中是唯一值
语法格式

$("#DOM对象的id值")

2. class选择器

class表示CSS中的样式，使用样式的名称定位DOM对象
语法格式

$(".DOM对象的class值")

3. 标签选择器

使用标签名称定位DOM对象
语法格式

$("标签名")

4. 所有选择器

选取页面中所有DOM对象
语法格式

$("*")

5. 组合选择器

多个被选对象间使用逗号分隔后形成的选择器
语法格式

$("#id,.class,标签名")

二、表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式，该方法无论是否存在表单，均可以做出相应选择，表单选择器是为了能更加容易的操作表单，表单选择器是根据元素类型来定义的，拥有type属性才可以使用

<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">

语法格式

$(":type 属性值")

如：

$(":text") // 选取所有的单行文本框
$(":password") // 选取所有的密码框
$(":radio") // 选取所有的单选框
$(":checkbox") // 选取所有的多选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单选择器</title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function fun01() {
				// var $obj = $(":text");
				// alert($obj.val());
				alert($(":text").val());
			}

			function fun02() {
				var $obj = $(":radio"); // 是一个数组，有两个对象
				// 循环数组
				for (var i = 0; i < $obj.length; i++) {
					// 将jQuery对象转为DOM对象
					var dom = $obj[i];
					alert(dom.value);
				}
			}

			function fun03() {
				var $obj = $(":checkbox"); // 是一个数组，有三个对象
				for (var i = 0; i < $obj.length; i++) {
					// 将jQuery对象转为DOM对象
					var dom = $obj[i];
					alert(dom.value);
					// jQuery对象的用法
					// alert($($obj[i]).val());
				}
			}
		</script>
	</head>
	<body>
		<input type="text" value="" /><br>
		<input type="radio" value="man" name="sex" />男<br>
		<input type="radio" value="woman" name="sex" />女<br>
		<input type="checkbox" value="Java" />Java<br>
		<input type="checkbox" value="MySQL" />MySQL<br>
		<input type="checkbox" value="python" />python<br>
		<input type="button" value="读取text值" onclick="fun01()" /><br>
		<input type="button" value="读取radio值" onclick="fun02()" /><br>
		<input type="button" value="读取checkbox值" onclick="fun03()" /><br>
	</body>
</html>

Jayco-J

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery第二章 jQuery选择器

JavaScript自我学习路线jQuery选择器一、基本选择器1. ID选择器2. class选择器3. 标签选择器4. 所有选择器5. 组合选择器二、表单选择器jQuery选择器选择器：就是一个字符串，用来定位DOM对象的，通知jQuery函数定位满足条件的DOM对象，然后可以通过jQuery的函数操作DOM选择器分为基本选择器、表单选择器一、基本选择器根据ID、class属性，标签类型名定位HTML元素，转为jQuery对象1. ID选择器通过DOM对象的ID定位DOM对象，通
复制链接

扫一扫