JQuery入门&选择器

最新推荐文章于 2022-10-07 12:52:21 发布
最新推荐文章于 2022-10-07 12:52:21 发布
阅读量933 收藏
点赞数 2
文章标签： jquery javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61857264/article/details/123494936
版权

目录

一.介绍

二.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>

四.下期马上更新 

​钟意
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery下载教程，Juery3.0框架使用案例以及基础语法；
Syntacticsugar's blog
09-22 2975
 登录juery官网， https://jquery.com/        1;点击下载; 2;点开，右键保存； ;   juery相比js优点： ①jquery的onload加载事件速度更快，并且多个加载并行   【jq绑定事件都是使用的事件函数，不需要加on】； ②js的onload加载事件，后面的覆盖前面的； ③在jQuery中，$(  )是其运行环境； ④jQuer...
jQuery官网下载步骤
热门推荐
公子&小白的博客
04-18 3万+
[转载出处](https://blog.csdn.net/u011870547/article/details/50033113) [原文作者](https://blog.csdn.net/u011870547) ①.百度jQuery ，进入官网 ②.进入官网后，点击下载 ③.之后进入下载页面，会看到有各种版本，解压版和未...
jQuery的下载与基本使用
GTC的博客
03-09 4517
jQuery的下载与基本使用1、jQuery的下载2、基本使用 1、jQuery的下载 官网地址： https://jquery.com/ 点击进入官网 点进去得到的是压缩过后的内容 将所有内容进行复制， 在vsCode里面创建一个jQuery.min.js的文件，将复制的代码粘贴进去。 做完以上步骤，jQuery文件就导入成功了。 2、基本使用 想要使用jQuery时需要将jQuery文件进行引入，使用代码 &lt;script src="jQuery文件地址"&gt;&lt;/script&gt
官网jquery压缩版引用地址
weixin_68658847的博客
10-07 255
官网jquery压缩版引用地址
(GoRails)在导航栏增加自动的搜索功能（jquery插件：easyautocomplete)(gem 'ransack' 搜索对象4000✨）...
weixin_30477293的博客
10-20 210
Global Autocomplete Search 需要用到一个JQuery插件和一个搜索对象的gem EasyAutocomplete jQuery插件: https://github.com/pawelczak/EasyAutocomplete http://easyautocomplete.com/guide#sec-data-file 功能很强大，具体的看guide，写的...
jQuery选择器基础入门教程
10-22
主要介绍了jQuery选择器基础知识,结合实例分析了jQuery选择器的功能、使用方法与相关操作技巧,需要的朋友可以参考下
jquery入门&mdash;选择器实现隔行变色实例代码
10-27
JQuery入门&mdash;选择器实现隔行变色如何实现呢？JQuery选择器继承了CSS、path语音的部分语法，允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择,接下来详细介绍，需要的朋友可以参考下
jQuery入门之层次选择器实例简析
10-23
主要介绍了jQuery入门之层次选择器用法,以简单实例形式分析了jQuery层次选择器中ancestor descendant与parent&gt;child的区别,需要的朋友可以参考下
jquery官网下载地址
jun的博客
06-28 1760
https://code.jquery.com/
各版本JQuery文件下载
qq_44346318的博客
01-31 1241
#【不求人系列】 1.如何在JQuery官网下载各个版本的JQuery文件？ （1）进入JQuery官网，链接如右： https://jquery.com/； （2）选择Browser Support(浏览器支持)，网页内位置见下图： （3）此页面内定位至此处，单击进入； （4）此页面便是所有版本的JQuery文件，例如： 前者为uncompressed版本，即名字中没有min，为完整版，方便阅...
主流Ajax框架的网址
zhaizhanpo的专栏
09-28 1301
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 675
//百度压缩版 &lt;script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
各个版本的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 837
前言： 基本概念就不介绍了
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 参考手册 - 核心
cjwxd126715的专栏
04-01 418
jQuery 核心函数 函数 描述 jQuery() 接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器。 jQuery.noConflict() 运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库。     实例 找出所有属于 div 元素的子元素的 p 元素，然后设
在同一个div内显示图片与视频（js删除与创建节点无缝切换）
lk1521769532的博客
05-30 453
&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt; &lt;/head&gt;&lt;body&gt; &lt;h2&gt;AJAX&lt;/h2&gt; &lt;button class="btn btn-default btn-success btn-block" type="
jQuery初看（http://jquery.com/）
yongqiling的专栏
01-13 687
一直很讨厌使用别人的框架，需要弄清原理，看懂源码。但是为了让自己具有市场竞争力，不得不不断地向市场看齐，学习。于是今天睡觉前抽空看了一下jQuery文档([url]http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html[/url])，并下载了jQuery的源码版和min版。初步的印象是，优点：jQuery的选择器很强大...
jquery从入门到精通
最新发布
08-30
jQuery是一个JavaScript库，用于简化HTML文档的操作、事件处理、动画效果和Ajax等功能。如果你想从入门到精通jQuery，可以按照以下步骤进行学习： 1. 学习基础知识：了解jQuery的基本语法、选择器和常用方法。可以通过官方文档、在线教程或书籍来学习。掌握jQuery的选择器语法，可以通过CSS选择器选取HTML元素，并使用jQuery提供的方法对其进行操作。 2. 实践编程：通过实际编写jQuery代码来加深理解。可以尝试使用jQuery来处理表单验证、DOM操作、事件绑定等常见任务。同时，结合HTML和CSS来创建一些简单的交互效果，如点击展开、淡入淡出等。 3. 深入学习特性：学习jQuery的高级特性，如动画效果、Ajax请求和响应处理等。掌握这些特性可以为你的Web开发提供更多可能性。使用jQuery内置的动画方法可以创建各种各样的动态效果。了解如何使用Ajax来实现与服务器的数据交互，以及如何处理服务器返回的数据。 4. 拓展知识：了解jQuery的插件和扩展。jQuery拥有庞大的插件生态系统，可以帮助你快速实现各种功能，如图片轮播、日期选择器、表格排序等。掌握如何使用插件可以提高你的开发效率和质量。 5. 实践项目：尝试实践一些小型项目或参与开源项目，将所学的知识应用到实际开发中。通过项目实践，你可以更好地理解jQuery的应用场景和优势，并锻炼自己的编程能力。 总之，学习jQuery需要不断的实践和积累经验。通过不断学习和实践，你可以逐步掌握jQuery的各项功能和技巧，从而达到精通的水平。祝你学习顺利！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值