认识并简单的掌握使用jQuery

认识并会简单的掌握使用jQuery

首先，什么是jQuery:

jQuery是javascript库，是对javascript的一个封装，也就是说JQ提供了大量的API，这样的话在开发时，以最少的代码可以实现更多的功能。可以简单的理解是是一种工具，一种js的工具，有了这种工具之后，我们写代码，不仅会少很多，也有方便很多。
write less，do more（写的少，做的多）

---

jQuery的功能：

1. 控制页面的样式
2. 访问和操作DOM
3. 事件处理
4. 提供了大量的插件
5. Ajax技术的封装
6. 提供了大量的动画处理

---

jQuery的导入方式：

本地导入和CDN导入
CDN导入的script链接为：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

---

jQuery的基本操作：

• 文档就绪事件：

$(function(){
	//里面写jQuery代码，为了防止文档在没有完成加载好之前运行jQuery代码。
})

注意：jQuery的这种方式虽然与js中的window.onload= function(){}类似，但又有不同之处，js是会等页面的所有内容加载完毕之后才会执行js代码，比如一张图片没有加载完成，那么js代码就不会被执行。但是jQuery代码不同之处在于只要文档内的DOM元素全部加载完成之后，jQuery代码就会执行。

• jQuery选取并操作DOM元素并且与js的对比

<div id="IdDiv" class="classDiv">
	我是一共div
</div>

选取div这个节点

1.js的做法

let div  = document.querySelector("div");

2.jQ的做法

let div = $("div");

选取ID为idDiv的元素

1.js的做法

let div  = document.querySelector("#idDiv");

2.jQ的做法

let div = $("#idDiv");

选取class为classDiv的元素

1.js的做法

let div  = document.querySelector(".classDiv");

2.jQ的做法

let div = $(".classDiv");

获取div中的内容

<p id="p1">这是p的第<span>span标签</span>一个标签</p>

1.js的做法

let	content  = div.innerHTML;

2.jQ的做法

let content = div.html(); //这是p的第<span>span标签</span>一个标签(会把里面的所有东西输出)
let content = div.text(); //这是p的第span标签一个标签 (会把里面的所有的标签去掉)

事件处理，以单击响应函数举例

1.js的做法

let div  = document.querySelector(".classDiv");
div.onclick = function(){
	console.log("我被点击了！！！");
};

2.jQ的做法

let div = $(".classDiv");
div.click(function(){
console.log("我被点击了！！！");
});

其他的操作DOM元素的方法

!](https://img-blog.csdnimg.cn/20210115165525646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc3NzkyMw==,size_16,color_FFFFFF,t_70)