jQuery基础以及下载

今天小编要给大家介绍一个新的知识点——jQuery，那什么是jQuery呢？我们为什么要学习jQuery呢？今天小编就给大家简单介绍一下

目录

一、了解jQuery

二、jQuery库的下载和引用

1.jQuery的下载

 2.jQuery的引用

三、jQuery选择器

1.基本选择器

2.层次选择器

3.过滤选择器

---

一、了解jQuery

1.jQuery是什么

jQuery 不是一门语言，jQuery 是js的框架（是js的升级+简化），jQuery相当于JavaScript库，封装了很多JS代码。

官方地址：http://jquery.com/

2.为什么要学习jQuery

为了简化JavaScript开发，可以减少代码，实现同等的效果

下面小编用一个小小的案例进入我们今天的正题

<style>
	.container{
		width: 100px;
		height: 100px;
		background: orangered;
		display: inline-block;
		margin: 0px 20px;
	}
</style>


<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<button onclick="fun02()">点我更改颜色</button>

JavaScript的写法 

<script>
	function fun01(){
		let ds=document.getElementsByClassName("container")
		for(let d of ds){
			d.style.background="aqua"
		}
	}
</script>

 jQuery写法

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

<script>
	function fun02(){
		//$就是jQuery
		let div=$(".container")
		//修改样式
		div.css("background","aqua")
	}
</script>

对比起来，是不是觉得jQuery简化了一些我们记不住的单词呢？话不多说，接下来我们就来学习jQuery 

---

二、jQuery库的下载和引用

1.jQuery的下载

官方地址：http://jquery.com/

进入jQuery的官网，我们可以看到下面那个圈起来那，jQueryLOGO：write less，do more。然后可以点击框框那的下载。

点击下载进来是以下这个界面，看红色圈起来的jQuery，下面有两条用黄色框框框起来的链接。 

点击链接我们将可以看到一大段的代码，点击Ctrl+s保存。 

在电脑中建一个文件夹保存起来 

保存好之后文件夹内就有我们所需要的jQuery库了 

 

 2.jQuery的引用

在项目中新建一个目录，命名为英文都可以，然后把你刚刚保存的jQuery库复制粘贴到你建的目录中就可以了

以下是引入jQuery库的代码，需在JavaScript执行前引入

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

---

 三、jQuery选择器

1.基本选择器

ID选择器	#ID
元素选择器	element
类选择器	.class
通配符	*

以下为选择器运用展示 

<style>
		div{
			width: 100px;
			height: 100px;
			display: inline-block;
			background: red;
		}
</style>

<p>hhhh</p>
<div id="aa">
	<p>hhhh</p>
	<i><p>hhhh</p></i>
</div>
<div class="bb"></div>
<div class="bb"></div>

//id选择器
console.log($("#aa")

//class选择器
console.log($(".bb"))
			
//元素选择器
console.log($("div"))
			
//通配符
console.log($("*"))

id选择器和class选择器拿出来的值 

 

 元素选择器拿出来的值

通配符拿出来的值 

2.层次选择器

查询所有元素，查询子元素

<style>
		div{
			width: 100px;
			height: 100px;
			display: inline-block;
			background: red;
		}
</style>

<p>hhhh</p>
<div id="aa">
	<p>hhhh</p>
	<i><p>hhhh</p></i>
</div>
<div class="bb"></div>
<div class="bb"></div>

//所有p标签的颜色
$("p").css("color","yellow")

//div中所有的p标签
$("div p").css("color","black")

//div中的第一级p标签（子标签）
$("div>p").css("color","white")

所有p标签变成黄色

 

 div中的p标签变成黑色

 div中的第一级p标签（子标签）变成白色

3.过滤选择器

获取第一个元素	first
最后一个元素	last
获取偶数下标的元素	even
获取奇数下标的元素	odd
获取某一范围元素—大于	gt
获取某一范围元素—小于	lt

过滤选择器的使用 

//第一种
$("tr").first().addClass("aa");

//第二种
$("tr:first()").addClass("aa");

下面我们使用过滤选择器完成表格隔行换色这个案例

<style>
	.aa{
		background: lemonchiffon;
		color: black;
	}

	.bb{
		background: aliceblue;
		color: brown;
	}
</style>

<table border>
	<tr>
		<td>商品名字</td>
		<td>商品价格</td>
		<td>商品编号</td>
		<td>商品描述</td>
	</tr>
	<tr>
		<td>🍍🍍🍍</td>
		<td>$99.0</td>
		<td>10001</td>
		<td>无敌好吃的大菠萝</td>
	</tr>
		<tr>
		<td>🍌🍌🍌</td>
		<td>$90.0</td>
		<td>10002</td>
		<td>无敌好吃的大香蕉</td>
	</tr>
		<tr>
		<td>🍉🍉🍉</td>
		<td>$99.0</td>
		<td>10003</td>
		<td>无敌好吃的大西瓜</td>
	<tr>
		<td>🍍🍍🍍</td>
		<td>$99.0</td>
		<td>10001</td>
		<td>无敌好吃的大菠萝</td>
	</tr>
		<tr>
		<td>🍌🍌🍌</td>
		<td>$90.0</td>
		<td>10002</td>
		<td>无敌好吃的大香蕉</td>
	</tr>
		<tr>
		<td>🍉🍉🍉</td>
		<td>$99.0</td>
		<td>10003</td>
		<td>无敌好吃的大西瓜</td>
	<tr>
</table>

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

<script>

	//奇数
	$("tr:gt(0):odd").addClass("aa")
	//偶数
	$("tr:gt(0):even").addClass("bb")

</script>

执行效果