【读书笔记】《锋利jQuery》第一章

第一章 认识JQuery

1.1 JavaScript和JavaScript库

1.1.1 JavaScript简介

1.1.2 JavaScript库作用及对比

Prototype
Dojo
YUI
ExtJS
MooTools
JQuery

1.2 加入JQuery

1.2.1 JQuery简介

1.2.2 JQuery的优势

轻量级
强大的选择器
出色的DOM操作的封装
可靠的事件处理机制
完善的Ajax
不污染顶级变量
出色的浏览器兼容性
链式操作方式
隐式迭代
行为层与结构层的分离
丰富的插件支持
完善的文档
开源

1.3 jQuery代码的编写

1.3.1 配置JQuery环境

1.获取jQuery最新版本
2.jQuery库类型说明（完全五压缩和min）
3.环境配置
4.在页面中引入jQuery:

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></javascript>

1.3.2 编写简单的jQuery代码·

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></javascript>
<script type="text/javascript">
$(document).ready(function(){
alert("hello world");
}
</script>

window.onload与$(document).ready()的对比

执行时机：全部内容加载完 和 DOM结构绘制完毕

编写个数：不能同时编写多个 和 可以同时编写多个

1.3.3 jQuery代码风格

1.链式操作风格

$(this).addClass("highlight").children("a").show().end().siblings().removeClass("hightlight").children("a").hide()));

或者可以改写成

$(".has_children").click(function(){
$(this.addClass("highlight")
.children("a").show().end()
.siblings().removeClass("hightlight")
.children("a").hide();
));

(1)对于同一个对象不超过三个操作的，可以直接写成一行
(2)对于同一个对象的较多操作，建议每行写一个操作、
(3)对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。

为代码添加注释

1.4 jQuery对象和DOM对象

1.4.1 DOM对象和jQuery对象简介

1.DOM对象
2.jQuery对象

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

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对象

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

var $cr = $("#cr"); //jQuery对象
var cr = $cr.get(0);    //DOM对象

2.DOM对象转成jQuery对象

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

var cr = document.getElementById("cr");
var $cr = $(cr);

最后再次强调，DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法，但jQuery对象提供了一套更加完善的工具用于操作DOM

1.5 解决jQuery和其他库的冲突

在jQuery库中，几乎所有的插件都被限制在它的命名空间里。通常，全局（global）对象都被很好地存储在jQuery命名空间里 ，因此当把jQuery和其他JavaScript库（例如Prototype、MooTools或YUI）一起使用时不会引起冲突。

默认情况下，jQuery用$作为自身的快捷方式

* 1.jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕之后，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库 示例如下：

<script language="javascript>
jQuery.noConflict();//将变量$的控制权交给Prototype.js
jQuery(function(){//使用jQuery
jQuery("p").click(function(){
alert(jQuery(this).text());
})
})

$("pp").style.display='none';//使用Prototype
<script>

然后就可以在程序里将jQuery()函数作为jQuery对象的制造工厂。 此外还有另一种选择。如果想确保jQuery不会与其他库冲突，但又想自定义一个快捷方式，可以进行如下操作：

var $j = jQuery.noConflict();//自定义一个快捷方式
$j(function(){//使用jQuery，利用自定义快捷方式--$j
$j("p").click(function(){
alert($j(this).text());
})
})
$("pp").style.display = 'none'; //使用Prototype

如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库的$()方法，同时又不想与其他库相冲突，那么可以使用 以下两种解决方法

其一：

jQuery.noConflict();    //将变量$的控制权让渡给Prototype.js
jQuery(function($){     //使用jQuery设定页面加载时执行的函数
$("p").click(functioin(){   //在函数内部继续使用$()方法
alert($(this).text());
})
})

$("pp").style.display = 'none'; //使用Prototype

其二：

jQuery.noConflict();    //将变量$的控制权让渡给Prototype.js
（function($){          //定义匿名函数并设置形参为$
$("p").click(function(){    //匿名函数的$均为jQuery
alert($(this).text()); //继续使用$()方法
})
})(jQuery);                 //执行匿名函数并且传递实参jQuery

$("pp").style.display = 'none'; //使用Prototype

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

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

1.6 jQuery开发工具和插件

Dreamweaver
Aptana
jQueryWTP和Spket插件

这两款插件都可以使Eclipse支持jQuery自动提示代码功能。
Visual Studio
任意编辑器