【jQuery】入门学习篇

文章目录

• 一、前言🚀🚀🚀
• 二、jQuery简介及使用详解：☀️☀️☀️
• • • 2.1 jQuery简介
    • 2.2 引入jQuery
    • • ① 第一种引入方式：直接路径引入
      • ② 第二种引入方式：使用第三方CDN
    • 2.3 引入jQuery核心函数
    • • ① 作为工具类使用
      • ② 作为函数使用（四种参数）
    • 2.3 jQuery对象
    • 2.4 jQuery对象操作class
    • • ① addClass()
      • ② jQuery对象复制 clone（）
      • ③ 增加容器
      • ④ 添加子元素
    • 2.5 jQuery操作CSS
    • 2.6 筛选jQuery对象
    • 2.7 事件的处理
• 三、总结：🍓🍓🍓

---

一、前言🚀🚀🚀

☀️
“04.24，和Sakura去东京天空树，世界上最暖和的地方在天空树的顶上。”
“04.25，和Sakura去明治神宫，有人在那里举办婚礼。”
“04.26，和Sakura去迪士尼，鬼屋很可怕，但是有Sakura在，所以不可怕。”
      “Sakura最好了。”…
                      —— 江南 《龙族》

---

本文简介：这个系列可以叫作《前端从零开始系列》，花一周时间，把JS个人觉得笔记重点且常见的知识点，并且总结了起来。

---

二、jQuery简介及使用详解：☀️☀️☀️

2.1 jQuery简介

  写更少的代码，做更多的事，jquery的logo意思。

2.2 引入jQuery

如何引入

① 第一种引入方式：直接路径引入

如何验证是否引入成功

② 第二种引入方式：使用第三方CDN

  在公共服务器上有各种各样的库，包括jQuery库。公共服务器好处：
1.调用的库在公共服务器上，减少自身服务器的压力。因为我们服务不需要通过我们自身服务器去加载文件。
2.使用人数多，可能很多的网站都在使用这个东西，可以使用到浏览器的缓存，比如a网站使用这个库，b网站也使用，那么用户访问a网站的时候，他会去加装文件，当他去访问b网站的时候，就不用去加装这个文件了。那也可以进一步提示我们的加装速度。

  

2.3 引入jQuery核心函数

  抛出一个问题，我们在引入了jQuery库后，到底是引入了什么。

  

① 作为工具类使用

  

  

② 作为函数使用（四种参数）

注意： 通过jQuery查询到的对象是jQuery对象，而DOM对象仍然是DOM对象。jQuery对象中为我们提供了很多新的方法，方便我们做各种DOM操作，但是jQuery对象不能直接调用原生DOM对象的方法，通过我们为jQuery对象命名时，会使用**$**开头，加以区分。
    

小结：

2.3 jQuery对象

  

  

  

2.4 jQuery对象操作class

  jQuery并没有做到化繁为简，它里面的方法其实比DOM还多，所以下面我们只需要看一下常用的方法。（这个东西主要掌握核心思路，具体方法查文档就行了。）

① addClass()

  为jQuery对象添加一个或多个class。
① 麻烦的版本：

  

  

  
② 好一点的版本：

上面这一块可以简化一下。

② jQuery对象复制 clone（）

实现代码：

复制完后，孙悟空被移走了，那么怎么操作才能让孙悟空还在呢？（用clone）

③ 增加容器

  

  

④ 添加子元素

  

  

2.5 jQuery操作CSS

  

  

2.6 筛选jQuery对象

                // $(".box1")[0]
                // $(".box1").get(0)

上面这两个返回的是DOM对象，而eq（）获取的是jQuery对象。

  

  

2.7 事件的处理

  

  
  
  
  
  
  

三、总结：🍓🍓🍓