03-jquery基本选择器

2.3选择器

什么是选择器：选择器就是一个字符串，是一个定位dom对象的字符串，使用这个字符串作为条件定位dom对象，可以使用id，class样式名称，标签名称作为选择器使用，定位dom对象。

.3.1基本选择器

使用dom对象的id，class名称，标签名称等作为定位dom对象。
1，使用dom对象的id作为条件

 语法：$("#id")

2，class 选择器，使用对象的class名称定位dom对象。

  语法：$(".class名称")

3,标签选择器，使用标签名称作为条件定位dom对象。

  语法：$("标签")

举个栗子：

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.6.3.js"></script>
		<style type="text/css">
			div{
				background: gray;
				width: 200px;
				height: 100px;
			}
		
		</style>
		<script type="text/javascript">
		function fun1(){
		//id选择器
		var obj = $("#one");
		obj.css("background","red");
	}
		function fun2(){
		//class选择器（样式选择器）
		var obj=$(".two");
		//jquery对象是数组，在使用jquery函数时，把数组每个成员应用css函数
		obj.css("background","blue");
	}
		function fun3(){
		//标签名称选择器
		var obj=$("div");
		obj.css("background","pink");
	}
		</script>
	</head>
	<body>
		<div id="one">我是id=one的div</div>
		<br />
		<div class="two">我是class=two的id</div>
		<br />
		<div >我没有id,class</div>
		<br />
		<span>我是span</span>
		<br/><br />
		<input type="button" value="获取id=one的dom对象" onclick="fun1()"/>
		<br /><br />
		<input type="button" value="获取class=two的dom对象" onclick="fun2()"/>
		<br /><br />
		<input type="button" value="获取标签是div的dom对象" onclick="fun3()"/>
	</body>
</html>

在这里插入图片描述

4.所有选择器

语法：$(“*”)

 function fun4(){
			//获取所有dom对象
			var obj=$("*");
			obj.css("background","brown");
		}

所有选择器

5,组合选择器

语法：$("#id,.class,标签名称)
组合选择器使用id或者class名称或者标签名称定位dom对象，id，class，标签名称可以任意组合。

 function fun5(){
			//组合选择
			var obj=$("#one,span");
			obj.css("background","gold");
		}

组合选择器

posted @ 2023-01-19 11:19 taotooler 阅读(12) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 05-jquery基本过滤器

· 04-jquery表单选择器

· jQuery--dom对象选择器

· jQuery 01: 常用选择器

· jQuery核心函数之选择器（基本选择器）

公告

昵称： taotooler
园龄： 5年3个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

taotooler

03-jquery基本选择器

2.3选择器

.3.1基本选择器

公告

搜索

常用链接

我的标签

随笔分类 (21)

随笔档案 (78)

阅读排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/jquery-3.6.3.js"></script>
	<style type="text/css">
	div{
	background: gray;
	width: 200px;
	height: 100px;
	}

	</style>
	<script type="text/javascript">
	function fun1(){
	//id选择器
	var obj = $("#one");
	obj.css("background","red");
	}
	function fun2(){
	//class选择器（样式选择器）
	var obj=$(".two");
	//jquery对象是数组，在使用jquery函数时，把数组每个成员应用css函数
	obj.css("background","blue");
	}
	function fun3(){
	//标签名称选择器
	var obj=$("div");
	obj.css("background","pink");
	}
	</script>
	</head>
	<body>
	<div id="one">我是id=one的div</div>
	<br />
	<div class="two">我是class=two的id</div>
	<br />
	<div >我没有id,class</div>
	<br />
	<span>我是span</span>
	<br/><br />
	<input type="button" value="获取id=one的dom对象" onclick="fun1()"/>
	<br /><br />
	<input type="button" value="获取class=two的dom对象" onclick="fun2()"/>
	<br /><br />
	<input type="button" value="获取标签是div的dom对象" onclick="fun3()"/>
	</body>
	</html>

	function fun4(){
	//获取所有dom对象
	var obj=$("*");
	obj.css("background","brown");
	}

	function fun5(){
	//组合选择
	var obj=$("#one,span");
	obj.css("background","gold");
	}