本文最初发表于博客园, 并在 GitHub 上持续更新前端的系列文章欢迎在 GitHub 上关注我, 一起入门和进阶前端
以下是正文
jQuery 的介绍
引入 jQuery 的原因
在用 js 写代码时, 会遇到一些问题:
window.onload 事件有事件覆盖的问题, 因此只能写一个事件
代码容错性差
浏览器兼容性问题
书写很繁琐, 代码量多
代码很乱, 各个页面到处都是
动画效果很难实现
如下图所示:
jQuery 的出现, 可以解决以上问题
什么是 jQuery
jQuery 是 js 的一个库, 封装了我们开发过程中常用的一些功能, 方便我们调用, 提高开发效率
js 库是把我们常用的功能放到一个单独的文件中, 我们用的时候, 直接引用到页面里即可
以下是 jQuery 的相关信息:
官网: http://jquery.com/
官网 API 文档: http://api.jquery.com/
汉化 API 文档: http://www.CSS88.com/jqapi-1.9/
学习 jQuery, 主要是学什么
初期, 主要学习如何使用 jQuery 操作 DOM, 其实就是学习 jQuery 封装好的那些功 API
这些 API 的共同特点是: 几乎全都是方法所以, 在使用 jQuery 的 API 时, 都是方法调用, 也就是说要加小括号 (), 小括号里面是相应的参数, 参数不同, 功能不同
jQuery 初体验
现在用原生 js 来写下面这一段代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
height: 100px;
background-color: pink;
margin: 10px;
display: none;
}
</style>
<script>
// 原生 js
window.onload = function () {
var btn = document.getElementsByTagName("button")[0];
var divArr = document.getElementsByTagName("div");
btn.onclick = function () {
for (var i = 0; i < divArr.length; i++) {
divArr[i].style.display = "block";
divArr[i].innerHTML = "生命壹号";
}
}
}
</script>
</head>
<body>
<button > 显示五个 div 盒子和设置内容 </button>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
如果用 jQuery 来写, 保持其他的代码不变,
来源: http://www.bubuko.com/infodetail-2487618.html