官网: jquery.com/
中文文档: www.css88.com/jqapi-1.9/
在线API: api.jquery.com/
cdn: www.bootcdn.cn/
jQuery插件库：www.jq22.com/
- 如何使用jquery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 导入jquery，一定要把包引用在使用之前 -->
<script src="jquery-3.4.1.js"></script>
<script>
// 2. 入口函数
$(document).ready(function () {
// 3. 获取元素和绑定事件（通过方法实现）
})
// 一般下载下来会有两个文件，一个文件不带min 一个文件带min
// 带min的是压缩版，体积更小，里面市值把注释空格换行全部去掉，把变量名尽可能的换成更加简单的字符。
// 压缩的主要目的就是要文件更小，所以建议在开发的时候可以使用不带min的，方便查看源码，发布的时候换成带min的。
</script>
</head>
<body>
</body>
</html>
- 简单例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 200px;
background-color: pink;
margin: 10px;
display: none;
}
</style>
</head>
<body>
<button>显示盒子和设置内容</button>
<div></div>
<div></div>
<div></div>
<script src="jquery-3.4.1.js"></script>
<script>
// 原生js
// window.onload = () => {
// var btn = document.getElementsByTagName('button')[0];
// var divs = document.getElementsByTagName('div');
// divs = Array.prototype.slice.call(divs, 0);
// btn.onclick = () => {
// divs.forEach(element => {
// element.style.display = 'block';
// element.innerHTML = '马上下班了！';
// });
// }
// }
/*
1.链式编程
divs.show(1000).html('dzm');
2.隐式迭代
1). 隐式使用for循环迭代
*/
// jquery
$(document).ready(() => {
// 获取元素
var btn = $('button'); // 根据标签名获取标签
var divs = $('div'); // 根据标签名获取标签
btn.click(function () {
// 事件驱动程序
// divs.show(); // 显示盒子
// divs.show(1000); // 显示盒子带动画时间
// divs.html('dzm'); // 设置内容
divs.show(1000).html('dzm');
}); // 绑定事件是通过方法绑定的
})
</script>
</body>
</html>
- demo效果：
