《锋利的jQuery(第2版)》笔记-第1章-认识jQuery
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《锋利的jQuery(第2版)》笔记-第1章-认识jQuery相关的知识,希望对你有一定的参考价值。
第 1 章 认识jQuery
1.1 javascript和JavaScript库
1.1.1 JavaScript简介
JS是一种脚本语言。
JS的优点:是网页和用户之间实现了一种实时的、动态的和交互的关系,是网页可以包含更多活跃的元素和更加精彩的内容。
JS的不足:复杂的文档对象模型(DOM)、不一致的浏览器实现和便捷的开发、调试工具的缺乏。
1.1.2 JavaScript库作用及对比
JS库出现的目的是为了简化JS的开发,封装了很多预定义的对象和实用函数,能帮助使用者轻松地建立高难度交互的Web2.0特性的富客户端页面,并且兼容各大浏览器。
1. Prototype
2. Dojo
3. YUI
4. Ext JS
5. MooTools
6. jQuery
1.2 加入jQuery
1.2.1 jQuery简介
jQuery创建于2006年。语法简介,跨平台兼容性,极大简化了JS开发人员遍历html文档、操作DOM、处理事件、执行动画和开发Ajax的操作。
1.2.2 jQuery的优势
jQuery理念是写得少,做得多(write less,do more)。
(1)轻量级
(2)强大的选择器
(3)出色的DOM操作的封装
(4)可靠的事件处理机制
(5)完善的Ajax
(6)不污染顶级变量
(7)出色的浏览器兼容
(8)链式操作方式
(9)隐式迭代
(10)行为层和结构层的分离
(11)丰富的插件支持
(12)完善的文档
(13)开源
1.3 jQuery代码的编写
1.3.1 配置jQuery环境
1. 获取jQuery最新版本
在jQuery官网http://jquery.com/。可以下载最新的版本。
2. jQuery库类型说明
1. jQuery版本分为两种:开发版(比较大,主要用于测试、学习和开发)和生产版(比较小,主要用于产品和项目)。
3. jQuery环境配置
不需要安装jQuery,只需要引用公共位置的jQuery库。
4. 在页面中引入jQuery
1.3.2 编写简单的jQuery代码
$是jQuery的简写形式。
对比window.onload和$(document).ready():执行时机、编写个数、简化写法(P8 表1-2详情)。在上一篇博文中也有介绍。
1.3.3 jQuery代码风格
1. 链式操作风格
一行代码可以完成多个操作。
jQuery操作最好有良好的 代码风格:
(1)对于同一个对象不超过3个操作,可以直接写成一排。
$("li").show().unbind("click");
(2)对于同一个对象的较多操作,建议每行写一个操作。
$(this).removeClass("mouseout") .addClass("mouseover") .stop() .fadeTo("fast",0.6) .fadeTo("fast",1) .unbind("click") .click(function(){ // do something... })
(3)对于多个对象的少量操作,可以每个对象写一行,如果涉及子元素,可以考虑适当地缩进。
$(this).addClass("highlight") .children("li").show().end() .siblings().removeClass("highlight") .children("li").hide();
注意:程序块严格采用缩进风格书写,能保证代码清晰易读,风格一致。
2. 为代码添加注释
虽然jQuery选择器很强大,能够省去JavaScript必须编写的很多航代码,但是,千万不要忘记给这一行代码加上注释,无论是日后自己阅读还是与他人分享、合作开发,注释都能起到良好的效果。可以提高可读性。
1.4 jQuery对象和DOM对象
1.4.1 DOM对象和jQuery对象简介
目的是为了区分哪些是jQuery对象,哪些是DOM对象。
1. DOM对象
DOM元素节点可以通过JavaScript中的getElementsByTagName或者getElementById来获取,像这样获取的DOM元素都是DOM对象。
2. jQuery对象
在jQuery对象中无法使用DOM对象的任何方法,DOM对象也不能使用jQuery里的方法。
1.4.2 jQuery对象和DOM对象的相互转换
1. jQuery对象转成DOM对象
jQuery提供两种方法将一个jQuery对象转化成DOM方法,即[index]和get(index)。
(1)jQuery对象是一个类似数组的对象,可以通过[index]的方法得到对应的DOM对象。
jQuery代码如下:
var $cr = $("#cr"); //jQuery东西 var cr = $cr[0]; //DOM对象 alert(cr.checked);
(2)另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象。
jQuery代码如下:
var $cr = $("#cr"); //jQuery东西 var cr = $cr.get(0); //DOM对象 alert(cr.checked);
2. DOM对象转成jQuery对象
对于一个DOM方法,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。方法为$(DOM对象)。
jQuery代码如下:
var cr=document.getElementById("cr"); //DOM东西 var $cr=$(cr); //jQuery对象
注意:DOM对象才能使用DOM中的方法,jQuery不能使用DOM中的方法,但jQuery对象提供了一套更加完善的工具操作DOM。
1.4.3 实例研究
详见此书page15例子。
1.5 解决jQuery和其他库的冲突
1. jQuery库在其他库之后导入
在其他库和jQuery库都加载完毕之后,可以在任何时候调用jQuery.noConflict()函数将变量$的控制权移交给其他JavaScript库。
//...省略其他代码 <p id="pp">Test-prototype(将被隐藏)</p> <p>Test-jQuery(将被绑定单击事件)</p> <!-- 引入 prototype --> <script src="lib/prototype.js" type="text/javascript"></script> <!-- 引入 jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script> jQuery.noConflict(); //将变量$的控制权让渡给prototype.js jQuery(function(){ //使用jQuery jQuery("p").click(function(){ alert( jQuery(this).text() ); }); }); $("pp").style.display = ‘none‘; //使用prototype.js隐藏元素 </script>
//...省略其他代码
确保不与其他库冲突,自定义一个快捷方式,代码如下:
//...省略其他代码 <p id="pp">Test-prototype(将被隐藏)</p> <p >Test-jQuery(将被绑定单击事件)</p> <!-- 引入 prototype --> <script src="lib/prototype.js" type="text/javascript"></script> <!-- 引入 jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script> var $j = jQuery.noConflict(); //自定义一个比较短快捷方式 $j(function(){ //使用jQuery $j("p").click(function(){ alert( $j(this).text() ); }); }); $("pp").style.display = ‘none‘; //使用prototype.js隐藏元素 </script>
//...省略其他代码
第三种方法传参$:
其一:
//...省略其他代码 <script> jQuery.noConflict(); //将变量$的控制权让渡给prototype.js jQuery(function($){ //使用jQuery $("p").click(function(){ //继续使用 $ 方法 alert( $(this).text() ); }); }); $("pp").style.display = ‘none‘; //使用prototype </script> //...省略其他代码
其二:
//...省略其他代码 <script> jQuery.noConflict(); //将变量$的控制权让渡给prototype.js (function($){ //定义匿名函数并设置形参为$ $(function(){ //匿名函数内部的$均为jQuery $("p").click(function(){ //继续使用 $ 方法 alert($(this).text()); }); }); })(jQuery); //执行匿名函数且传递实参jQuery $("pp").style.display = ‘none‘; //使用prototype </script> //...省略其他代码
2. jQuery库在其他库之前导入
无需调用jQuery.noConflict()函数,直接使用”jQuery”来做一些jQuery的工作。同时,可以使用$()方法作为其他库的快捷方式。
示例如下:
//...省略其他代码 <script> jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。 jQuery("p").click(function(){ alert( jQuery(this).text() ); }); }); $("pp").style.display = ‘none‘; //使用prototype </script> //...省略其他代码
1.6 jQuery开发工具和插件
1. Dreamweaver
2. Aptana
3. jQueryWTP和Spker插件
4. Visual Studio 2008
5. 其他工具
1.7 小结
本章重点是介绍了jQuery对象和DOM对象的区别和它们之间的相互转换,然后讲解了jQuery和其他JavaScript库冲突的问题及解决办法。本章强调了代码风格和变量风格。
【END】
以上是关于《锋利的jQuery(第2版)》笔记-第1章-认识jQuery的主要内容,如果未能解决你的问题,请参考以下文章
jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1