正值angular.js、vue.js、react.js等框架盛行的时代,不再需要开发者自己操作DOM了,所以不得不承认jQuery已经在慢慢过时了。
但是jQuery中的开发思想还是很经典,现在它更多的是作为前端的技术基础而存在。
文章目录
一. 初识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));
})