31-Jquery-Day01

Jquery-Day01

第一节、Jquery简介

1.1、什么是Jquery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344)发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

核心：javaScript封装的一个框架，核心理念是写更少的代码，做更多事情。帮助程序员简化了原生JS的开发。

1.1、怎么学Jquery

官网：https://jquery.com/

说明文档：https://jquery.cuishifeng.cn/

1.3、Jquery核心知识

1. 选择器
2. 事件的处理
3. Ajax
4. 文档处理
5. 操作属性
6. 实现动画

1.4、Jquery的环境搭建

jQuery是用JS封装的一个库文件（封装一个JS文件），我们只需要将文件引入页面即可

2种方式：

方式一、通过script标签进行引入即可

​ 1.得到JS的文件—开发时使用开发版

​ 2.在官网找到合适版本，直接右键保存即可

​ 3.将下载好的JS代码复制到对应的项目中即可

​ 4.页面通过标签进入引入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wad4MnXe-1630547965781)(https://i.loli.net/2021/08/24/dYOrPnR5SFDwUya.png)]

方式二、通过CDN

​ 请求的地址：（百度，阿里，腾讯）

​ 百度：https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

​ 使用方式：通过script标签引入，引入的地址是一个远程的网络地址

问题：网页的稳定性与别的CND服务器有关

第二节、Jquery入门

2.1、Jquery的基本使用

基本语法：

$(“选择器”).action()

$("#p1").hide();
console.log($("#p1"));

2.2、为什么可以用$来直接使用jquery

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VzgACAuK-1630547965782)(https://i.loli.net/2021/08/24/29Yb71ADTpxU5Ol.png)]

上述代码意义：将定义jQuery赋给window下$属性。由于window对象是整个浏览器对象，我们所有的对BOM 还是DOM操作最顶层是window，我们在写代码可以省略window。

2.3、jQuery与原生JS对象

//$(选择器).action
//原生JS对象--通过原生JS代码获取的对象
var doc =  document.getElementById("p1");
console.log(doc);
console.log($("#p1"));//jQuery

注意事项：原生JS与jQuery之间本质是不一样的，他们的方法是不能互相使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5CtMq4v9-1630547965784)(https://i.loli.net/2021/08/24/iftLdHwo9uWEpY8.png)]

2.4、原生JS对象与jQuery之间互相转换的问题

原生JS对象转jQuery
语法：$(原生JS对象)

var doc =  document.getElementById("p1");

jQuery转为原生JS对象

语法：jQuery对象[下标]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UtCloCek-1630547965786)(https://i.loli.net/2021/08/24/sIHFxVTjYDWSEcC.png)]

总结：原生JS对象的方法和jQuery的方法不互通。

第三节、jQuery的选择器

3.1、基本选择器（重点）

选择器名	语法	作用
ID选择器	$("#id值")	根据ID值获取元素，如果页面ID值重复则获取第一个
类选择器	$(".类名")	根据类名获取页面元素，如果页面有多个重名的则全部获取
通用选择器	$("*")	选择页面所有的元素
组合选择器	$(“选择器1,选择器2”)	多个选择器同时选择，只要满足其中一个就被选中
元素选择器	$(“标签名”)	根据标签名获取元素，所有同名标签都被获取

console.log($("#p1"));
console.log($(".p1"));//通过类名获取
//$($(".p1")[0]).hide();
console.log($("*"));
console.log($("#p1,#div1"));
console.log($("a"));

3.2、层级选择器

依靠元素与元素之间的关系进行选择

选择名	语法	作用
后代选择器	$(“父元素 后代元素”)	选择父元素中所有的后代元素
子选择器	$(“父元素>子元素”)	选择父元素的所有直接子元素
相连兄弟选择器	$(“兄弟+兄弟”)	满足紧挨着的兄弟（有同一个父元素）
兄弟选择器	$(“兄弟~兄弟”)	所有的兄弟

console.log($("#div2 .p21"));
console.log($("#div21>p"));
console.log($("a~p"));

3.3、基本筛选器

作用：对原来的选择的结果进行筛选

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YWuaYlAL-1630547965788)(upload/image-20210824170628407.png)]

补充：

修改CSS样式：

$("tr td:eq(2)").css("background-color","red")

通过jQuery绑定事件

function test() {
    alert("hello");
}

$("#btn1").on("click",test);

“tr td:eq(2)”).css(“background-color”,“red”)

通过jQuery绑定事件

```javascript
function test() {
    alert("hello");
}

$("#btn1").on("click",test);