【jQuery】初识jQuery

乐正烨熠
2023-12-01

一、什么是jQuery?

jQuery其实就是一个封装了很多方法的js库,我们学习jQuery其实就是学习这些方法如何使用。

二、为什么要学习jQuery?

因为原生js存在许多缺陷,而使用jQuery则避免甚至解决了这些缺陷。

  1. 原生js不能添加多个入口函数(window.onload),如果添加了多个,后面的就会把前面的覆盖,但jQuery可以有多个入口函数;
  2. 原生js的api名字都很长并且不好记,而jQuery的api名字更容易记忆;
  3. 原生js书写容易产生代码冗余,jQuery使用隐式迭代代码简洁;
  4. 原生js中有的属性或者方法存在浏览器兼容问题,jQuery帮我们解决了浏览器兼容问题;
  5. 原生js容错率比较低,当前面代码出现问题后,其后面的代码就无法执行,而jQuery容错率比较高,前面的代码出现了问题,后面的代码不受影响。

三、jQuery如何使用?

  • 第一步:引入jQuery文件;
  • 第二步:编写入口函数;
  • 第三步:使用jQuery选择器找到你要操作的元素,调用jQuery的属性或方法操作它(添加属性,修改样式…)。

四、jQuery文件如何引用及其各个版本的区别?

1.引入方式

(1)在线引入

	<!--压缩版-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!--未压缩版-->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

(2)本地引入

可以从官网中下载对应版本的jQuery文件,然后在代码中引入
下载地址:https://jquery.com/download/

    <!--src中为对应版本的相对路径-->
    <script src="js/jquery-3.6.0.js"></script>

2.版本区别

  • 1.x : 支持老浏览器,如IE6、7、8     目前已停止更新
  • 2.x : 不支持老浏览器            目前已停止更新
  • 2.x : 不支持老浏览器              更新中

每个版本又有压缩版和未压缩版:

  1. compressed:压缩版也叫精简版,去掉了格式,体积小,适用于发布;(.js)
  2. uncompressed:未压缩版也叫原版,有统一的格式,体积较大,方便阅读,适用于测试、学习和开发。(.min.js)

五、jQuery入口函数

      // 第一种写法
      $(document).ready(function(){
          
      })
      // 第二种写法(常用)
      $(function(){
          
      })

jQuery入口函数和window.onload的区别:

  1. window.onload入口函数不能写多个,但jQuery入口函数可以写多个;
  2. jQuery入口函数在页面上dom树加载完毕即可执行,而window.onload入口函数要等待页面上所有资源都加载完毕后执行。

六、jQuery中的$是什么?

jQuery文件是一个自执行函数,而引入一个js文件时会执行这个js文件中的代码,当你引入了 jQuery时, 这个自执行函数就被执行,而在这个子执行函数中有很重要的一句话,即 window.jQuery = window.$ = jQuery; 就是给window对象添加一个jQuery属性和$属性,jQuery和$是等价的,是一个函数。

$的使用:

  1. 函数参数传递的是一个匿名函数–入口函数;
  2. 函数参数传递的是一个字符串–选择器/创建标签;
  3. 函数参数传递的是dom对象–将dom对象转化成jQuery对象。

七、DOM对象和jQuery对象的区别及其相互转化

(1)DOM对象:原生js选择器获取到的对象;
(2)jQuery对象:jQuery选择器获取到的对象,是一个伪数组,实际上是对dom对象的一个包装集;
(3)区别:DOM对象只能调用dom方法或者属性,不能调用jQuery的属性或者方法;jQuery对象只能调用jQuery方法或者属性,不能调用dom的属性或者方法;
(4)DOM对象转化成jQuery对象:直接将获取到的dom对象当作参数传入$函数;

          let btns = document.getElementsByTagName("button");
          let $btns = $(btns);

(5)jQuery对象转化成DOM对象:

  1. 使用下标取出来;
  2. 使用jQuery的方法get();
let $btns = $("button");
//方法一
let btn1 = $btns[0];
//方法二
let btn2 = $btns.get(1);

代码实例:灯的开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开关案例</title>
<!--    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
<!--    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>-->
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
  <button>开灯</button>
  <button>关灯</button>
  <br/>
  <img src="statics/cute.jpg" />
  <script>
      $(function(){
          let btns = document.getElementsByTagName("button");
          //使用dom对象绑定点击事件
          btns[0].onclick = function (){
              //使用jQuery对象设置样式
              $("body").css("backgroundColor","white");
          }
          //使用jQuery对象绑定点击事件
          $(btns[1]).click(function (){
              //使用dom对象设置样式
              document.getElementsByTagName("body")[0].style.backgroundColor="black";
              /*
              * 注意这里使用document.getElementsByTagName("body")[0]而不是document.getElementsByTagName("body")
              * 因为getElementsByTagName取出的是一个伪数组 其长度为1 第0个元素为我们需要的body元素
              * 如果直接为伪数组设置样式的话会报错:Cannot set property 'backgroundColor' of undefined
              * */
          });
      });
  </script>
</body>
</html>
 类似资料: