jQuery简介及使用

1、JavaScript库

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

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

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

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

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

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

3、HTML文件使用jQuery

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

<script src="../jquery/jQuery-3.6.1.min.js"></script>

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

<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的区别

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){ //执行代码 }) ;

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>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/93348.html