微信扫一扫
关注该公众号
什么是 jQuery
1.jQuery 是一个快速、简洁的 JavaScript 框架,是继 Prototype 之后又一个优秀的 JavaScript 代码库(或 JavaScript 框架)。
2.jQuery 设计的宗旨是 “write Less,Do More”,即倡导写更少的代码,做更多的事情。
3.优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。
体验 jQuery
原生 js 代码:
1 |
|
使用 jQuery 后
1 |
|
为什么要使用 jQuery
-
强大的选择器:能够快速找到 DOM 元素
· 如上面实例所展示一样,通过 jQuery 查找 DOM 元素要比原生 js 快捷很多
-
链式调用: 可以通过.不断调用 jQuery 对象的方法
· jQuery 可以通过.(点)不断调用 jQuery 对象的方法,而原生 JavaScript 则不一定
1
2
3
4
5
6
7
8
9
10
11
12
// 1.原生JavaScript
var div = document.getElementsByClassName("mydiv");
// 报错,必须分开写
div[0].style.backgroundColor = "red".width = 200+"px";
// div[0].style.width = 200+"px";
// 2.jQuery
$(document).ready(function () {
// 不报错,后面还可以接着继续写
$(".mydiv").css('background', 'yellow').css('width', '200px');
});· 隐式遍历(迭代): 一次操作多个元素
1
2
3
4
5
6
7
8
9
10
11
12
13
// 1.原生JavaScript
var div = document.getElementsByTagName("div");
// div.style.backgroundColor = "red";// 无效
for(var i = 0; i<div.length; i++){
div[i].style.backgroundColor = "red";
}
// 2.jQuery
$(document).ready(function () {
// 隐式遍历(迭代)找到的所有div
$("div").css('background', 'yellow');
});· 读写合一: 读数据/写数据使用是一个函数
1
2
3
4
5
6
7
8
$(document).ready(function () {
// 读取数据
var $tx = $("div").eq(0).text();
alert($tx);
// 写入数据
$("div").eq(0).text("新的数据");
});· 事件处理
· DOM 操作(增改删)
· 样式操作
· 动画
· 丰富的插件支持
· 浏览器兼容(前端开发者痛点)
jQuery 的安装
1.网页中添加 jQuery
·直接从 CDN 引用(推荐使用)
1 |
|
2.从官网下载 jQuery
下载后在 html 文件中直接引用,注意存放文件的地址要写对。
1 |
|