jQuery简介及使用

╰+攻爆jí腚メ 2024-04-03 08:55 66阅读 0赞

**目录**

1、JavaScript库

2、jQuery简介

3、jQuery优点

4、jQuery的下载及使用

5、jQuery的入口函数

6、jQuery的顶级对象$

--------------------

#### 1、JavaScript库 ####

JavaScript库:即library，是一个封装好的特定的集合（方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

简单理解︰就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。  
比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法）。

#### 2、jQuery简介 ####

jQuery 是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less , Do More”，即倡导写更少的代码，做更多的事情。  
j就是JavaScript ；Query查询：意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。  
jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。学习jQuery本质∶就是学习调用这些函数(方法)。  
jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

#### **3、jQuery优点** ####

1、轻量级。核心文件才几十kb，不会影响页面加载速

2、度跨浏览器兼容。基本兼容了现在主流的浏览器

3、链式编程、隐式迭代

4、对事件、样式、动画支持，大大简化了DOM操作支持插件扩展开发。有着丰富的第三方的插

件，例救∶树形菜单、日期控件、轮播图等

5、免费、开源

#### 4、jQuery的下载及使用 ####

**1、进入官网，点击Download jQuery**

![7c77b6471888423d913ebbbfe41bb31a.png][]

**2、有两个版本，一个是压缩版的，一个是未压缩版**

未压缩版：jquery\-版本号.js（开发版）完整无压缩版本，主要用于测试、学习和开发

压缩版：jquery\-版本号.min.js（发布版）经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目

![a9f43e9fa18646dcac2c4537a68bf11e.png][]

点击任意一个：把里面的内容全选复制，打开HBuilder新建一个文件以  .js为后缀

例如（压缩版）：jQuery-3.6.1.min.js 然后把复制的内容粘贴进去即可

**3、HTML文件使用jQuery**

直接写jQuery的路径即可（可以放在head标签中）

测试是否导入成功：有弹框说明导入成功

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>编写第一个jQuery程序</title>
    		<script src="../jquery/jQuery-3.6.1.min.js"></script>
    	</head>
    	<body>
    		<script>
    			$(function(){
    				alert("第一个jQuery程序！^^”");
    			});
    		</script>
    	</body>
    </html>

**$(document).ready()与window.onload的区别**

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td></td> 
   <td>window.onload</td> 
   <td><span style="color:#000000;"><strong>$(document).ready()</strong></span></td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;">执行时机</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;">必须等待网页中所有的内容加载完毕后（包括图片、</span><span style="color:#000000;">flash</span><span style="color:#000000;">、视频等）才能执行</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;">网页中所有</span><span style="color:#000000;">DOM</span><span style="color:#000000;">文档结构绘制完毕后即刻执行，可能与</span><span style="color:#000000;">DOM</span><span style="color:#000000;">元素关联的内容（图片、</span><span style="color:#000000;">flash</span><span style="color:#000000;">、视频等）并没有加载完</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;">编写个数</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;">同一页面不能同时编写多个</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;">同一页面能同时编写多个</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;">简化写法</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;">无</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;">$(function(){ </span></p> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;">&nbsp; //</span><span style="color:#000000;">执行代码</span></p> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;">})&nbsp;;</span></p> </td> 
  </tr> 
 </tbody> 
</table>

#### 5、jQuery的入口函数 ####

1、
    $(function () {
        ... //此处是页面DOM加载完成的入口
    }) ;
    2、
    $ (document) .ready (function () {
        ....//此处是页面DOM功载完成的入口
    });

1．等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完

成了封装。

2．相当于原生js 中的 DOMContentLoaded。

3.不同于原生js 中的 load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部

代码。

4.更推荐使用第一种方式

#### **6、jQuery的顶级对象$** ####

1.$是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用$。

2.$是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就

可以调用jQuery的方法。

<body>
    <div></div>
    <span></span>
    <script>
        // 1.DOM对象:用原生js获取过来的对象就是DOM对象
        var myDiv = document.queryselector( 'div '); // myDiv是DOM对象
        var mySpan = document.queryselector( 'span '); // mySpan是DOM对象
        console.dir(myDiv);
        // 2.jQuery对象:用jquery方式获取过来的对象是jQuery对象。本质:通过$把DOM元素进行了包装
        $('div'); // $('div')是一个jQuery对象
        $( 'span '); // $('span')是一个jQuery 对象
        console.dir($( 'div'));
        // 3. jQuery对象只能使用jQuery方法，DOM对象则使用原生的 Javascirpt属性和方法
        //myDiv.style.display = 'none';
        // myDiv.hide(); myDiv是一个dom对象不能使用jquery里面的hide方法
        // $( 'div' ).style.display = 'none';这个$( 'div')是一个jQuery对象不能使用原生js 的 
        属性和方法
    </script>
    </body>

**jQuery 对象和DOM对象**

$('div')

1、用原生JS获取来的对象就是DOM对象

2、jQuery方法获取的元素就是jQuery对象。

3、jQuery对象本质是∶利用$对DOM对象包装后产生的对象（伪数组形式存储)。

**jQuery 对象和DOM对象DOM对象与jQuery对象之间是可以相互转换的。**

因为原生js 比jQuery更大，原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方

法需要把jQuery对象转换为DOM对象才能使用。

1.DOM对象转换为jQuery对象︰$(DOM对象）

$('div')

2.jQuery对象转换为DOM对象（两种方式)

$(div'") [index]index是索引号

$(div') .get(index)index是索引号

<body>
        <video src="mov.mp4" muted></video>
        <script>
            // 1.DOM对象转换为jQuery对象
            //(1)我们直接获取视频，得到就是jQuery对象
            // $('video');
            //(2)我们已经使用原生js 获取过来DOM对象
            var myvideo = document.querySelector( 'video ' );
            // $(myvideo) .play(); jquery里面没有play这个方法
            // 2.jQuery对象转换为DOM对象
            // myvideo.play();
            $('video')[e].play();
            $('video').get(e).play();
        </script>
    </body>

[7c77b6471888423d913ebbbfe41bb31a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5ffe224b8dcb466d8244af4a6c819976.png
[a9f43e9fa18646dcac2c4537a68bf11e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/31046e7216a54150b9f985da01ca0b6e.png