小白读《锋利的jQuery（第2版）》学习笔记第一章

第一章 认识jQuery

Javascript和Javascript库

Javascript&＃xff1a;Netscape&＃xff08;网景&＃xff09;公司开发的一种脚本语言。

Javascript自身存在3个弊端&＃xff1a;

1. 复杂的文档对象模型&＃xff08;DOM&＃xff09;
2. 不一致的浏览器实现
3. 缺乏便捷的开发、调试工具

Ajax&＃xff1a;一种新型的基于Javascript的Web技术。
&＃xff08;Asynchronous Javascript And XML&＃xff0c;异步的Javascript和XML&＃xff09;

Javascript程序库&＃xff1a;封装了很多预定义的对象和实用函数&＃xff0c;简化Javascript的开发。

几种流行的Javascript程序库&＃xff1a;

Prototype&＃xff1a;最早成型的Javascript库之一&＃xff0c;对Javascript的内置对象&＃xff08;例如String对象、Array对象等&＃xff09;做了大量的扩展。使用者可以在需要的时候随时将其中的几段代码抽出来放进自己的脚本里。
不足&＃xff1a;从整体上对面向对象的编程思想把握得不是很到位&＃xff0c;导致了其结构的松散。

Dojo&＃xff1a;提供了很多其他Javascript库没有提供的功能。&＃xff08;例如离线存储的API&＃xff0c;生成图标的组件、基于SVG/VML的矢量图形库和Comet支持等。
不足&＃xff1a;学习曲线陡&＃xff0c;文档不齐全&＃xff0c;最严重的就是API不稳定&＃xff0c;每次升级都可能导致已有的程序失效。

YUI&＃xff1a;由Yahoo公司开发的一套完备的、扩展性良好的富交互网页程序工具集。
文档完备、代码规范。

Ext JS&＃xff1a;简称Ext&＃xff0c;原本是对YUI的一个拓展&＃xff0c;主要用于创建前端用户界面。
不足&＃xff1a;侧重于界面&＃xff0c;本身比较臃肿。并非完全免费。

MooTools&＃xff1a;一套轻量、简洁、模块化和面向对象的Javascript框架。

jQuery&＃xff1a;轻量级的库&＃xff0c;拥有强大的选择器、出色的DOM操作、可靠的事件处理、完善的兼容性和链式操作等功能。

jQuery已经逐渐从其他Javascript库中脱颖而出&＃xff0c;成为Web开发人员的最佳选择。

加入jQuery

创建者&＃xff1a;John Resig
创建时间&＃xff1a;2006年1月
项目类型&＃xff1a;开源项目
jQuery团队&＃xff1a;核心库、UI、插件和jQuery Mobile等开发人员以及推广和网站设计、维护人员。
理念&＃xff1a;写得少&＃xff0c;做得多&＃xff08;write less, do more&＃xff09;
优势&＃xff1a;

1. 轻量级&＃xff1a;采用UglifyJS压缩后&＃xff0c;大小保持在30KB左右。
2. 强大的选择器。CSS1到CSS3几乎所有的选择器&＃xff1b;jQuery独创的高级而复杂的选择器&＃xff1b;插件使其支持XPath选择器&＃xff1b;开发者编写属于自己的选择器。
3. 出色的DOM操作的封装。
4. 可靠的事件处理机制。采用Dean Edwards编写的事件处理函数的精华。在预留退路&＃xff08;graceful degradation&＃xff09;、循序渐进以及非入侵式&＃xff08;Unobtrusive&＃xff09;编程思想不错。
5. 完善的Ajax。所有的Ajax操作封装到一个函数$.ajax()里。
6. 不污染顶级变量。jQuery只建立一个名为jQuery的对象&＃xff0c;其所有的函数方法都在这个对象之下。
7. 出色的浏览器兼容性。
8. 链式操作方式。最有特色的地方。对发生在同一个jQuery对象上的一组动作&＃xff0c;可以直接连写而无需重复获取对象。
9. 隐式迭代。jQuery里的方法都被设计成自动操作对象的集合&＃xff0c;而不是单独的对象。
10. 行为层与结构层的分离。直接给元素添加事件。
11. 丰富的插件支持
12. 完善的文档
13. 开源

jQuery代码的编写

下载地址&＃xff1a;http:/jquery.com/
库类型&＃xff1a;
jquery.js&＃xff08;开发版&＃xff09;&＃xff1a; 约229KB &＃xff1b; 完整无压缩版本&＃xff0c;主要用于测试、学习和开发。
jquery.min.js&＃xff08;生产版&＃xff09;&＃xff1a; 约31KB &＃xff1b; 经过工具压缩或经过服务器开启Gzip压缩&＃xff0c;主要应用于产品和项目。

无需安装&＃xff0c;只需在页面html文件中引入该库文件的位置即可。

$与jQuery等价&＃xff1a;

window.onload&＃xff1a;
必须等待网页中所有的内容加载完毕后&＃xff08;包括图片&＃xff09;才能执行。
不能同时编写多个。若有多个&＃xff0c;取最后那个执行。
无简化写法。

$(document).ready()&＃xff1a;
网页中所有DOM结构绘制完毕后就执行&＃xff0c;可能DOM元素关联的东西并没有加载完。
能同时编写多个&＃xff0c;多个都会执行。
$(document).ready(function(){
······
});
可以简写为&＃xff1a;
$(function(){
······
});

jQuery代码风格

一个导航栏的HTML代码&＃xff1a;

需求&＃xff1a;单击不同的商品名称链接&＃xff0c;显示相应的内容&＃xff0c;同时高亮显示当前选择的商品。

jQuery代码&＃xff1a;

jQuery规范格式&＃xff1a;

1. 对于同一个对象不超过3个操作的&＃xff0c;可以直接写一行。
2. 对于同一个对象的较多操作&＃xff0c;建议每行写一个操作。
3. 对于多个对象的少量操作&＃xff0c;可以每个对象写一行&＃xff0c;如果涉及子元素&＃xff0c;可以考虑适当地缩进。

由于jQuery有时候很复杂的问题用一行选择器就可以轻松解决。所以最后写上必要的注释。

jQuery对象和DOM对象

DOM&＃xff08;Document Object Model&＃xff0c;文档对象模型&＃xff09;&＃xff0c;每一份DOM都可以表示成一棵树。
&＃xff08;Javascript已经学过&＃xff0c;不赘诉。&＃xff09;
可以通过getElementsByTagName或者getElementById来获取元素节点。

jQuery对象&＃xff1a;通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。

在jQuery对象中无法使用DOM对象的任何方法。DOM对象也不能使用jQuery里的方法。

jQuery对象和DOM对象的相互转换

如果获取的是jQuery对象&＃xff0c;那么在变量前面加上$。

var $variable &＃61; jQuery对象


如果获取的是DOM对象&＃xff0c;不加$

var variable &＃61; DOM对象


jQuery对象转成DOM对象

jQuery提供了两种方法将一个jQuery对象转换成DOM对象&＃xff0c;即[index]和get(index)。

&＃xff08;1&＃xff09;jQuery对象是一个类似数组的对象——[index]

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


&＃xff08;2&＃xff09;jQuery本身提供的&＃xff0c;提供get(index)方法得到相应的DOM对象。

var $cr &＃61; $("#cr"); //jQuery对象
var cr &＃61; $cr.get(0); //DOM对象
alert(cr.checked) //检测这个checkbox是否被选中了


DOM对象转成jQuery对象

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

var cr &＃61; document.getElementById("cr"); //DOM对象
var $cr &＃61; $(cr); //jQuery对象


一个实例

采用DOM方式&＃xff1a;

jQuery方式&＃xff1a;

解决jQuery和其他库的冲突

在jQuery库中&＃xff0c;几乎所有插件都被限制在它的命名空间里。通常&＃xff0c;全局对象都被很好地存储在jQuery命名空间里&＃xff0c;因此当把jQuery和其他Javascript库一起使用时&＃xff0c;不会引起冲突。

1. jQuery库在其他库之后导入&＃xff1a;
   在其他库和jQuery库都被加载完毕后&＃xff0c;可以在任何时候调用jQuery.onConflict()函数来将变量$的控制权移交给其他Javascript库。

Test-prototype(将被隐藏)

自定义一个快捷方式

Test-prototype(将被隐藏)

jQuery开发工具和插件

1. Dreamweaver&＃xff1a;建立Web站点和应用程序的专业工具。
2. Aptana&＃xff1a;一个功能强大、开源和专注于Javascript的Ajax开发IDE。&＃xff08;占内存多&＃xff09;
3. jQueryWTP和Spket插件&＃xff1a;Eclipse支持jQuery自动提示代码功能。
4. Visual Studio 2008
5. 其他工具&＃xff1a;EditPlus、EmEditor和VIM等等。