锋利的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语法自动提示功能。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,718评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,683评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,207评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,755评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,862评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,050评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,136评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,882评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,330评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,651评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,789评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,477评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,135评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,864评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,099评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,598评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,697评论 2赞 351

推荐阅读更多精彩内容

  • jQuery笔记总结篇
    原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,641评论 18赞 503
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,860评论 25赞 707
  • 感恩冥想
    170403@D89.感恩冥想 佩诗 。深深的感恩慈悲伟大的佛陀，感谢感谢感谢! 。感恩格西老师用现代化的语言教授...
    佩诗阅读 124评论 0赞 0
  • Spring初探
    可以解决对象创建以及对象之间依赖关系的一种框架 1.第一个Spring程序 1.1 引入jar文件 spring-...
    Acamy丶阅读 327评论 0赞 0
  • 2017-11-23
    衡山两日行
    不爱笑的傻姑娘阅读 190评论 0赞 1