快速学习jQuery基本功练习与提高(1)

开始在CSDN写博客 , 记录笔记+代码练习 , Action ! 

现在要学习jQuery , 前期准备了以下内容 :

jQuery手册 : http://jquery.cuishifeng.cn/

W3Cschool : http://www.w3school.com.cn/

还准备了三本书(按照顺序阅读) :

<锋利的jQuery>第二版

<jQuery权威指南>第二版

<精通jQuery>第二版

遇到其他问题借助Baidu搜索 .

 

<锋利的jQuery>第二版 学习笔记

第一章 认识jQuery

JavaScript自身的三个弊端，复杂的文档对象模型（DOM），不一致的浏览器实现，开发调试工具缺乏。

一些JS库：

Prototype，Dojo，YUI，Ext JS，MooTools，jQuery

jQuery简介

核心库，UI，插件，jQuery Mobile

jQuery简化了遍历HTML文档，操作DOM，处理事件，执行动画，开发Ajax的操作。

jQuery优势

• 轻量级：采用UglifyJS压缩
  • UglifyJS : https://github.com/mishoo/UglifyJS
  • Closure Compiler也是一款压缩工具
  • 再百度一些其他的
• 选择器强大：CSS1-CSS3所有选择器，加入插件支持XPath选择器，自定义选择器
• DOM操作封装：封装大量常用DOM操作
• 事件处理机制：可靠的绑定事件
• Ajax：封装Ajax，无需关心浏览器兼容等问题
• 不污染顶级变量：只建立一个名为jQuery的对象，所有函数方法都在对象之下
• 浏览器兼容性强：不必建立浏览器兼容库
• 链式操作：在同一个jQuery对象上发生一组动作
• 隐式迭代：自动操作对象集合
• 行为层与结构层分离
• 插件支持丰富
• 文档完善
• 开源

jQuery代码的编写

jquery.js 开发版，未压缩，用于测试

jquery.min.js 生产版，压缩，用于产品

引入jQuery：

<scriptsrc="../script/jquery.js"type="text/javascript"></script>

第一个jQuery程序：$ = jQuery

<scriptsrc="../script/jquery.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(document).ready(function(){
alert("Hello World!");
});
</script>

上面的代码还可以简写成：

$(function(){
alert("Hello World");
});

关于$(document).ready()的详细说明可以参考附录A , 在第四章的4.1.1小节也有关于$(document).ready()和window.onload的详细对比 .

代码风格的统一：

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

$("li").show().unbind("click");

（2）对于同一个对象的较多操作，建议每行写一个操作：

$(this).removeClass("mouseout")
.addClass("mouseover")
.stop()
.fadeTo("fast",0.6)
.fadeTo("fast",0.1)
.unbind("click")
.click(function(){
//do something~
});

（3）对于多个对象的少量操作每个对象写一行，涉及子元素考虑缩进：

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

对简化的代码加注释

jQuery对象和DOM对象

DOM对象：

例如：

<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>

网页中的标签就是DOM树，其中ul有3个li子节点，是DOM元素节点，可以通过js中的getElementByTagName或者getElementById来获取元素节点，得到的DOM元素就是DOM对象：

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

jQuery对象：

通过包装DOM对象后产生的对象就是jQuery对象，jQuery对象是jQuery独有的，可以使用jQuery里的方法：

$("#foo").html(); //其中.html()是jQuery里的方法

上面的代码等于：

document.getElementById("foo").innerHTML;

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

 

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

变量风格约定：

jQuery对象：

var $variable = jQuery对象;// 如果获取的对象是jQuery对象(只是风格)

DOM对象：

var variable = DOM对象;

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

DOM对象转换成jQuery对象：

用$()把DOM对象包起来就可以获得一个jQuery对象：

jQuery代码：

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

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

DOM对象和jQuery对象的应用

DOM方法：

$(document).ready(function(){ // 等待DOM元素加载完毕
	var $cr = $("#cr"); // jQuery对象
	var cr = $cr[0]; // 转换为DOM对象
	$cr.click(function(){
		if(cr.checked){ // DOM方法判断
			alert("感谢你的支持");
		}
	})
})

jQuery方法 :

$(document).ready(function(){ // 等待DOM元素加载完毕
	var $cr = $("#cr"); // jQuery对象
	$cr.click(function(){
		if($cr.is(":checked")){ // jQuery方式判断
			alert("感谢你的支持");
		}
	})
})<span lang="en-US">
</span><span lang="zh-CN"></span>

is(":checked")是jQuery中的方法 ,判断jQuery对象是否被选中 ,返回boolean值

解决jQuery和其他库的冲突

jQuery库中，几乎所有的插件都被限制在它的命名空间里，和其他库一起使用不会引起冲突。

 

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

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

// …省略其他代码

<pid="pp">Test-Prototype(将被隐藏)</p>

<p>Test-jQuery(将被绑定单机事件)</p>

<!-- 引入 protptype -->

<scriptsrc="lib/prototype.js"type="text/javascript"></script>

<!-- 引入 jQuery à

<scriptsrc="../../scripts/jquery.js"type="text/javascript"></script>

<scriptlanguage="javascript">

jQuery.noConflict(); //将变量$的控制权移交给prototype.js

jQuery(function(){ // 使用jQuery

jQuery("p").click(function(){

alert(jQuery(this).text());

});

});

$("pp").style.display ='none'; // 使用prototype.js隐藏对象

</script>

</body>

// …省略其他代码

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

 

还可以自定义一个快捷方式给jQuery：

// …省略其他代码

var $j = jQuery.noConflict(); //自定义一个快捷方式

$j(function(){

$j("p").click(fcunction(){

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()函数 .

// …省略其他代码

<pid="pp">Test-prototype(将被隐藏)</p>

<p>Test-jQuery(将被绑定单击事件)</p>

<!-- 先导入jQuery à

<scriptsrc="../../scripts/jquery.js"type="text/javascript"></script>

<!-- 后导入其他库 à

<scriptsrc="lib/prototype.js"type="text/javascript"></script>

<scriptlanguage="javascript">

jQuery(function(){ // 直接使用jQuery ,无需调用"jQuery.noConflict()"函数

jQuery("p").click(function(){

alert(jQuery(this).text());

})

})

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

</script>

// …省略其他代码

jQuery开发工具和插件

Dreamweaver

Aptana：一个功能强大，开源，专注于JavaScript的Ajax开发IDE

jQueryWTP和Spket插件 , 都可以使Eclipse支持jQuery自动提示代码功能

Visual Studio

等等。

总结

简单介绍了JS , 和几个JS库 . 然后介绍了jQuery的由来和优势 . 然后简单的接触了jQuery程序 , 了解到了$(document).ready() , 此外还约定了jQuery的代码风格和变量风格 .

后半部分重点介绍了jQuery对象和DOM对象的区别以及它们之间的相互转换  , 然后讲解了如何解决jQuery和其他JS库冲突的问题 , 和完善的解决方案 , 最后介绍了几个IDE编辑器等 .