【jQuery】初识jQuery

2024-02-06 13:57:52

一、什么是jQuery?

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

二、为什么要学习jQuery？

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

原生js不能添加多个入口函数（window.onload),如果添加了多个，后面的就会把前面的覆盖，但jQuery可以有多个入口函数；
原生js的api名字都很长并且不好记，而jQuery的api名字更容易记忆；
原生js书写容易产生代码冗余，jQuery使用隐式迭代代码简洁；
原生js中有的属性或者方法存在浏览器兼容问题，jQuery帮我们解决了浏览器兼容问题；
原生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 : 不支持老浏览器更新中

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

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

五、jQuery入口函数

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

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

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

六、jQuery中的$是什么？

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

$的使用：

函数参数传递的是一个匿名函数–入口函数；
函数参数传递的是一个字符串–选择器/创建标签；
函数参数传递的是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对象：

使用下标取出来；
使用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>

码农公寓