JQuery选择器

最新推荐文章于 2024-09-05 16:56:18 发布
最新推荐文章于 2024-09-05 16:56:18 发布
阅读量102 收藏
点赞数
分类专栏： JQuery js 页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a502367897/article/details/103047679
版权
页面 同时被 3 个专栏收录
8 篇文章 2 订阅
订阅专栏
js
4 篇文章 0 订阅
订阅专栏
JQuery
2 篇文章 0 订阅
订阅专栏

基本选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器</title>
		<link rel="stylesheet" href="../../css/style.css" />
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					//ID选择器，基本特性：id前加 #
					$("#one").css("background-color","pink");
				});
				
				$("#btn2").click(function(){
					//类选择器，基本特性：类前加 .
					$(".mini").css("background-color","pink");
				});
				
				$("#btn3").click(function(){
					//元素选择器，基本特性：元素名（什么都不用加）
					$("div").css("background-color","pink");
				});
				
				$("#btn4").click(function(){
					//*代表选择所有元素
					$("*").css("background-color","pink");
				});
				//选择id为two并且样式为mini的元素
				$("#btn5").click(function(){
					$("#two,.mini").css("background-color","pink");
				});
			});
		</script>
			
	</head>
	<body>
		<input type="button" id="btn1" value="选择为one的元素"/>
		<input type="button" id="btn2" value="选择样式为mini的元素"/>
		<input type="button" id="btn3" value="选择所有的div元素"/>
		<input type="button" id="btn4" value="选择所有元素"/>
		<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

层级选择器

​
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					//选择body中的所有的div元素
					$("body div").css("background-color","gold");
				});
				
				$("#btn2").click(function(){
					//选择body中的第一级的孩子
					$("body>div").css("background-color","gold");
				});
				
				$("#btn3").click(function(){
					//选择id为two的元素的下一个元素
					$("#two+div").css("background-color","gold");
				});
				
				$("#btn4").click(function(){
					//选择id为one的所有的兄弟元素
					$("#one~div").css("background-color","gold");
				});
			});
		</script>
		
		
	</head>
	<body>
		<input type="button" id="btn1" value="选择body中的所有的div元素"/>
		<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
		<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
		<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

​

基本过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					//body中的第一个div元素
					$("body div:first").css("background-color","red");
				});
				
				$("#btn2").click(function(){
					//body中的最后一个div元素
					$("body div:last").css("background-color","red");
				});
				
				$("#btn3").click(function(){
					//选择body中的奇数的div
					$("body div:odd").css("background-color","red");
				});
				
				$("#btn4").click(function(){
					//选择body中的偶数的div
					$("body div:even").css("background-color","red");
				});
			});
		</script>
		
		
	</head>
	<body>
		<input type="button" id="btn1" value="body中的第一个div元素"/>
		<input type="button" id="btn2" value="body中的最后一个div元素"/>
		<input type="button" id="btn3" value="选择body中的奇数的div"/>
		<input type="button" id="btn4" value="选择body中的偶数的div"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" href="../../css/style.css" />
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					//选择有id属性的div
					$("div[id]").css("background-color","red");
				});
				
				$("#btn2").click(function(){
					//选择有id属性的值为two的div
					$("div[id='two']").css("background-color","red");
				});
				
			});
		</script>
		
		
	</head>
	<body>
		<input type="button" id="btn1" value="选择有id属性的div"/>
		<input type="button" id="btn2" value="选择有id属性的值为two的div"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

 

马马超
关注
专栏目录
JQuery选择器语法
苏木三少
03-25 1106
JQuery选择器语法：一、什么是选择器语法：1、就是DOM对象进行定位的条件，比如根据ID定位，根据标签类型名。2、jquery中只有三种选择器二、基本选择器：1、【定位条件】：可以根据ID编号，根据标签类型名，根据标签采用样式选择器2、【使用】：三、层级选择器：1、[定位条件]：可以根据标签之间父子关系定位，可以根据标签之间兄弟关系定位2、[标签之间关系]3、【使用】： 一、什么是选择器语法： 1、就是DOM对象进行定位的条件，比如根据ID定位，根据标签类型名。 2、jquery中只有三种选择器 二、基
JQuery 选择器使用详解
闲时不练功，忙时一场空
11-05 2676
文章目录1. 基本选择器2. 层级选择器3. 属性选择器4. 基本过滤器5. 内容过滤器6. 表单过滤器:7. 表单对象属性过滤器8. jQuery 元素筛选 选择器：筛选具有相似特征的元素(标签) 1. 基本选择器 1. 标签选择器（元素选择器） 语法： $("html标签名") 获得所有匹配标签名称的元素 案例： $("div") 选择元素名为<div>的所有元素 2. id选择器 语法： $("#id的属性值") 获得与指定id属性值匹配的元素 案例： $("#one") 选
jQuery选择器
最新发布
weixin_52937170的博客
09-05 1517
jQuery选择器；jQuery选择器速查手册；快速上手jQuery选择器的学习和应用；
JQuery选择器超级详细
林高禄
08-06 1万+
基本选择器 id选择器：$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮，将id为myid的元素背景为绿色 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>JQuery选择器</title> <script src="js/jquery-3.3.1.min...
jQuery选择器分类
weixin_45753617的博客
08-19 1189
jQuery选择器分类
jquery选择器以及案例
m0_59745705的博客
11-03 1161
jquery选择器是jquery为我们提供的一组方法，让我们更加方便的获取到页面中的元素，注意：jquery选择器返回的是jquery对象。 jquery选择器有很多，但是选择器之间可以互相替代，就是说获取到一个元素，会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。 Css()方法：获取/设置样式 1.获取样式：css（）方法设置参数为要获取值的样式名。 $('#getbtn').click(function(){ 1.1获取id为div1这个元素的样式 conso
jQuery选择器大全总结
impact_factor的博客
08-12 1万+
jQuery选择器jQuery的选择器基本选择器基本过滤选择器属性过滤选择器表单选择器子元素选择器操作元素属性操作样式操作样式类获取或设置元素高度和宽度操作HTML代码操作text代码 jQuery的选择器 基本选择器 id选择器：#id 类选择器：.class 标签名选择器： * ：匹配所有元素 基本过滤选择器 Element:first ：选取第一个元素 Element:last : 选取最后一个元素 Element:not(selector)：去除所有与给定选择器匹配的元素 Element:ev
jQuery 选择器
小葵坤_易安的博客
02-22 2万+
一、什么是jQuery选择器 jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。 二、jQuery选择器的优势 代码更简单； 支持CSS1到CSS3选择器； 完善的机制处理 三、jQuery选择器 jQuery选择器分类示意...
jQuery 选择器全部详细笔记
业精于勤，荒于嬉
04-23 2042
1. jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom...2. 提供方法、events、选择器，并且方便地为网站提供 AJAX 交互3. 其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情.4. jQuery 实现了浏览器的兼容问题1. jQuery 对象就是对 DOM 对象进行包装后产生的对象比如： $("#test").html() 意思是指：获取ID为test的元素内的html代码。
jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用
Jin_Xiang123的博客
01-14 4112
本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识 在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。名称语法构成描述示例标的id匹配元素。
jQuery选择器中的特殊符号处理方法
12-29
一般情况下，在jQuery选择器中，我们很少会用到诸如“.”、“#”、“(”、“[”等特殊字符，因为根据W3C规定，HTML文档中属性的值是不能包含有这些个特殊字符的，但是在实际应用中，偶尔也会遇到表达式中含有“#”和...
详解强大的jQuery选择器之基本选择器、层次选择器
12-10
jQuery选择器是jQuery库的核心特性之一，它极大地简化了JavaScript中的DOM操作，使得开发者能够更加高效地选取和操作页面上的元素。本文将详细介绍jQuery的基本选择器和层次选择器。 首先，我们来看基本选择器，这...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
jQuery的几个经典案例
热门推荐
马某人的博客
07-08 2万+
案例一：使用jQuery完成下拉列表左右选择&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉列表左右选择&lt;/title&gt; &lt;script type="text/javascript" src=&quo
使用ajax调用WebAPI
马某人的博客
01-16 4729
&lt;script&gt; $(function(){ $('#search').click(function(){ alert("123"); $.ajax({ url:"http://192.168.0.160:8080/selfhost/webapi/mes/GETMESKANBAN", type:"post", data:{"sourceTyp...
CSS的五种选择器
马某人的博客
07-08 2011
                                        元素选择器格式：标签名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }实例：h1{ color: #F00; font-size; 50px; } &lt;h1&gt;元素选择器&lt;/h1&gt;                      ...
JavaScript和JQuery的区别
马某人的博客
11-13 201
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS与JQ页面加载区别</title> <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></sc...
jQuery选择器全面解析
本教程将深入讲解jQuery选择器的使用。 1. 在HTML页面中添加jQuery 在HTML页面中引入jQuery库，通常有两种方式：一是通过谷歌的CDN(Content Delivery Network)来链接官方提供的最新或特定版本；二是直接下载jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值