9、jQuery选择器(基本选择器、JQ的导入、层级选择器、过滤选择器、属性选择器、表单选择器）

最新推荐文章于 2022-07-11 18:52:20 发布
最新推荐文章于 2022-07-11 18:52:20 发布
阅读量129 收藏 1
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangbo_csdn/article/details/119638420
版权

Web目录标题

1、基本选择器

JQ第一步先导入jar包

在这里插入图片描述

在HTML中引入jar包

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器</title>
		<script src="../../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<script type="text/javascript">
			$(function() {
				// 给btn1添加单击事件, id为one的元素, 背景颜色变化
				/* document.getElementById("btn1").onclick = function() {
					document.getElementById("one").style.backgroundColor = "pink";
				} */
				// JS事件 是属性  onxx = function() {}
				// JQ事件 是函数  xx(function() {})
				$("#btn1").click(function() {
					// id选择器
					$("#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、层级选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<script src="../../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function() {
					$("body div").css("background-color","pink");
				});
				$("#btn2").click(function() { // 直接子代元素
					$("body > div").css("background-color","pink");
				});
				$("#btn3").click(function() { // 下一个元素
					$("#two + div ").css("background-color","pink");
				});
				$("#btn4").click(function() { // 兄弟元素
					$("#one ~ div ").css("background-color","pink");
				});
			})
		</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、基本过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本过滤选择器</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<script src="../../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function() { // 第一个元素
					$("div:first").css("background-color","pink");
				});
				$("#btn2").click(function() { // 最后一个元素
					$("div:last").css("background-color","pink");
				});
				$("#btn3").click(function() { // 奇数行
					$("div:even").css("background-color","pink");
				});
				$("#btn4").click(function() { // 偶数行
					$("div:odd").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>

在这里插入图片描述

4、属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<script src="../../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function() { // 有对应属性
					$("div[id]").css("background-color","pink");
				});
				$("#btn2").click(function() { // 有属性并且属性值固定
					$("div[id='two']").css("background-color","pink");
				});
			})
		</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、表单选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单选择器</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<script src="../../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				// input, textarea, select 和 button 元素
				$("#btn1").click(function() {
					$(":input").css("background-color","pink");
				});
				$("#btn2").click(function() {
					$(":text").css("background-color","pink");
				});
			})
		</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>

在这里插入图片描述

6、style.css

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
    background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
	padding-left:25px;
}
.onSuccess{
    background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
	padding-left:25px;
}
.high{
    color:red;
}

  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;
  }

table		{ border:0;border-collapse:collapse;}
td	{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th			{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even		{ background:#FFF38F;}  /* 偶数行样式*/
.odd		{ background:#FFFFEE;}  /* 奇数行样式*/
.selected		{ background:#FF6500;color:#fff;}

在这里插入图片描述

天 阳 在 线€
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQ样式选择器
weixin_34054866的博客
04-18 66
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/JQ3.3.1.js"></script> ...
jQuery基础入门
weixin_34239592的博客
04-14 54
一、什么是 jQuery 　　Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。 二、怎么用 jQuery 　　jquery-1.8.3.js：一般用于学习阶段。 　 jquery-1.8.3.min.js：用于项目使用阶段 注：Jquery它是...
jquery选择器--学习笔记
qq_34227291的博客
10-07 166
一、jquery选择器风格: jquery中的选择器完成继承了CSS的风格。利用JQ选择器，可以非常便捷和快速找出特定的DOM元素，然后为它们添加相应的行为。使用CSS选择器时需要考滤主流浏览器是否支持某些选择器，而jquery无需担心浏览器是否支持这一选择器。 二、jquery简洁写法 (这里是美元符)()函数在很多javascript类库中都被作为一个选择器函数来使用，在jquery中也不例...
JQuery选择器及其样式操作、筛选方法以及链式编程
世界和我们都不该止步于此
03-10 1523
jQuery选择器---jQuery筛选方法---jQuery的样式操作---设置类样式方法----链式编程
web前端(5)：了解jQuery(常见选择器+相关尺寸+元素/节点操作)
不愿意透露姓名的网友
08-20 1510
常见选择器+相关尺寸+元素/节点操作
jquery表单对象属性过滤选择器实例分析
10-24
主要介绍了jquery表单对象属性过滤选择器,实例分析了jQuery选择器的相关使用技巧,需要的朋友可以参考下
jQuery表单对象属性过滤选择器实例详解
10-21
主要介绍了jQuery表单对象属性过滤选择器,结合实例形式详细分析了jQuery针对表单元素进行属性过滤操作的具体实现技巧,需要的朋友可以参考下
jquery选择器之层级过滤选择器详解
12-11
代码如下:$(“ancestor descendant”)：选取parent元素后所有的child元素$(...注:siblings是过滤器后两个用的比较少，一般会有其他选择器替代 代码如下:$(“prev + next”)等价于next()$(“prev ~ siblings”)等价
JQuery中属性过滤选择器用法实例分析
10-24
主要介绍了JQuery中属性过滤选择器用法,实例分析了jQuery属性过滤选择器的相关使用技巧,需要的朋友可以参考下
Jquery复习-选择器
gtolilei的博客
02-12 405
Jquery用来干什么? 如何使用 1.导入jquery-*.js文件          &lt;script type="text/javascript" src="jquery-1.7.2.js"&gt;&lt;/script&gt; 2.初始化document.function   3.     实现全选与全不选 &lt;!DOCTYPE html PUBLIC ...
JQuery 选择器 - 根据css style和id选择
weixin_34038293的博客
01-19 1249
2019独角兽企业重金招聘Python工程师标准>>> ...
JQuery选择器——CSS选择器
十一的博客
06-18 890
CSS选择器用法：
JQuery选择器（基本选择器、层次选择器、属性选择器、滤选择器）
SYQ15544423296的博客
07-11 1841
jQuery选择器（基本选择器、层次选择器、属性选择器、滤选择器）
jQuery的选择器分类
天高任鸟飞
07-26 285
基本选择器 //ID选择器 $("#id") //元素选择器 $("div") //类选择器 $(".classname") //组合选择器 $(".classname,.classname1,#id1") 层次选择器 //子元素选择器 $("#id&gt;.classname") //后代元素选择器 $(&quo
JQ类css选择器
weixin_43246741的博客
12-06 879
1) 类css选择器 1.1) 基本选择器 ID选择器、标签选择器、类选择器 并集选择器、交集选择器、全局选择器 1.2) 层次选择器 后代选择器：使用空格作为分隔符 子选择器：使用&gt;作为分隔符 相邻元素选择器：使用+作为分隔符 同辈元素选择器：使用~作为分隔符 1.3) 属性选择器 ...
【整理】JQ样式篇——选择器
sinat_30511235的博客
08-10 919
id选择器 id选择器：一个用来查找的ID，即元素的id属性 $( "#id" ) id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高 效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器 值得注意： id是唯一的，每个id值在一个页面中只能使
jQuery-样式（jQuery选择器）
小石头
02-24 9824
jQuery-样式（jQuery 选择器）
pyzmq-23.2.1-cp310-cp310-musllinux_1_1_x86_64.whl
最新发布
06-07
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
jquery 属性选择器 属性
05-31
jQuery属性选择器是一种基于元素属性来选择元素的方法。通过指定元素属性的名称和值，我们可以选中满足条件的元素。以下是常用的属性选择器： 1. [attribute]：选择带有指定属性的元素。 2. [attribute=value]：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值