一、jQuery概述
宗旨: Write Less, Do More.
基础知识：
1.符号$代替document.getElementById()函数
2.使用Css+Xpath来查询页面元素
3.适当的混用jQuery、Dom和JavaScript能够提升程序的执行效率。
如：Offset、Append、Before是jQuery的瓶颈
4.函数$()是$("document").ready的简写，功能与JavaScript的Window.OnLoad=function(){}相同。
如：<Script type="text/javascript">
$( function(){
$("div").after("");
}
)
</script>
5.jQuery变量定义需要附加前缀$,以与javascript变量区分开
如：var $div = $("div")
二、比较流行的javascript技术框架
1.Dojo http://dojotoolkit.org 强大的面向对象的JavaScript框架
2.YUI http://developer.yahoo.com/yui 是yahoo user interface的简称
3.jQuery http://jquery.com
4.Mootools http://mootools.net 简洁、高效面向对象的JavaScript框架
5.Prototype http://www.prototypejs.org 易于使用、面向对象的JavaScript框架。封装并简化和扩展了一些在Web开发中常用到的JavaScript方法及Ajax处理过程
6.Script.aculo.us http://Script.aculo.us 易于使用，支持多浏览器且用于增强Prototype的JavaScript框架
7.ExtJS http://www.extjs.com 是一个跨浏览器，用于开发RIA应用的JavaScript框架
三、jQuery应用
1.连写
对于发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。
2.库导入
<Script src="jquery.js" type="text/javascript"></Script>
3.使用
如：在页面载入后弹出一个对话框
<Script type="text/javascript">
$( function(){
alert("Hello world!");
}
)
</Script>
4.jQuery对象与Dom对象是不同的。所以jQuery对象的属性方法不能被Dom对象直接调用，反之亦然。
jQuery是一组相同Dom对象的数组。将jQuery对象转换为Dom对象，可以：
1>使用数组下标
$( function(){
var $li = $("li");
var li = $li[0];
alert(li.innerHtml);
}
)
2>使用jQuery对象的Get()方法,传递一个索引值
$( function(){
var $li = $("li");
var li = $li.get(0);
alert(li.innerHtml);
}
)
将一个Dom对象转为jQuery对象:
1>直接使用$()函数
$( function(){
var li = document.getElementById("li");
var $li = $( li[0] );
alert($li.html());
}
)
2>直接把Dom数组传递给$()
$( function(){
var li = document.getElementById("li");
var $li = $( li );
alert($li.html());
}
)
注：jQuery是一个类数组，而不数组类型的数据。
5.jQuery.ready与window.Load比较
1>Load在网页中所有元素加载完才会执行。可能会出现的情况是网页已显示出来，但一部分音频文件未加载完，所以Load事件这里也不执行。
ready事件在Dom绘制完毕后执行。这时即使有未加载完的音频也会执行。
ready先于Load执行。只有在网页没有外部文件需要加载的情况下近乎同时执行。
2>Load只会影响最后一次的事件处理过程
如：Window.onLoad = function (){
alert("1");
}
Window.onLoad = function (){
alert("2");
}
只有"2"的处理过程被执行
而，jQuery的ready可被多次执行
$( function(){
alert("1");
}
)
$( function(){
alert("2");
}
)
这样有利于复杂的初始化操作。
四、jQuery核心
1.构造函数
jQuery把所有的操作都封装到jQuery()函数中,形成了唯一的入口。其参数为
1>jQuery(expression,context)
expression可以是ID,Dom元素名,CSS表达式或Xpath表达式。jQuery将根据此值匹配文档中的元素，然后把找到的元素封装到jQuery对象并返回。
如： $(div#wrap>p:first).addClass("red"); //CSS表达式
context 上下文.指定在文档DOM中的哪个节点开始进行查询。默认为document
2>jQuery(html)
html表示一个html结构字符串。
如：$("ul").append($("<li>new item</li>"));
3>jQuery(element)
element是一个Dom对象
如：$(document).ready( function(){
...;
}
);
4>jQuery(fn)
fn表示一个处理函数。
如：$( function(){
...;
}
);
2.链式语法,即一些函数的返回值仍为jQuery对象本身。
如：$("input[type='button']").eq(0).click( function(){
alert('Button clicked.');
}
).end();
end()函数取消当前的jQuery对象,返回前面的jQuery对象。(jQuery是类数组，或集合)
注：1>在同一个jQuery对象上执行不超过3个方法，可以写在同一行。
2>如果在同一个jQuery上执行很多操作，则应该分行。
3>代码缩进
3.jQuery选择器
支持ID、tagName、CSS1~3表达式及Xpath表达式。见：http://docs.jquery.com/Selectors。自定义的过滤方法
jQuery支持 选择 和 过滤
1.过滤
* 表示从全部"*"元素中筛选
如：$(":[title]") 等同于 $("*:[title]")
2.选择功能没有默认范围。
$( function(){
$("input[type='button']").click( function(){
var i = 0;
//下面的匹配所有的输入框
$("input[type='text']").each( function(){
i += parseInt( $(this).val() );
}
)
}
);
示例中：为按钮添加了一个事件。$(this)表示当前选择的文本框，或当前jQuery对象。
4.jQuery扩展
五、jQuery操作
1.操作内家
1>属性
attribute、class、style等，jQuery扩展属性，缓存数据、expando的自定义属性
2>元素
元素的创建、添加、被加、移动、复制、删除
3>内容
html()
4>样式
height、width、innerHeight...
5>事件
AddEvent、removeEnent、domready等
6>通信
Ajax
7>
六、jQuery原型
JavaScript中的原型对象(以下为示例，有错误。)
JavaScript通过为所有函数绑定一个prototype属性用来指向一个原型对象。此原型对象可以定义类继承、属性和方法
<Script >
var jQuery = function(){
jQuery.prototype = {//扩展的原型对象
}
}
</script>
更安全的作法是，定义一个属性
<Script >
var jQuery.fn = jQuery.prototype = {//扩展的原型对象
}
</script>
这里的jQuery.fn相当于jQuery.prototpye的别名。那么
var $ = jQuery = function(){}
给jQuery添加两个成员
var $ = jQuery = function (){
jQuery.fn = jQuery.prototype = {
jquery: "1.2.3", //原型属性
size: function(){ //原型方法
return this.length;
}
}
}
调用方法：
正常调用方法为：
var my$ = new $();//实例化
alert( my$.jquery );
alert( my$.size() );
但jQuery却如下：
$().jquery;
$().size();
即，jQuery没有使用new运算符将jQuery类实例化。实际在浏览器使用这段代码会报错。没有实例化，那么
var $ = jQuery = function(){
return new jQuery();
}
然而，仍然会报错，堆栈溢出。说明有死循环。那么：
使用一个工厂方法来创建一个实例，并把它放到prototype原型对象中，然后在构造函数中返回这个调用。
var $ = jQuery = function() {
return jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
init: function(){
return this;
},
jquery:"1.2.4",
size: function(){
return this.length;
}
}
以上示例还是有错误，它并没有实例化jQuery，那么要如何做？
七、jQuery的函数,都有两个功能，取值与赋值
1.html()
若参数不为空，则先清空匹配元素的内容，然后调用append()插入内容。
若为空，则返回第一个匹配的元素的hmtl源码
2.extend() 用于扩展
八、名字空间
在JavaScript中
var jQuery = function(){};
jQuery = function(){};
都是合法的。但第一句表示声明一个变量,而第二句表示定义Window对象的一个属性。它相当于Window.jQuery = function(){};
若需要隔离代码，即你的代码不希望被别的代码随意访问，且不愿意暴露内部实现，这时需要使用匿名函数(闭包).
如：
( function (){
function f1(){
return "This is f1.";
}
}
)();
noConfilit()方法，实现禁止jQuery使用$与jQuery变量，而用临时变量_$ 与 _jQuery 代替
九、61 ~ 64 页Init()构造器函数中6种处理情况!!!!
1.
十、选择器
由于jQuery返回的是一个类数组，所以判断jQuery是否为空的方法应该为
if ( $("xxx").length > 0 )
{
...
}
1.简单选择器
1>选择指定ID的元素,使用 # + Id 的字符串表示
JavaScript: document.getElementById(ID)
jQuery: $("#ID")
在效率上jQuery要比JavaScript慢，所以,可以通过将JavaScript的原生方法传递给$的方式进行混用
例：
<批量操作一例：>
通过ID来获取Dom对象并存入数组
var arr = [];
var $ = document.getElementById;//临时把JavaScript的原生方法传递给$
for (var i = 0;i < 1000; i++)
{
var item = $("#span" + i);
arr.push(item);
}
$ = jQuery;//恢复$的默认值
jQuery转义操作
选择器中有特殊字符，需要转义。原因：jQuery使用正则表达式进行字符串匹配
如：. : [ ]
转义方法为使用 \\
则：\\. \\: \\[ \\]
2>选择指定类型的元素
JavaScript: document.getElementByTagName(Tag)
jQuery: $("Tag")
在效率上依然慢于JavaScript,可采用混用的方式解决。
3>选择指定"类"的元素,使用 . + 类名 的字符串表示
JavaScript中没有类选择的方法，但可以扩展(在Dom3版本中已有此方法)
document.getElementByClassName = function(className) {
var el = [];
_el = document.getElementByTagName('*');//获取所有元素
for (var i = 0 ;i < _el.length; i++)
{
if (_el[i].className == className )
el[el.length] = _el[i];
}
return el;
}
jQuery: $(".className")
如: $(".red") 与 document.getElementByClassName("red")功能相同
4>选择所有元素及优化,使用 *
$("body *) 表示选择body下的所有元素
例：
$( function()
{
var all = document.getElementByTagName("*");
$(all).css("color","red");
}
与
$("body *).css("color","red"); 结果相同,效率也相同
5>多选,使用 , 分隔不同的选择器表达式
$("h2,#wrap,span.red,[title='text'].css("color","red");
2.关系选择器.文档节点之间的包含与并列关系
1>层级选择器
<1>$("ancestor descendant") 在给定的"ancestor"选择器下匹配所有的"descendant"选择器
<2>$("parent > child") 在给定的"父"选择器下匹配所有的"child"选择器
<3>$("prev + Next") 匹配所有紧跟在"prev"选择器后的所有"Next"选择器
<4>$("prev ~ Siblings") 匹配"prev"选择器这后的所有"siblings"的选择器
示例：
$("div").css("border","solid 1px red"); //文档中所有的div
$("div>div").css(....); //文档中所有的div的子div,若div(第二个表达式)没有子div，则跳过
$("div div").css(....); //文档中所有的div下的div，即使div(第二个表达式)没有子div。
$("div div div").css(....); //文档中第三层的div,这个div必须能向上有两层。
$("div + p").css(....); //文档中紧跟在div后面的p
$("div:eq(1) ~ p").css(....); //文档如div同级相邻的p
2>子元素选择器
<1>:nth-child 匹配父元素下的第N个子(或奇偶)元素。索引从１开始
<2>:first-child 匹配第一个子元素。:first只匹配一个元素;:first-child为每个父元素匹配一个子元素
<3>:last-child 匹配最后一个元素。:last与:last-child区别同上。
<4>:only-child 若某元素是父元素的唯一元素，则会被匹配。否则不会被匹配
示例：
:nth-child(even); 匹配偶数位元素
:nth-child(odd); 匹配奇数位元素
:nth-child(2); 匹配第2个元素
:nth-child(3n); 匹配第3个元素及后面间隔3的所有元素
:nth-child(3n+1); 匹配第1个元素及后面间隔3的所有元素
:nth-child(3n+2); 匹配第2个元素及后面间隔3的所有元素
$("ul li:first-child").css(...);
$("ul li:last-child").css(...);
$("ul li:nth-child(1)").css(...);
$("ul li:nth-child(2n)").css(...);
3.过滤选择器
1>定位过滤器
<1>:first 匹配找到的第一个元素，只一个。
<2>:last 匹配找到的最后一个元素，只一个。
<3>:not 取反，如：:not(div a)
<4>:even 匹配索引值为偶数的元素。从0开始
<5>:odd 奇数
<6>:eq 匹配一个给定索引值的元素，从0开始。如：$("tr:eq(1)") 匹配第二行表格
<7>:gt 匹配所有大于给定的索引值的元素，从0开始。$("tr:gt(1)") 匹配第三行及以后行
<8>:lt 小于
<9>:header 匹配如 h1, h2 ,h3 之类的标题元素
<10>:animated 匹配所有正在执行动画效果的元素
2>内容过滤器。根据匹配元素所包含的子元素或文本内容进行过滤。
<1>:contains 匹配包含给一文本的元素,如：$("div:contains('图片')")
<2>:empty 匹配不含子元素或空文本的元素。
<3>:has 匹配含有指定选择器元素的上xxx级元素。如：$("div:has(p)"); 匹配含有选择器p的div元素
<4>:parent 匹配有子元素或非空文本内容的元素
示例：
$("li:empty").text("空内容");//匹配空的li元素，并将其值设为"空内容"。
$("div ul:parent").css(....);//匹配div下有子元素或非空文本的ul ??
$("h2:contains('标题')").css(....);//匹配含有"标题"的h2元素
$("p:has(span)").css(....);//匹配含有span元素的p元素
3>可见过滤器。根据元素的可见或隐藏进行匹配。通过判断CSS属性的offsetWidth或offsetHeight，只要不为0则visible为真。
<1>:hidden 匹配所有不可见元素,或type为hidden的元素
<2>:visible 匹配所有可见元素
示例：
$("p:odd").hide();//隐藏奇数位的p元素。
$("p:hidden").show();//将奇数位的p元素显示出来
4.属性选择器。把元素的属性及其值作为过滤条件。使用 [ ]作为定界符。
1>[attribute] 匹配指定属性的元素。如：$("div[id]");匹配具有id属性的div
2>[attribute=value] 匹配指定属性及属性值的元素。 $("div[name='text']"); 若value中含有"]"，那需要使用引号以避免冲突
3>[attribute=!value] 匹配属性值不为(或含有)value的元素。与 :not([attribute=value])功能相同。若匹配含有某属性，但值不为value的元素，则[att]:not([att=value])。
4>[attribute^=value] 匹配属性值以value开始的元素。如：$("input[name^='text']");匹配name以text开始的input
5>[attribute$=value] .................结束.......
6>[attribute*=value] ..........包含value.........如：$("input[name*='test']");匹配name中含有text的input
7>[selecctor1][selecctor2][selecctorN] 复合属性选择器，匹配满足多个条件的元素。如：$("input[name*='text'][id]");匹配name含有text，且具有id属性的input
5.表单选择器
1>简单表单域选择器
<1>:input 匹配所有的input、textarea、select、button元素
<2>:text 匹配所有的文本框
<3>:password 匹配所有的密码框
<4>:radio 匹配所有的单选框
<5>:checkbox 匹配所有的复选框
<6>:submit 匹配所有的提交按钮
<7>:image 匹配所有的图像域
<8>:reset 匹配所有的重置按钮
<9>:button 匹配所有的按钮
<10>:file 匹配所有的文本域
<11>:hidden 匹配所有的不可见元素，或type为hidden的元素。
示例：
<form ).html(str);
十五、jQuery插件扩展
1.jQuery.extend() 能够创建全局函数或选择器
示例：
$.extend(
{
min : function(a,b)
{
return a<b?a:b;
},
max : function(a,b)
{
return a>b?a:b;
}
}
)
调用
$.min(1,2);
$.max(1,2);
P311页
相关文章：