锋利的 jQuery
一、JavaScript和JavaScript库
JavaScript简介
JavaScript是Netscape公司开发的一种脚本语言（scripting language）。JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系，使网页可以包含更多活跃的元素和更加精彩的内容
-
弊端
- 复杂的文档对象模型（DOM）
- 不一致的浏览器实现和便捷的开发
- 调试工具的缺乏
JavaScript库作用及对比
jQuery同样是一个轻量级的库，拥有强大的选择器、出色的DOM操作、可靠的事件处理、完善的兼容性和链式操作等功能。
二、加入jQuery
jQuery简介
由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI、插件和jQuery Mobile等开发人员以及推广和网站设计、维护人员
jQuery的优势
- 轻量级：采用UglifyJS压缩后，大小保持在30KB左右
-
强大的选择器：
- 从CSS 1到CSS 3几乎所有的选择器
- jQuery独创的高级而复杂的选择器
- 支持XPath插件选择器
- 开发者可以编写属于自己的选择器
- 出色的DOM操作
-
可靠地事件处理：
- 在预留退路（graceful degradation）
- 循序渐进
- 非入侵式（Unobtrusive）
- 完善的Ajax：专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题
- 不污染顶级变量：jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝对不会污染其他的对象。该特性使jQuery可以与其他JavaScript库共存，在项目中放心地引用而不需要考虑到后期可能的冲突
- 出色的浏览器兼容
- 链式操作方式
- 隐形迭代
- 行为层与结构层分离
- 丰富的插件
- 完善的文档
- 开源
三、jQuery代码的编写
配置jQuery环境
-
获取jQuery最新版本
进入jQuery的官方网站下载
Tips : 获取的方式有好多，补充两个书中没有提到的方式。
-
jQuery库类型说明
- 生产版（最小化和压缩版）
- 开发版（未压缩版）
| 名称 | 大小 | 说明 |
|---|---|---|
| 开发版 (jquery.js v3.2.1 ) | 约261KB | 完整无压缩版本，主要用于测试、学习和开发 |
| 生产版 (jquery.min.js v3.2.1 ) | 约84.6KB | 经过工具压缩或经过服务器开启Gzip压缩 主要应用于产品和项目 |
-
jQuery环境配置
- jQuery也可以不需要下载，在
script标签引入百度静态资源公共库对应链接(http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js) - 页面中引入本地jquery
- jQuery也可以不需要下载，在
//使用公共库
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
//在head标签引入 jQuery，应该配合 window.onload() 方法使用
<head>
<script src='./js/jquery.min.js'></script>
</head>
//在<body>标签最下方引入jQuery
<body>
<footer>页脚</footer>
<script src='./js/jquery.min.js'></script>
</body>
编写简单的jQuery代码
在jQuery库中，$就是jQuery的一个简写形式，$("#foo")和jQuery("#foo")是等价的，$.ajax和jQuery.ajax是等价的。
$(document).ready(function(){
//
})
window.onload和 $(document).ready( )的对比
| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页中所有的内容加载完毕（包括图片）才能执行 | 网页中所有的DOM结构绘制完毕就执行，可能DOM元素关联的东西还没有加载完 |
| 编写个数 | 不能同时编写多个只能输出最后一个 | 能同时编写多个互不影响 |
| 简化写法 | — | $(function(){}) |
jQuery代码风格
-
优秀代码风格
- 对于一个对象不超过3个操作的，可以写成一行
- 对于一个对象的较多操作，建议每行写一个操作
- 对于多个对象的少量操作，可以每个对象写一行，涉及子元素适当缩进
- 为代码添加有意义的注释，能够培养良好的编码习惯和风格，提高开发效率
四、jQuery对象和DOM对象
DOM对象和jQuery对象简介
- DOM对象：DOM（Document Object Model，文档对象模型），每一份DOM都可以表示成一棵树
- jQuery对象：jQuery对象就是通过jQuery包装DOM对象后产生的对象
Tips：在jQuery对象中无法使用DOM对象的任何方法
jQurey对象和DOM对象的相互转换
-
jQuery对象转成DOM对象
- 通过[index]的方法得到相应的DOM对象
- 通过get(index)方法得到相应的DOM对象
var $box = $("#box");
var box=$box[0];
var box=$box.get(0);
-
DOM对象转成jQuery对象
- 用$()把DOM对象包装起来，就可以获得一个jQuery对象
var box =document.getElementById("box");
var $box=$(box);
解决jQuery和其他库的冲突
默认情况下，jQuery用$作为自身的快捷方式
-
jQuery库在其他库之后导入
- 调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库
- 自定义一个快捷方式
- 不想自定义快捷方式，还使用$
//控制权移交给其他JavaScript库
jQuery().noConflict();
jQuery(function(){
jQuery("p").click(function(){
})
})
//自定义一个快捷方式
var $j=jQuery().noConflict();
$j(function(){
$j("p").click(function(){
})
})
//不想自定义快捷方式，还使用$
//方式一
jQuery().noConflict();
jQuery(function($){ //使用jQuery设定页面加载时执行的函数
$("p").click(function(){ //在函数内部继续使用$()
})
})
//方式二
jQuery().noConflict();//将变量$的控制权让渡给其他库
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用$()方法
})
})
})(jQuery)
- jQuery库在其他库之前导入
//直接使用jQuery,无需调用" jQuery().noConflict()" 函数
jQuery(function(){
jQuery("p").click(function(){
})
})
