锋利的jquery阅读体验

第一章 认识jquery

1.1 JavaScript和JavaScript库

1.1.1 JavaScript简介

JavaScript是Netscape公司开发的一种脚本语言（scrpting language）

1.1.2 JavaScript库

1. Prototype,是最早成型的JavaScript库之一，但是由于Prototype成型年代较早，从整体上对面向对象的编程思想把握得不是很到位，导致了其结构的松散。
2. Dojo,是一款非常适合企业级应用的javascript库，得到了IBM、SUN和BEA等一些大公司的支持，Dojo缺点就是：学习曲线陡，文档不齐全，最严重的就是API不稳定，每次升级都可能导致已有的程序失效。
3. YUI，是由yahoo公司开发的，YUI封装了一系列比较丰富的功能，例如DOM操作和Ajax应用等。
4. Ext JS，简称Ext，可以用来开发富有华丽外观的客户端应用，能使B/S应用更加具有活力，Ext并非完全免费，如果用于商业用途，需要付费获得授权许可。
5. MooTools，是一套轻量、简洁、模块化和面向对象的javascript框架，模块化思想非常优秀，核心代码大小只有8KB
6. jQuery，轻量级的库，拥有强大的选择器、出色的DOM操作、可靠的事件处理、完善的兼容性和链式操作等功能，jQuery逐渐从其他javascript库中脱颖而出，成为web开发人员的最佳选择。

1.2 加入jquery

1.2.1 jquery简介

jquery是一个由John Resig创建于2006年1月的开源项目

1.2.2 jquery优势

jquery强调的理念是写得少，做得做

(1) 轻量级，采用UglifyJS压缩后，大小保持在30KB。

(2) 强大的选择器，允许开发者使用从css1到css3几乎所有的选择器，以及jquery独创的高级而复杂的选择器。

(3) 出色的DOM操作的封装，jquery封装了大量常用的DOM操作，开发者在编写DOM操作相关程序的时候能够得心应手。

(4) 可靠的事件处理机制。

(5) 完善的Ajax，jquery将所有的ajax操作封装到一个函数$.ajax()里，使得开发者处理ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

(6) 不污染顶级变量，jquery只建立一个名为jquery的对象，其所有的函数方法都在这个对象之下，其别名$也可以随时交出控制权，绝对不会污染其他的对象。

(7) 出色的浏览器兼容性，jquery能够在IE6.0+,FF3.6+,Safari5.0+,Opera和Chrome等浏览器下正常运行。

(8) 链式操作方式，对发生在同一个jquery对象上的一组动作，可以直接连写而无需重复获取对象。

(9) 隐式迭代，当用jquery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。

(10) 行为层与结构层的分离，开发者可以使用jquery选择器选中元素，然后直接给元素添加事件

(11) 丰富的插件支持，目前已经有上千的官方插件支持，而且还不断有新插件面世。

(12) 完善的文档，jquery的文档非常丰富，英文文档，中文文档。

(13) 开源，jquery是一个开源的产品，任何人都可以自由的使用并提出改进意见。

1.3 jquery代码编写

1.3.1 jquery环境

jquery库的类型分为两种，分别是生产版(最小化和压缩版)和开发版(未压缩版)，区别在于：开发版是完整无压缩版本，主要用于测试、学习和开发；生产版是主要应用于产品和项目。

1.3.2 编写简单的jquery代码

在jquery库中，$就是jquery的一个简写形式，$.ajax和jQuery.ajax是等价的。

$(document).ready(function{})   
//等待dom元素加载完毕

这行代码类似于传统javascript中的window.onload方法

两者的区别：

window.onload：必须等待网页中所有的内容加载完毕后（包括图片）才能执行，不能同时编写多个代码

window.onload=function(){alert("test1")};
window.onload=function(){alert("test2")};
//结果只会输出“test2”

$(document).ready():网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完，能同时编写多个代码

$(document).ready(function{alert("test1");});
$(document).ready(function{alert("test2");});
//结果两次都会输出

1.3.3 jquery代码风格

链式操作风格

$(".level>a").click(function(){
    $(this).addClass("current")   //给当前元素添加 current样式
    .next().show()    //下一个元素显示
    .parent().siblings().children("a").removeClass("current")//父元素的同辈元素的子元素<a>移除current样式
    .next().hide();  //它们的下一个元素隐藏
});

//这段代码的作用：

当鼠标点击到a元素（它是class含有level的子元素）的时候，给其添加一个名为current的class，
然后将紧邻其后面的元素显示出来，同时将它的父辈的同辈元素内部的子元素<a>都去掉一个名为current的class，
并且将紧邻它们后面的元素都隐藏。

这就是jquery强大的链式操作，一行代码就完成了导航栏的功能。

总结3种情况：

(1) 对于同一个对象不超过3个操作的，可以直接写成一行

$("li").show().unbind("click");
//unbind--从每一个匹配的元素中删除绑定的事件

(2) 对于同一个对象的较多操作，建议每行写一个操作

$(this).removeClass("mouseout")
       .addClass("mouseover")
       .stop()
       .fadeTo("fast",0.6) 
       .fadeTo("fast",1)
       .unbind("click")
       .click(function(){
            //do something...
       });
//fadeTo--把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数

(3) 对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当缩进

$(this).addClass("highlight")
       .children("li").show().end()
.siblings().removeClass("highlight")
       .children("li").hide();
//end()  将匹配的元素列表变为前一次的状态

为代码添加注释

给代码加上注释，无论是自己日后阅读还是与他人分享、合作开发，注释都能起到良好的效果，加上注释就能提高其易读性。

//在一个id为table的表格的tbody中，
如果每行的一列中的checkbox没有被禁用，
则把这行的背景设为红色
//enabled--可以使用（激活的元素）
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");

1.4 jquery对象和DOM对象

1.4.1 DOM对象和jquery对象简介

1. DOM对象

DOM(Document Object model)，即文档对象模型，每一份DOM都可以表示成一棵树。

<p tittle="选择你喜欢的水果">你喜欢的水果是？</p>
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
</ul>

可以把上面的html结构描述为一颗DOM树，如下图：

在这颗DOM树中，<p>,<ul>,<li>都是DOM元素节点，可以通过javascript中的getElementsByTagName或者getElementById来获取元素节点。

var domObj = document.getElementById("id"); //获得DOM对象
var ObjHTML = domObj.innerHTML; //使用javascript中的属性--innerHTML

2. jquery对象

jquery对象就是通过jquery包装DOM对象后产生的对象。

jquery对象是jquery独有的。

$("#foo").html(); //获取id为foo的元素内的html代码，html()是jquery方法
//这段代码等同于
document.getElementById("foo").innerHTML;

在jquery对象中无法使用DOM对象的任何方法。

例如：$("#id").innerHTML和$("#id").checked之类的写法是错误的

可以用“$("#id").html()和$("#id").attr("checked") //attr--设置属性”之类的jquery方法来代替。

1.4.2 jquery对象和DOM对象的相互转换

1.jquery对象转成DOM对象

jquery提供了两种方法将jquery对象转换成DOM对象，即[index]和get(index)
(1)jquery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var $cr = $("#cr"); //jquery对象
var cr = $cr[0];  //DOM对象
alert(cr.checked); //检测这个checkbox是否被选中了

(2)另一种方法是jquery本身提供的，通过get(index)方法得到相应的DOM对象

2.DOM对象转成jquery对象

对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jquery对象了。方式为$(DOM对象)。

var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr);   //jquery对象

通过以上方法，可以任意的相互转换jquery和DOM对象。

强调：DOM对象才能使用DOM中的方法，jquery对象不可以使用DOM中的方法。

平时用到的jquery对象都是通过$()函数制造出来的，$()函数就是一个jquery对象的制造工厂。

1.4.3 jquery实例研究

<input type="checkbox" id="cr" /><label for="cr">我已阅读提示</label>

$("#cr").click(function(){
    if($("#cr")[0].checked){
        alert("谢谢！");
    }
})
$(document).ready(function(){
    var $cr = $("#cr");
    var cr = $cr[0];
    $cr.click(function(){
        if(cr.checked){
            alert("谢谢!");
        }
    })
})  //用DOM方式来判断复选框是否被选中

以上2个方法都是相同的实践功能

//使用jquery方法判断复选框是否被选中
$(document).ready(function(){
    var $cr = $("#cr");
    $cr.click(function(){
        if($cr.is(:checked)){ //.is--jquery方法，判断是否被选中，返回boolean值
            alert("谢谢！");
        }
    })
})

DOM对象和jquery对象不同，但是通过转换，最终的效果是一样的。

1.5 解决jquery和其他库的冲突

在jquery库中，几乎所有的插件都被限制在它的命名空间里，全局对象都被很好的存在jquery命名空间里，因此当把jquery和其他javascript库一起使用，不会引起冲突。

1. jquery库在其他库之后导入

在其他库和jquery库都被加载完毕后，可以在任何时候调用jquery.noConflict()函数来将变量$的控制权移交给其他javascript库。

jQuery.noConflict(); //将变量$的控制权移交给prototype.js
jQuery(function(){   //使用jquery
    jQuery("p").click(function(){
        alert(jQuery(this).text());
    })
})
$("pp").style.display='none'; //使用prototype.js 隐藏元素
//prototype.js 是一个非常优雅的javascript基础类库
//...

就可以在程序里将jquery()函数作为jquery对象的制造工厂了

另一种选择，如果想确保jquery不会与其他库冲突，但又想自定义一个快捷方式，如下操作:

//...
var $j = jQuery.noConflict(); //自定义一个快捷方式 $j(或者jq、$J等)
$j(function(){   //使用jquery，利用自定义快捷方式
    $j("p").click(function(){
        alert($j(this).text());
    })
})
$("pp").style.display='none'; //使用prototype.js 隐藏元素
//...

如果不想给jquery子你故意的这些备用名称，还想使用$而不管其他库的$()方法，又不想冲突，以下两种解决方法都可以：

第一种：

//...
jQuery.noConflict(); //将变量$控制权过渡给prototype.js
jQuery(function($){   //使用jquery设定页面加载时执行的函数
    $("p").click(function(){  //在函数内部继续使用$()方法
        alert($(this).text());
    })
})
$("pp").style.display='none';  //使用prototype

第二种：

jQuery.noConflict(); //将变量$控制权过渡给prototype.js
(function($){    //定义匿名函数并设置形参为$
    $(function(){  //匿名函数内部的$均为jQuery
        $("p").click(function(){  //继续使用$()方法
            alert($(this).text());
        });
    });
})(jQuery);  //执行匿名函数且传递实参jquery
$("pp").style.display='none'; //使用prototype

2. jquery库在其他库之前导入

如果jquery库在其他库之前就导入了，那么可以直接使用jquery来做一些jquery的工作，同时可以使用$()方法作为其他库的快捷方式，无需调用jquery.noConflict()函数。

jquery(function(){  //直接使用jquery，无需调用jquery.noConflict()函数
    jquery("p").click(function(){
        alert(jquery(this).text());
    })
})
$("pp").style.display='none';

1.6 jquery开发工具和插件

1.Dreamweaver

Dreamweaver是建立web站点和应用程序的专业工具，将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，使得各个层次的开发人员和设计人员都能够快速创建基于标准的网站和应用程序。

目前新版的Adobe Dreamweaver CS 5.5已经加入了jquery语法自动提示功能。