JQuery入门&选择器

最新推荐文章于 2022-10-07 12:52:21 发布
最新推荐文章于 2022-10-07 12:52:21 发布
阅读量971 收藏
点赞数 2
文章标签： jquery javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61857264/article/details/123494936
版权
本文详细介绍了JQuery的基本使用步骤，包括如何引入JQuery库，并通过实例展示了各种选择器的用法，如id选择器、类选择器、通配符选择器和层次选择器。此外，还讲解了过滤选择器，如获取第一个元素、最后一个元素、偶数下标和奇数下标元素的方法。这些内容涵盖了JQuery的选择器基础，帮助开发者更高效地操作DOM元素。
摘要由CSDN通过智能技术生成

目录

一.介绍

二.JQuery的使用步骤

三.JQuery选择器

基本选择器

id选择器：#id

类选择器（class）：.class

通配符 *（全选）

层次选择器

拿到div中所有的p标签

拿到div中的第一级p标签(子标签)

拿到类名为b的第零个元素

过滤选择器

获取第一个元素（first）

获取最后一个元素

获取下标为偶数的元素（even）

 获取下标为奇数的元素odd

获取某一范围的元素：大于gt,小于lt

四.下期马上更新 

一.介绍

JQuery不是一门语言，是JScript的框架，是js的升级和简化

官网地址https://jquery.com

JQuery可以减少js代码量 包含（选择器，css，HTML事件处理，js动画，浏览器版本兼容，丰富插件）

JQuery应用范围：中大型网站开发

二.JQuery的使用步骤

在官网下载JQuery库

引入：将JQuery引用到html文件中

使用：在要操作JQuery的HTML文档中写下 </style>
    <!--引入jquery-->
    <script src="js/jquery-3.5.1.js"></script>（注意：最好写在head标签中，因为代码从上往下执行）

三.JQuery选择器

基本选择器

id选择器：#id

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: black;
				display: inline-block;
			}
		</style>
		<script src="js/jquery-3.5.1.js">
		</script>
	</head>
	<body>
		
		<div id="a">
				<div class="b">		
					<div id="">
						
					</div>
				</div>
		</div>
	
		<button type="button" onclick="f1()">点我换颜色</button>
		<script type="text/javascript">
		// 根据id改变背景颜色
			// function f1(){
			// 	console.log($("#a"))
			// 	$("#a").css("background","blue")
			// }
			
		</script>
	</body>
</html>

类选择器（class）：.class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: black;
				display: inline-block;
			}
		</style>
		<script src="js/jquery-3.5.1.js">
		</script>
	</head>
	<body>
		
		<div class="a">
				<div class="b">		
					<div id="">
						
					</div>
				</div>
		</div>
		<button type="button" onclick="f1()">点我换颜色</button>
		<script type="text/javascript">
			// 根据类名改变背景颜色
			// function f1(){
			// 	$(".a").css("background","blue")
			// }
		</script>
	</body>
</html>

通配符 *（全选）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
		</script>
	</head>
	<body>
		<script type="text/javascript">
			// 拿到文档中所有标签
			// 	console.log($("*"))
		</script>
	</body>
</html>

层次选择器

拿到div中所有的p标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: black;
				display: inline-block;
			}
		</style>
		<script src="js/jquery-3.5.1.js">
		</script>
	</head>
	<body>
		
		<div class="a">
	<p>haha</p>
				<div class="b">		
					<div id="">
						<p>haha</p>
					</div>
				</div>
		</div>
		<button type="button" onclick="f1()">点我换颜色</button>
		<script type="text/javascript">
			// 拿到div中所有的p标签
			// function f1(){
			// 	var a1=$("div p");
			// 	console.log(a1.text())//拿到p标签中的值
			// }
		</script>
	</body>
</html>

拿到div中的第一级p标签(子标签)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: black;
				display: inline-block;
			}
		</style>
		<script src="js/jquery-3.5.1.js">
		</script>
	</head>
	<body>
		
		<div class="a">
             <p>阿这</p>
				<div class="b">		
                <p>就这</p>
					<div id="">
						<p>哈哈</p>
					</div>
				</div>
		</div>
		<button type="button" onclick="f1()">点我换颜色</button>
		<script type="text/javascript">
			// div中的第一级p标签(子标签)
			function f1(){
				var a1=$(".a>p")
				console.log(a1)
			}
		</script>
	</body>
</html>

拿到类名为b的第零个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: black;
				display: inline-block;
			}
		</style>
		<script src="js/jquery-3.5.1.js">
		</script>
	</head>
	<body>
		<div class="b">
		</div>
		<div class="b">
		</div>
		<script type="text/javascript">
			// 拿到类名为b的第零个元素
			//$(".b").eq(0).css("background","blue")
			$($(".b")[0]).css("background","blue")
		</script>
	</body>
</html>

过滤选择器

获取第一个元素（first）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
		</script>
		<style type="text/css">
			.aa{
				background: blue;
			}
			.bb{
				background: orange;
			}
		</style>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr><td>商品名字</td>
			<td>商品价格</td>
			<td>商品数量</td>
			</tr>
			<tr><td>苹果</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>草莓</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>芒果</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>桃子</td>
			<td>88</td>
			<td>9</td>
			</tr>
		</table>
		<script>
			$("tr").first().addClass("aa")//改变类名为aa的样式
			 		</script>
					
	</body>
</html>

获取最后一个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
		</script>
		<style type="text/css">
			.aa{
				background: blue;
			}
			.bb{
				background: orange;
			}
		</style>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr><td>商品名字</td>
			<td>商品价格</td>
			<td>商品数量</td>
			</tr>
			<tr><td>苹果</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>草莓</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>芒果</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>桃子</td>
			<td>88</td>
			<td>9</td>
			</tr>
		</table>
		<script>
		$("tr").last().addClass("aa")
			 		</script>
					
	</body>
</html>

获取下标为偶数的元素（even）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
		</script>
		<style type="text/css">
			.aa{
				background: blue;
			}
			.bb{
				background: orange;
			}
		</style>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr><td>商品名字</td>
			<td>商品价格</td>
			<td>商品数量</td>
			</tr>
			<tr><td>苹果</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>草莓</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>芒果</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>桃子</td>
			<td>88</td>
			<td>9</td>
			</tr>
		</table>
		<script>
			// $("tr").even().addClass("aa")
			 		</script>
					
	</body>
</html>

 获取下标为奇数的元素odd

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
		</script>
		<style type="text/css">
			.aa{
				background: blue;
			}
			.bb{
				background: orange;
			}
		</style>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr><td>商品名字</td>
			<td>商品价格</td>
			<td>商品数量</td>
			</tr>
			<tr><td>苹果</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>草莓</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>芒果</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>桃子</td>
			<td>88</td>
			<td>9</td>
			</tr>
		</table>
		<script>
			// $("tr").odd().addClass("aa")
			 		</script>
					
	</body>
</html>

获取某一范围的元素：大于gt,小于lt

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
		</script>
		<style type="text/css">
			.aa{
				background: blue;
			}
			.bb{
				background: orange;
			}
		</style>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr><td>商品名字</td>
			<td>商品价格</td>
			<td>商品数量</td>
			</tr>
			<tr><td>苹果</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>草莓</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>芒果</td>
			<td>88</td>
			<td>9</td>
			</tr>
			<tr><td>桃子</td>
			<td>88</td>
			<td>9</td>
			</tr>
		</table>
		<script>
		//	$("tr:gt(2)").addClass("aa")
	//	$("tr:lt(2)").addClass("aa")
	$("tr:gt(1):lt(2 )").addClass("aa")
			 		</script>
					
	</body>
</html>

四.下期马上更新 

​钟意
关注
jQuery官网下载步骤
公子&小白的博客
04-18 3万+
[转载出处](https://blog.csdn.net/u011870547/article/details/50033113) [原文作者](https://blog.csdn.net/u011870547) ①.百度jQuery ，进入官网 ②.进入官网后，点击下载 ③.之后进入下载页面，会看到有各种版本，解压版和未...
jQuery的下载与基本使用
GTC的博客
03-09 4993
jQuery的下载与基本使用1、jQuery的下载2、基本使用 1、jQuery的下载 官网地址： https://jquery.com/ 点击进入官网 点进去得到的是压缩过后的内容 将所有内容进行复制， 在vsCode里面创建一个jQuery.min.js的文件，将复制的代码粘贴进去。 做完以上步骤，jQuery文件就导入成功了。 2、基本使用 想要使用jQuery时需要将jQuery文件进行引入，使用代码 <script src="jQuery文件地址"></script&gt
官网jquery压缩版引用地址
最新发布
weixin_68658847的博客
10-07 263
官网jquery压缩版引用地址
jQuery菜鸟入门
qq_49464663的博客
08-30 393
一个js库，兼容性好，扩张性强的链式调用语言。
jquery下载教程，Juery3.0框架使用案例以及基础语法；
Syntacticsugar's blog
09-22 3017
 登录juery官网， https://jquery.com/        1;点击下载; 2;点开，右键保存； ;   juery相比js优点： ①jquery的onload加载事件速度更快，并且多个加载并行   【jq绑定事件都是使用的事件函数，不需要加on】； ②js的onload加载事件，后面的覆盖前面的； ③在jQuery中，$(  )是其运行环境； ④jQuer...
jQuery选择器基础入门教程
10-22
jQuery选择器是jQuery库中非常重要...通过上述知识点的介绍，初学者可以快速入门并掌握基本的jQuery选择器使用方法，进阶用户则可以通过学习更多的操作技巧和相关专题，充分利用jQuery的强大功能来优化和丰富Web应用。
jquery入门—选择器实现隔行变色实例代码
10-27
在本文中，我们将深入探讨jQuery选择器及其在实现隔行变色效果中的应用。隔行变色是一种常见的网页设计技巧，通常用于表格，使得用户能更清晰地区分每一行数据。jQuery选择器使得这一过程变得更为简洁高效。 首先，...
jQuery入门之层次选择器实例简析
10-23
在jQuery选择器中，层次选择器是非常重要的一类，它包括了用于匹配特定父子或祖先后代关系的元素的选择器。本文将详细解析jQuery层次选择器中的"ancestor descendant"和"parent>child"选择器之间的区别，并通过实例...
jQuery 选择器用法基础入门示例
10-15
例如《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》和《jquery选择器用法总结》等，这些专题可以进一步扩展开发者对jQuery的了解和应用...
常用第三方工具库
狡辉两门的博客
05-11 1984
第三方库概览 名称 文档 一句话介绍 jQuery 官网：https://jquery.com/中文网：https://jquery.cuishifeng.cn/ 让操作DOM变得更容易 Lodash 官网：https://lodash.com/docs中文网：https://www.lodashjs.com/ 你能想到的工具函数它都帮你写了 Animate.css 官网：https://animate.style/ 常见的CSS动画效果都帮你写好了 Axios 官网：https
(GoRails)在导航栏增加自动的搜索功能（jquery插件：easyautocomplete)(gem 'ransack' 搜索对象4000✨）...
weixin_30477293的博客
10-20 226
Global Autocomplete Search 需要用到一个JQuery插件和一个搜索对象的gem EasyAutocomplete jQuery插件: https://github.com/pawelczak/EasyAutocomplete http://easyautocomplete.com/guide#sec-data-file 功能很强大，具体的看guide，写的...
jquery官网下载地址
jun的博客
06-28 1867
https://code.jquery.com/
各版本JQuery文件下载
qq_44346318的博客
01-31 1277
#【不求人系列】 1.如何在JQuery官网下载各个版本的JQuery文件？ （1）进入JQuery官网，链接如右： https://jquery.com/； （2）选择Browser Support(浏览器支持)，网页内位置见下图： （3）此页面内定位至此处，单击进入； （4）此页面便是所有版本的JQuery文件，例如： 前者为uncompressed版本，即名字中没有min，为完整版，方便阅...
主流Ajax框架的网址
zhaizhanpo的专栏
09-28 1556
EXT - http://www.extjs.com/(中文：http://www.ajaxjs.com/) Jquery - http://www.jquery.comMicrosoft Ajax - http://ajax.asp.net Java BluePrints - https://blueprints.dev.java.net/ Protptype - http://
jquery在线引入地址
时漂亮的博客
10-11 729
//百度压缩版 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
各个版本的jquery引用地址
someby的博客
07-29 1万+
jquery-3.1.1（最新） 官网jquery压缩版引用地址: script src="https://code.jquery.com/jquery-3.1.1.min.js">script> jquery-3.0.0 官网jquery压缩版引用地址: script src="https://code.jquery.com/jquery-3.0.0.min.js">scrip
【jQuery】jQuery官方基本教程的学习笔记1-核心Core
阿来小同学的博客
12-21 858
前言： 基本概念就不介绍了
jquery选择器tr:even获取偶数行、tr:odd 获取奇数行
热门推荐
wzx735481897的博客
06-19 1万+
在jquery中： $('table tr:even')  -> 表示获取一个table 所有的索引为偶数的行， 其中索引index 从0开始算起， 0算偶数！ $('table tr:odd')  ->   表示获取一个table 所有的索引为奇数的行， 其中索引index 从0开始算起， 0算奇数！ Eg： 创建一个有6行数据的表格， 让奇数行的背景色为green，
jQuery入门：选择器与对象操作
总结来说，这份jQuery入门教程为初学者提供了关于选择器、jQuery包装集与DOM对象区别的深入理解，帮助他们掌握如何优雅地使用jQuery进行网页元素的高效筛选和操作，从而提高开发效率。无论是初次接触jQuery，还是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值