【 jQuery入门 · (一) 】当下框架盛行，为什么还要学习jQuery ？

tech2022-08-09 131

正值angular.js、vue.js、react.js等框架盛行的时代，不再需要开发者自己操作DOM了，所以不得不承认jQuery已经在慢慢过时了。但是jQuery中的开发思想还是很经典，现在它更多的是作为前端的技术基础而存在。

文章目录

一. 初识jQuery1.1 简介1.2 诸多优点1.3 不足之处1.4 导入方式1.5 入口函数1.6 jQuery版hello world 二. jQuery函数2.1 DOM对象2.2 HTML代码片段2.3 匿名函数2.4 选择器三. jQuery对象3.1 jQuery对象转化成DOM对象3.1.1 $(selector)[index]3.1.2 $(selector).get(index)

一. 初识jQuery

1.1 简介

jQuery简写jq，Query是查询的意思，jQuery顾名思义就是一个让JavaScript更加方便的查询和控制页面控件的库。

很多人把jQuery定位为一个JavaScript框架，这是不严谨的。框架是解决方案的轮子，而jQuery的本质是js文件，是对原生js进行浓缩和优化后，进一步封装成的超集（库）。 jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

1.2 诸多优点

jQuery凭借其优秀的设计思想和简洁实用的语法流行多年，还是有诸多优点的：

对JavaScript语言增强的同时，大大简化了代码的编写工作； jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。还有一点是对js事件处理的增强： jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题！快速获取文档元素； jQuery的选择机制构建于css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。提供漂亮的页面动态效果； jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

1.3 不足之处

需要引入第三方jQuery文件，且jQuery各个版本之间存在用法冲突；极度依赖DOM节点，全DOM操作，维护难度较大；体量臃肿，有很多功能不实用；

1.4 导入方式

引入在线资源：我比较倾向于使用CDN服务，链接附上：bootCDN-jQuery地址当然我给大家摘出了jquery-3.5.1的min版本链接，直接复制放到你的HTML文档的head标签里即可。 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

引入本地文件：要是网络不佳，也可以把jQuery库文件下载到本地：点击复制链接按钮，然后浏览器打开该地址，全选复制代码，粘贴到本地空js文件，再src导入即可。 <script src='文件路径'></script> // 例如： <script src="./jquery-3.5.1.min.js"></script>

❀ 拓展一点 ❀

jquery.js和jquery.min.js有什么区别？什么时候用哪个？

我们分别打开这两个文件链接，左边是jquery.js正常版，右边是jquery.min.js的压缩版，可以明显看出来正产版的文件代码更容易阅读一些，喜欢研究源码的大佬可以下载来看看；右边的压缩版才是我们实际开发中需要导入的，相对来说压缩版文件体积更小，加载速度更快。

1.5 入口函数

由于我们需要在整个HTML文档都加载完成之后再加载js代码，所以我们可以有以下四种实现方式：

jQuery中的常规写法：$(document).ready() <!DOCTYPE html> <html lang="en"> <head> <script src="./jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ // js代码块 }; </script> </head> </html> 上述方法还可以简写为：$() <!DOCTYPE html> <html lang="en"> <head> <script src="./jquery-3.5.1.min.js"></script> <script> $(function(){ // js代码块 }); </script> </head> <body> // html代码块 </body> </html> 也可以使用原生js的入口函数：window.onload() <!DOCTYPE html> <html lang="en"> <head> <script src="./jquery-3.5.1.min.js"></script> <script> window.onload = function(){ // js代码块 }; </script> </head> <body> // html代码块 </body> </html> body标签末尾 <!DOCTYPE html> <html lang="en"> <head> <script src="./jquery-3.5.1.min.js"></script> </head> <body> // html代码块 <script> // js代码块 </script> </body> </html>

❀ 拓展一点 ❀

原生js的入口函数：window.onload()和 jQuery中封装的：$(document).ready()有什么区别？

window.onload()$(document).ready()执行时机必须等待网页中的所有内容加载完毕后(包括图片)才能执行整个网页的dom树绘制完成之后就会执行，可能dom元素相关联的资源并没有加载完成定义次数只能定义一次，多次定义将会覆盖之前可定义多次简写形式无$()

从这里也可以看出，jQuery是原生js的升级版，大大简化了我们的js代码编写。

1.6 jQuery版hello world

<!DOCTYPE html> <html lang="en"> <head> <script src="./jquery-3.5.1.min.js"></script> <script> $(function(){ console.log("hello world"); }); </script> </head> </html>

二. jQuery函数

jQuery库只提供了一个叫jQuery的函数$( )，该函数以及该函数的原型中定义了大量的方法，方便jQuery对象和jQuery函数调用。jQuery函数可以接受以下四种参数：

2.1 DOM对象

jQuery函数将会把该DOM对象封装成一个jQuery对象并返回。

<div id='app'>hello jQuery!</div> $(function(){ console.log($(document.querySelector('#app'))); })

2.2 HTML代码片段

jQuery函数会根据传入的文本创建好HTML元素并封装成jQuery对象返回。比如：

$("<div class='one'>one<div>");

2.3 匿名函数

前边讲入口函数的提过，当文档结构加载完毕之后jQuery函数调用匿名函数。

$(function(){ });

2.4 选择器

jQuery函数通过该选择器获取对应的DOM，然后将这些DOM对象封装到一个jQuery对象中并返回。请看下一章节jQuery对象的示例。

详细的jQuery选择器介绍有后续更新。

三. jQuery对象

<div id='app'>hello jQuery!</div> $(function(){ console.log($('#app')); })

jQuery对象是一个类数组对象，其中的元素就是DOM对象（Element元素）。可以调用jQuery函数及原型实例方法。

3.1 jQuery对象转化成DOM对象

3.1.1 $(selector)[index]

既然jQuery对象是一个类数组对象，那么我们直接拿到它的第一个元素，就可以达到把jQuery对象转化成DOM对象的目的。仍然来看刚才的例子：

<div id='app'>hello jQuery!</div> $(function(){ console.log($('#app')); console.log($('#app')[0]); // 对比于js原生dom操作 console.log(document.querySelector('#app')); console.log($('#app')[0] === document.querySelector('#app')); })

3.1.2 $(selector).get(index)

我们还可以使用jQuery中的get方法，它的作用和直接中括号选择效果一致：

<div id='app'>hello jQuery!</div> $(function(){ console.log($('#app')); console.log($('#app').get(0)); })

最新回复(0)