JQuery入门&选择器

已于 2022-03-16 13:42:10 修改
阅读量1.7k 收藏
点赞数 8
文章标签： jquery javascript bootstrap
于 2022-03-15 12:48:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62270300/article/details/123499805
版权

目录

JQuery是什么？

为什么要学JQuery？

在哪些情况下需要使用JQuery？

怎么用？

点击按钮让图片换颜色

1.使用JavaScript来写

2.使用JQuery来写

JQuery选择器

基本选择器

层次选择器

过滤选择器

表格的隔行换色案例

表单选择器

总结

JQuery是什么？

JQuery是一个快速的、简洁的JavaScript框架

为什么要学JQuery？

JQuery设计的宗旨是“write Less ，Do More”，即倡导写更少的代码，做更多的事情。它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，能够简化JavaScript编程，优化HTML文本操作、事件处理、动画设计和Ajax交互

在哪些情况下需要使用JQuery？

1.中大型网站的开发

2.是一些前端框架的基础，比如说EasyUI、Bootstrap

怎么用？

点击按钮让图片换颜色

1.使用JavaScript来写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				
			.container{
				width: 100px;
				height: 100px;
                background: red;
			}
		</style>
	</head>
	<body>
		<div class="container"></div>
		<div class="container"></div>
		<div class="container"></div>
		<div class="container"></div>
		<div class="container"></div>
		<div class="container"></div>
		<button onclick="fn1()" type="button">点我改变颜色</button>
		<script type="text/javascript">
			function fn1(){
				let ds=document.getElementsByClassName("container")
				for(let d of ds){
				d.style.background="pink"
				}
			}		
		</script>
	</body>
</html>

2.使用JQuery来写

1.下载JQuery的库

JQuery官网：http://jquery.com =>download =>选择合适的版本

2.将下载的js文件引入到项目中

<!-- 引入jquery -->
		<script src="js/jquery-3.5.1.js"></script>

3.用JQuery实现上述效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				
			.container{
				width: 100px;
				height: 100px;
                background: red;
			}
		</style>
		<!-- 引入jquery -->
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<div class="container"></div>
		<div class="container"></div>
		<div class="container"></div>
		<div class="container"></div>
		<div class="container"></div>
		<div class="container"></div>
		<button onclick="fn2()" type="button">点我改变颜色</button>
		<script type="text/javascript">
		//jquery 不是一门语言
		//jquery是js的框架（是js升级+简化）
			function fn2(){
				let div=$(".container")
				//修改样式
				div.css("background","pink")
			}
		</script>
	</body>
</html>

JQuery选择器

基本选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
		<style type="text/css">
			
			div{
				width: 100px;
				height: 100px;
				display: inline-block;
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<p>加油</p>
		<div id="aa">
			<p>哈哈</p>
			<p>嘻嘻</p>
		</div>
		
		<div class="bb"></div>
		<div class="bb"></div>
		<script type="text/javascript">
		//jquery 本身支持css选择器
			console.log($("#aa"))//id选择器
			// console.log($(".bb")][0])
			 console.log($(".bb").eq(0))//类选择器
			//css是jquery的方法 只有jquery对象才能调用
			//$(".bb")[0]拿出來的是js中的正常对象
			//如何将js对象变成jquery：$(xx)
			//$(".bb")[0].css("background","pink")
			$(".bb").eq(0).css("background","pink")
			//拿到页面中所有的div元素
			console.log($("div"))//元素选择器
			console.log($("*"))// 通配符* 所有标签
			
		</script>
		<div>
			<a href=""></a>
			<p>
				<a href=""></a>
			</p>
		</div>
	</body>
</html>

 注：

css是JQuery的方法，只有jquery对象才能调用  ,$(".bb")[0]拿出來的是js中的正常对象
如何将js对象变成jquery有两种方法

第一种：$($(".bb")[0])  

第二种：$(".bb").eq(0)

层次选择器

<body>
<script>
$("div p").css("color","pink")//找到div里面的所有p（后代）
$("div>p").css("color","white")//div中的第一级p标签（子标签）
$("div p+p").css("color","white")//找到div里面p标签后的p标签 前提必须是兄弟关系
</script>
</body>

过滤选择器

拿到表格对应的下标改变颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.aa{
				background:skyblue ;
				color: white;
			}
			.bb{
				background:peachpuff ;
				color: white;
			}
		</style>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<table border>
			
			<tr>
				<td>商品名字</td>
				<td>商品价格</td>
				<td>商品编号</td>
			</tr>
			<tr>
				<td>西瓜🍉</td>
				<td>28.00</td>
				<td>1001</td>
			</tr>
			<tr>
				<td>香蕉🍌</td>
				<td>28.00</td>
				<td>1001</td>
			</tr>
			<tr>
				<td>菠萝🍍</td>
				<td>28.00</td>
				<td>1002</td>
			</tr>
			<tr>
				<td>苹果🍎</td>
				<td>28.00</td>
				<td>1003</td>
			</tr>
			<tr>
				<td>葡萄🍇</td>
				<td>28.00</td>
				<td>1004</td>
			</tr>
		</table>
	</body>
</html>

<script type="text/javascript">
		    //第一个
			$("tr:frist").addClass("aa")
		    $("tr").first().addClass("aa")
			//最后一个
			$("tr:last").addClass("aa")
			$("tr").last().addClass("aa")
			//奇数下标
			$("tr:odd").addClass("aa")
		    //偶数下标
			$("tr:even").addClass("bb")
			//取下标小于3的行
			$("tr:lt(3)").addClass("bb")
			//取下标大于2的行
			$("tr:gt(2)").addClass("bb")
		</script>

表格的隔行换色案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.aa{
				background:skyblue ;
				color: white;
			}
			.bb{
				background:peachpuff ;
				color: white;
			}
		</style>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<table border>
			
			<tr>
				<td>商品名字</td>
				<td>商品价格</td>
				<td>商品编号</td>
			</tr>
			<tr>
				<td>西瓜🍉</td>
				<td>28.00</td>
				<td>1001</td>
			</tr>
			<tr>
				<td>香蕉🍌</td>
				<td>28.00</td>
				<td>1001</td>
			</tr>
			<tr>
				<td>菠萝🍍</td>
				<td>28.00</td>
				<td>1002</td>
			</tr>
			<tr>
				<td>苹果🍎</td>
				<td>28.00</td>
				<td>1003</td>
			</tr>
			<tr>
				<td>葡萄🍇</td>
				<td>28.00</td>
				<td>1004</td>
			</tr>
		</table>
		<script type="text/javascript">
				//奇数
				$("tr:gt(0):odd").addClass("aa")
				//偶数
				$("tr:gt(0):even").addClass("bb")
				</script>
	</body>
</html>

实现的效果：

 

表单选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<form id="myForm">	
		性别：<input type="radio" name="sex" value="男" />男
		<input type="radio" name="sex" value="女" />女<br>
		爱好：<input type="checkbox" name="hobby" value="唱歌" />唱歌
		<input type="checkbox" name="hobby" value="跳舞" />跳舞
		<input type="checkbox" name="hobby" value="弹钢琴" />弹钢琴
		<br>
		地址：<select name="address">
			<option value ="湖南省">湖南省</option>
			<option value ="湖北省">湖北省</option>
			<option value ="河南省">河南省</option>
		</select>
		<br>
			<input type="button" type="submit" value="提交"  onclick="fn1()"/>
		</form>
		
		<script>
			function fn1(){
				//获得性别
				var sex= $("#myForm input:radio:checked").val();
				console.log(sex);
				
				// 获得爱好
				$("#myForm input:checkbox:checked").each(function(){
					console.log($(this).val());
				})
		
				//获得地址
				var address = $("#myForm select  option:selected").val();
				console.log(address)

			}
		</script>
	</body>
</html>

总结

以上就是关于JQuery的入门以及一些选择器的知识点 之后还会更新一些关于JQuery的其他知识点

欢迎大家关注！！！

時宜
关注
  • 8
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery_01入门&选择器
m0_64043477的博客
03-15 1033
jQuery_01入门&选择器
jQuery入门基本语法&选择器
qq_63492318的博客
03-15 705
文章目录 一.了解什么是jQuery&amp;为什么要学jQuery？ 二.jQuery的基本语法？ 三.jQuery如何使用? 四.jQuery的选择器？ 五.推荐使用开发工具：HBuilderX 什么是jQuery? jQuery其实就是：JavaScript的一个类库---&gt;里面封装了很多的js代码。 为什么学习jQuery： JQuery设计的宗旨是："write Less ，Do More"---&gt;倡导写更少的代码，做更多的事情。 简化JavaScript代码开发.
jQuery 入门&选择器
SAME_LOVE的博客
03-23 541
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
jQuery入门&选择器
weixin_66110079的博客
03-15 1120
jQuery选择器、jQuery入门、jQuery官网地址
jQuery入门&选择器：
hh20040224的博客
03-17 134
jQuery的入门及了解： 使用时必须使用script标签引入jQuery！ 推荐在头部引入，当然body也可以： 代码如下： 了解js与jQuery的加载函数： 一般使用简写的写法 &lt;!-- 原生态JS代码实现点击弹窗 --&gt; &lt;script type="text/javascript"&gt; //加载函数(两种方法)： // 1.window.onload = function(){} // 2.window.add...
第一章、 jQuery入门&选择器
m0_67094505的博客
03-16 762
JQuery入门&选择器
jQuery 01 入门&选择器
m0_67888923的博客
03-09 1192
JQuery 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决.
jQuery01入门&选择器
weixin_62735525的博客
03-16 1021
一、3W1H:在jQuery中有什么意思？ 1.1 What：jQuery是什么？ jQuery是一个快速的、简洁的JavaScript框架，简单来说就是JavaScript的一个类库，里面封装了很多常用的功能代码。 1.2 Why:为什么要使用jQuery？ jQuery的设计宗旨是“Write Less Do More”,即写更少的代码，做更多的事。使用简便快捷的代码更加适用于我们开发。 1.3 Where：jQuery是用在哪里？ ①中大型网站的开发 ②是一些前段框架的基础 例如Easy
JQuery01入门&选择器
qq_65345936的博客
03-16 83
自己对jQuery入门所做的一些笔记要点
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的区别,需要的朋友可以参考下
【redis】Spring之RedisTemplate配置与使用
05-30 331
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1091
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1200
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
解决renren-fast地图使用echarts报错
最新发布
Start_t的博客
05-30 208
原因：renrenfast 框架 中 plugins预设了 echarts 插件（3.8.5），并且设置了 // 引入外部库, 无需webpack打包处理。如果引用自己安装的echarts 需要 注释掉build\webpack.base.conf.js 中 externals 的echarts。始终报错，无法安装自己定义的echarts版本（5.4.1），console.log出来是3.84。会提示以下错误或者其他。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 519
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
jquery从入门到精通
08-30
1. 学习基础知识：了解jQuery的基本语法、选择器和常用方法。可以通过官方文档、在线教程或书籍来学习。掌握jQuery的选择器语法，可以通过CSS选择器选取HTML元素，并使用jQuery提供的方法对其进行操作。 2. 实践...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值