jQuery学习笔记：jQuery选择器（1）

最新推荐文章于 2022-10-13 17:37:31 发布
最新推荐文章于 2022-10-13 17:37:31 发布
阅读量304 收藏
点赞数 1
分类专栏： JavaWeb 文章标签： jquery css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49019244/article/details/122033799
版权

学习内容：jQuery选择器（1）（代码在每个小节的下方，css代码会放到文章的最后面）

文章目录

1. 基本选择器

1.1、#ID 选择器：根据 id 查找标签对象

$("#one");//选择 id 为 one 的元素

1.2、.class 选择器：根据 class 查找标签对象

$(".mini");//选择 class 为 mini 的所有元素

1.3、element 选择器：根据标签名查找标签对象

$("div");//选择标签名是 div 的所有元素

1.4、* 选择器：表示任意的，所有的元素

$("*");//选择所有的元素

1.5、selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返

$("span,#two");//选择所有的 span 元素和id为two的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="xzq.css" />
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
				$(function () {//相当于 window.onload = function(){}
					//1.选择 id 为 one 的元素 "background-color","#bbffaa"
					$("#btn1").click(function () {
						// css() 方法 可以设置和获取样式
						$("#one").css("background-color","#bbffaa");
					});
					
					//2.选择 class 为 mini 的所有元素
					$("#btn2").click(function () {
						$(".mini").css("background-color","#bbffaa");
					});

					//3.选择标签名是 div 的所有元素
					$("#btn3").click(function () {
						$("div").css("background-color","#bbffaa");
					});

					//4.选择所有的元素
					$("#btn4").click(function () {
						$("*").css("background-color","#bbffaa");
					});

					//5.选择所有的 span 元素和id为two的元素
					$("#btn5").click(function () {
						$("span,#two").css("background-color","#bbffaa");
					});
				});
		</script>
	</head>
	<body>
<!-- 	<div>
		<h1>基本选择器</h1>
	</div>	 -->	
		<input type="button" value="选择 id 为 one 的元素" id="btn1" />
		<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
		<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
		<input type="button" value="选择 所有的元素" id="btn4" />
		<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
		<br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span class="one" id="span">^^span元素^^</span>
	</body>
</html>

2. 层级选择器

2.1、ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素

$("body div");//选择 body 内的所有 div 元素

2.2、parent > child 子元素选择器：在给定的父元素下匹配所有的子元素

$("body > div");

2.3、prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素

$("#one+div");//选择 id 为 one 的下一个 div 元素

2.4、prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

$("#two~div");//选择 id 为 two 的元素后面的所有 div 兄弟元素

补充：
$(document).ready()和onload的区别
onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载。
而$(document).ready()所要执行的代码是在DOM元素被加载完成的情况下执行，
所以，使用document.ready()方法的执行速度比onload()的方法要快。

Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作，
jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="xzq.css" />
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//1.选择 body 内的所有 div 元素
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

				//2.在 body 内, 选择div子元素  
				$("#btn2").click(function(){
					$("body > div").css("background", "#bbffaa");
				});

				//3.选择 id 为 one 的下一个 div 元素 
				$("#btn3").click(function(){
					$("#one+div").css("background", "#bbffaa");
				});

				//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two~div").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>	
		<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
		<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
		<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
		<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素^^</span>
	</body>
</html>

3. 上述例子的css部分

div, span, p {
    width: 140px;
    height: 140px;
    margin: 5px;
    background: #aaa;
    border: #000 1px solid;
    float: left;
    font-size: 17px;
    font-family: Verdana;
}
div.mini {
    width: 55px;
    height: 55px;
    background-color: #aaa;
    font-size: 12px;
}
div.hide {
    display: none;
}
Serein_Pt
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery整理笔记二----jQuery选择器整理
曹海成的专栏
04-19 2623
一、基本选择器 1、ID选择器 JavaScript提供了原生方法实现在DOM中选择指定ID值得元素。用法如下： var element=document.getElementById("id"); jQuery简化了其操作： var $element=$("#id"); 实际上就是 jQuery对javaScript进行了一下包装，jQuery的ID选择方法在执行效率上要低于JavaS
jQuery学习笔记之jQuery选择器的使用
12-08
jQuery选择器是jQuery库的核心部分，它允许开发者高效地选取DOM元素，并进行一系列操作。本文将深入探讨jQuery选择器的使用，包括基本选择器、层次选择器、过滤选择器、内容过滤、可见性过滤、属性过滤、子元素过滤...
jQuery选择器
weixin_33998125的博客
01-01 115
1.1   jQuery详细介绍 1.1.1    $问题 a)     Js命名归法：下划线、字母、$、数字 b)     但是不能以数字作为开头 jQUery的两个变量：$ 和 jQuery jQuery占用了我们两个变量：$ 和 jQuery 1.1.2    js入口函数跟jQuery入口函数的区别： Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完...
jQuery选择器笔记
chenchun的博客
05-31 284
选择器是jQuery的根基。 jQuery中的选择器完全继承了css风格。利用jQuery选择器，可以非常便捷快速地找到特定的DOM元素，然后为他们添加相应的行为，而无需担心浏览器是否支持这一选择器。
JQuery笔记选择器
最新发布
Q53100的博客
10-13 355
我是列表项2我是列表项3我是列表项4我是列表项1我是列表项2我是列表项3我是列表项4我是列表项1我是列表项2我是列表项3我是列表项4
JQuery 学习笔记 选择器之六
12-10
在本篇JQuery学习笔记中，我们探讨了jQuery选择器的高级用法，特别是与CSS伪类选择器相结合的应用。这段代码示例展示了如何利用jQuery选择器改变HTML元素的样式，特别是针对列表项（`<li>`）进行操作。下面我们将...
JQuery 学习笔记 选择器之一
10-29
jQuery选择器允许我们高效地选取DOM元素，然后执行一系列操作，如修改内容、添加样式或绑定事件。 首先，让我们了解jQuery的基本结构。在开始编写任何jQuery代码之前，通常会使用`$(document).ready()`函数确保DOM...
JQuery 学习笔记 选择器之三
10-29
在本篇jQuery学习笔记中，我们将探讨选择器的第三部分，包括`first`, `last`, `not`, `even`, `odd`, `eq`, `gt`, `lt`, 和 `header`等特殊选择器。这些选择器提供了更精细的元素筛选功能，帮助开发者更高效地操作...
JQuery 学习笔记 选择器之二
12-10
总的来说，jQuery选择器是其强大功能的核心之一，通过熟练掌握和灵活运用这些选择器，我们可以编写出简洁而高效的JavaScript代码，大大提升网页开发的效率。在实际项目中，可以根据具体需求选择合适的选择器组合，...
笔记4，jQuery选择器
小麦先生
02-18 758
1，jQuery选择器     jQuery选择器类似于CSS选择器，用来选取网页中的元素     $("h3").css("background","#09F");         获取并设置网页中所有元素的背景 “         h3”为选择器语法，必须放在$()中         $(“h3”)返回jQuery对象         .css()是为jQuery对象设置样式的方法
jQuery学习笔记之选择器
qq_48238787的博客
07-22 145
jquery学习笔记   首先是如何在Html中引入jQuery库 <script src="jquery-3.5.1.js"></script> 1:基础选择器    基础选择器分为三类：1、基本选择器   2、层次选择器 3、属性选择器 1.1基本选择器   基本选择器又分为四类:       1、元素选择去 2、id选择器 3、class选择器 4、群组选择器 1.1.1元素选择器   语法:    $(“元素名”)   例子： 1.1.2 id选择器   语法: .
非常好用的jquery选择器笔记整理
萧逸才的博客
06-10 564
jQuery是我们在开发前端时最常用到的一个JavaScript框架了，使用jQuery除了最基本的语法外，我觉得最重要的就是选择器了，有时使用一个正确的选择器，可以节省你大量的时间和代码，在这里整理了一些我在写代码的过程中遇到和使用的jQuery选择器和大家分享。 $("#id")选择器根据ID来选择元素，是最常用的选择器之一。$(".class")选择器根据class来选择元素，是最常用的选择器
【jQuery学习笔记------选择器】
Will 的专栏
04-17 484
选择器引擎Sizzle jQuery从1.3版本开始，使用了新的选择器引擎Sizzle 它是jQuery作者John Resig开发的DOM选择引擎。   选择器和过滤器 第一类，选择器（selector）。即根据给定的选择符，从DOM文档树找到相关的元素节点，并存储到结果集中 第二类，过滤器（filter）。根据表达式的条件，在结果集中过滤元素。 由于可以直接使用document.g
jquery parent 选择器
05-14 147
实例1： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript" src="/jquery/jquery.js"></script> 5 </head> 6 7 <body> 8 ...
jQuery parent > child 选择器
佰草伐
08-27 323
实例 选取 元素的直接子元素的 元素： $(“div > span”) 尝试一下 » 定义和用法 (“parent > child”) 选择器选取指定元素的直接子元素的所有元素。 语法 (“parent > child”) 参数 描述 parent 必需。规定要选取的父元素。 child 必需。规定要选取的直接子元素（属于指定的父元素）。 实例 尝试一下 - 实例 选取 元...
jQuery的parent > child选择器
实践求真知
04-12 598
一 介绍 parent > child选择器中的parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素。 使用该选择器只能选择父元素的直接子元素。parent > child选择器的使用方法如下： $("parent > child"); parent是指任何有效的选择器。 child是用以匹配元素的选择器，并且它是匹配元素的选择器，并且它是parent元素的
jquery 的on方法中this指向触发事件的最底层dom元素
lzf的博客
05-15 3171
参数function中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略，则this指向当前匹配元素(也就是该元素)。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值