JQ的几种选择器

最新推荐文章于 2022-06-16 09:09:38 发布
最新推荐文章于 2022-06-16 09:09:38 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： jq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36594703/article/details/78304884
版权

1.基本选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器</title>
		<link rel="stylesheet" href="../jq/style.css">
		<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("#one").css("background-color","red");
				});
				$("#btn2").click(function(){
					$(".mini").css("background-color","red");
				});
				$("#btn3").click(function(){
					$("div").css("background-color","red");
				});
				$("#btn4").click(function(){
					$("*").css("background-color","red");
				});
				$("#btn5").click(function(){
					$("#two,.mini").css("background-color","red");
				});
			});
			
		</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>
2.层级选择器

A B:获得A元素内部的所有B元素（祖孙后代）

A>B:获得A元素下面的所有B子元素（父子）

A+B:获得A元素同级下一个B元素（兄弟）

A~B:获得A元素同级所有B元素（兄弟）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" href="../jq/style.css" type="text/css"/>
		<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("body div").css("background-color","blue");
				});
				$("#btn2").click(function(){
					$("body>div").css("background-color","blue");
				});
				$("#btn3").click(function(){
					$("#two+div").css("background-color","blue");
				});
				$("#btn4").click(function(){
					$("#one~div").css("background-color","blue");
				});
			});
		</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>
3.基本过滤选择器
:first  第一个

:last   最后一个

:not()    删除指定内容

:even   偶数

:odd   奇数

:eq    指定第几个

:gt    大于

:lt     小于

:header   获得标题

:animated    获得动画的

:focus    获得焦点

<script>
			$(function(){
				$("#btn1").click(function(){
					$("body div:first").css("background-color","red");
				});	
				$("#btn2").click(function(){
					$("body div:last").css("background-color","red");
				});	
				$("#btn3").click(function(){
					$("body div:odd").css("background-color","red");
				});	
				$("#btn4").click(function(){
					$("body div:even").css("background-color","red");
				});	
			});
		</script>
4.属性选择器
[属性名]，[属性名=值]，[属性名！=值]

[属性名^=值]    获得属性名以值开头元素

[属性名$=值]   获得属性名以值结尾元素

[属性名*=值]    获得属性名含有值 元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" href="../jq/style.css" type="text/css"/>
		<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("div[id]").cass("background-color","blue");
				});
				$("#btn2").click(function(){
					$("div[id='two']").cass("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>

5.表单属性选择器
:enabled    可用

:disabled   不可用

:checked    选中

:selected    选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单选择器</title>
		<link rel="stylesheet" href="../jq/style.css" type="text/css"/>
		<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
		<script>
		$(function(){
			$("#btn1").click(function(){
				$(":input").css("background-color","blue");
			});
			$("#btn2").click(function(){
				$(":text").css("background-color","green");
			});
		});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="选择所有input元素" />
		<input type="button" id="btn2" value="选择文本框" />
		<br/>
		<form>
			<input type="text" /><br />
			<input type="checkbox" /><br />
			<input type="radio" /><br />
			<input type="image" /><br />
			<input type="file" /><br />
			<input type="submit" />
			<input type="reset" /><br />
			<input type="password" /><br />
			<input type="button" /><br />
			<select><option/></select><br />
			<textarea></textarea><br />
			<button></button>
		</form>
	</body>
</html>


qq_36594703
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jq的选择器
KingRH的博客
11-19 920
jq选择器 文章目录jq选择器选择器1基本选择器2层次选择器3过滤选择器 选择器 我们先复习一下js的选择器都有些什么 常见的有 id选择器，类选择器，属性选择器，标签名选择器 随便一个id选择器 <script> var p=document.getElementById("id") p.onclick=function(){ console.log("这是js写法") } </script> 如代码所示获得的i
关于JQ选择器的介绍
weixin_44543271的博客
05-07 100
今天来跟大家讲一下JQ选器的问题。这个在编写代码的时候很重要。因为你要对 具体的元素进行编写。 文本1 文本4 ul2 ul2 ul2_7 姓名 ...
第二章.jquery选择器
养有道
12-03 528
第二章 jQuery选择器     1.基本选择器             #id             $("#one")选择 id为 one 的元素         .class         $(".mini")选择 class 为 mini 的所有元素         element    $("p")选择元素名是 p 的所有元素                *
jQuery学习笔记
等一杯咖啡的博客
01-17 895
一、引入1、页面加载执行$(function(){ //页面加载完执行 }) 2、根据标签id得到jquery对象$("#id") e.g. $("#username") 3、获取jQuery对象的值$("#id").val(); e.g. $("#username").val(); 4、将dom对象转换为jQuery对象var （jQuery）变量名 = $(dom对象); e.g
jquery中#和.的用法和区别
gao454917848的专栏
09-02 3120
$("#label")：这个代码选中html文档中，id为label的标签，即； $(".label")：这个代码选中html文档中，class属性为label的标签，即； $("label")：这个代码选中html文档中，标签名为label的标签，即；
jQuery中选择器有哪些？
小缘同学的博客
09-14 2816
目录 一、基本选择器 1.1 元素选择器 1.2 属性选择器 1.3 css选择器 二、层次选择器 三、过滤选择器 四、表单选择器 一、基本选择器 基本选择器是最常用的选择器，其中又有元素选择器、属性选择器、css选择器等多种类别。 1.1 元素选择器 $("p") 选取<p>元素 $("#demo") 选取id为"demo"的元素 $(".demo") 选取class为"demo"的元素 1.2 属性选择器 $("[href]") 选取所...
JQ 层次选择器
08-13
下面我们将详细讲解几种主要的层次选择器，并通过实例演示它们的用法。 1. **后代选择器（Descendant Selector）** - 使用空格分隔两个选择器，表示前一个选择器的任何后代元素。例如，`div p`会选择所有位于`div`...
JQ 属性选择器
08-13
jQuery 的属性选择器主要有以下几种： 1. `[attr]`：选择具有指定属性的所有元素。 2. `[attr=value]`：选择属性值精确匹配给定值的元素。 3. `[attr^=value]`：选择属性值以给定值开头的元素。 4. `[attr$=value]`...
JQ继电器
03-19
在选择和使用JQ继电器时，需要关注几个关键点： - 替换含镉部件：由于无镉接触的推出，建议用户在使用前进行实际应用评估，确保替换部件的性能满足要求。 - 根据实际负载检验规格：继电器的开关容量可能会因开关频率...
jquery选择器简述
11-24
除了这些基础选择器，jQuery还提供了更多高级选择器，如属性选择器（`$("[attribute=value]")`）、后代选择器（`$("ancestor descendant")`）、子元素选择器（`$("parent > child")`）等，以及基于关系的选择器，如...
JQuery里面的几种选择器 查找满足条件的元素$(#控件ID)
12-08
本文将详细讲解jQuery中的几种选择器，以及如何利用它们来查找并操作满足特定条件的元素。 1. **Id选择器** 在jQuery中，Id选择器使用`#`符号来选取具有特定ID的元素。例如，如果你有一个ID为`btnClick`的按钮，你...
jQuery选择器之获取祖先级、兄弟级、子孙级元素
夜空下的凝视
05-18 1万+
一、获取祖先级元素 1、parent(selector)：返回直接父元素，可选择过滤。 2、parents(selector)：返回祖先元素，包括父元素，可选择过滤。 3、closest(selector)：返回第一个祖先元素（祖先是父、祖父、曾祖父，依此类推。），从当前元素开始沿 DOM 树向上，可选择过滤。 二、获取兄弟级元素 1、next(selector)：返回下一个同胞元素，可选择过滤。...
Jquery 选择器
飞奔的小强
05-15 688
jQuery 选择器简介 　　　　  jQuery 选择器允许对 HTML 元素组或单个元素进行操作。 　　　　jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 　　　　jQuery 中所有选择器都以美元符号开头：$()。 1 .基本选择器   　　　　$("#te...
jQuery选择器
m0_57774967的博客
06-16 4660
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jQuery实用选择器
zbbyy2004510的博客
11-04 710
基本选择器： 标签选择器 :$("h1") 类选择器 :$(".class") id选择器 : $("#id") 全局选择器 : $("*") 并集选择器 : $("h1,.class,#id,span") 层次选择器: 后代选择器 :$("ul li") 子类选择器 :$(...
jQuery基本选择器
weixin_57762662的博客
05-19 836
我们都知道，在CSS中，选择器是选择页面中的某些HTML元素，jQuery中的选择器我们使用“$”，因为这种方式比较全面，而且也不会存在浏览器的兼容问题。jQuery的选择器有很多，我们把它分为基本选择器、层次选择器、过滤选择器和属性选择器。不过我今天只讲基本选择器，而基本选择器也分为四种：元素选择器、ID选择器、类选择器和并列选择器。 元素选择器： 元素选择器是可以选中HTML文档中所有的某个元素。如$(“li”)可以表示选中本网页中所有的li元素，又如$("input")可以表示选中本网页中所有的i
jQuery中选择器有哪几种(哪几种最常见)
热门推荐
NULL
01-17 4万+
一、基本选择器 基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元素。 1、ID选择器 #id 描述：根据给定的id匹配一个元素， 返回单个元素（注：在网页中，id名称不能重复） 示例：$("#test") 选取 id 为 test 的元素 2、类选择器 .class 描述：根据给定的类名匹配元素，返回元素集合 示例：$(".te
毕业设计，基于SpringBoot+Vue+MySQL开发的音乐网站，源码+数据库+论文答辩+毕业论文+视频演示
08-20
毕业设计，基于SpringBoot+Vue+MySQL开发的音乐网站，源码+数据库+论文答辩+毕业论文+视频演示 随着信息技术在管理上越来越深入而广泛的应用，管理信息系统的实施在技术上已逐步成熟。本文介绍了音乐网站的开发全过程。通过分析音乐网站管理的不足，创建了一个计算机管理音乐网站的方案。文章介绍了音乐网站的系统分析部分，包括可行性分析等，系统设计部分主要介绍了系统功能设计和数据库设计。 本音乐网站管理员功能有个人中心，用户管理，歌曲分类管理，歌曲信息管理，管理员管理，系统管理等。用户可以注册登录，试听歌曲，可以下载歌曲。因而具有一定的实用性。 本站是一个B/S模式系统，采用Spring Boot框架，MySQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得音乐网站管理工作系统化、规范化。本系统的使用使管理人员从繁重的工作中解脱出来，实现无纸化办公，能够有效的提高音乐网站管理效率。 关键词：音乐网站；Spring Boot框架；MySQL数据库
大学生创业计划书(25)-两份资料.doc
最新发布
08-20
大学生创业计划书(25)-两份资料.doc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值