- <!--JQuery: 轻量级的 JavaScript 库, 核心依然是 JavaScript, 不仅兼容了 CSS3, 还兼容各种浏览器 -->
- <!--1. 容易上手 2. 强大的选择器 3. 解决浏览器的兼容 4. 完善的事件机制 5. 出色三维 Ajax 封装 6. 丰富的 UI-->
- <!-- 链式操作, 回调函数, 迭代器, 延迟对象, 对象 -->
这里需要注意 jQuery 分 2 个系列版本 1.x 与 2.x,
主要的区别在于 2.x 不再兼容 IE678 浏览器, 这样做的目的是为了兼容移动端开发, 由于减少了一些代码, 使得该版本比 jQuery 1.x 更小更快如果开发者比较在意老版本 IE 用户, 只能使用 jQuery 1.9 及之前的版本了
jQuery 每一个系列版本分为: 压缩版(compressed) 与 开发版(development), 我们在开发过程中使用开发版(开发版本便于代码修改及调试), 项目上线发布使用压缩版(因为压缩版本体积更小, 效率更快)
jQuery 是一个 JavaScript 脚本库, 不需要特别的安装, 只需要我们在页面 <head> 标签内中, 通过 script 标签引入 jQuery 库即可
环境搭建:
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <script type="text/javascript" src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
- <title > 环境搭建</title>
- </head>
- <body>
- <script type="text/javascript"> alert($) </script>
- </body>
- </html>
alert 弹出以上信息, 说明环境已经搭建成功了
var p = document.getElementById(imooc);
p.innerHTML = 您好! 通过慕课网学习 jQuery 才是最佳的途径;
- p.style.color = red;
- <script type="text/javascript">
- $(document).ready(function() {
- $("div").html("您好! 通过慕课网学习 jQuery 才是最佳的途径");
- });
- </script>
$(document).ready 的作用是等页面的文档 (document) 中的节点都加载完毕后, 再执行后续的代码, 因为我们在执行代码的时候, 可能会依赖页面的某一个元素, 我们要确保这个元素真正的的被加载完毕后才能正确的使用相当于 document.onload
jQuery 对象与 DOM 对象是不一样的
通过 $(#imooc)方法会得到一个 $p 的 jQuery 对象,$p 是一个类数组对象这个对象里面包含了 DOM 对象的信息, 然后封装了很多操作方法, 调用自己的方法 html 与 css, 得到的效果与标准的 JavaScript 处理结果是一致的
来源: http://www.bubuko.com/infodetail-2506888.html