JQuey 介绍（1）

转自：http://lcr.javaeye.com/blog/897535

1.基础介绍
Js代码
$(document).ready(function(){
--- jQuery functions go here ----
});

jQuery(document).ready(function($){
--- jQuery functions go here ----
});

$(function(){
// 文档就绪
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

下面是两种假如文档完全加载之前运行函数的话，操作失败的情况：
* 试图隐藏一个不存在的元素。
* 获得未完全加载的图像的大小。

一般情况下一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。
页面加载完成有两种事件：
一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）
二是onload，指示页面包含图片等文件在内的所有元素都加载完成
Java代码
var jQuery = function( selector, context ) {
.............
}



2.核心函数
Js代码
jQuery(expression, [context])

默认情况下, 如果没有指定context参数，$()将在当前的 HTML 文档中查找 DOM 元素；
如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。
例如：
a. jQuery()
jQuery 1.4返回空的 jQuery 集合;之前版本会返回包含 document 节点的集合。
b. jQuery(element)
从整个HTML文档中查找指定的元素element
jQuery("td") 查找所有的td元素
c. jQuery(expression, [context])
//var tr = document.getElementById("tr_1");
//var tr = $("#tr_1");
jQuery("td",tr)
d. jQuery(jQuery object) 以参数的形式向 $() 函数传递 jQuery 对象后，会创建一个该对象的副本


Js代码
jQuery(html, [ownerDocument])

参数中的[ownerDocument]应该为HTMLDocument，方法才能成功创建一个jQuery对象，如果不填这个参数，则默认为当前的Document
$(html,window._content.document) 可以正常使用，其中window._content.document类型是 HTMLDocument，而在没有写第二个参数的时候默认使用的是XULDocument
如果以参数的形式将字符串传递给 $()，jQuery 会检查字符串是否是 HTML , 如果不是，则把字符串解释为选择器表达式，但如果字符串是 HTML 片段，则 jQuery 试图创建由该 HTML 片段描述的 DOM 元素。
然后会创建并返回一个引用这些 DOM 元素的 jQuery 对象，在jquery内部调用doc.createDocumentFragment()。
xmlDocument.createDocumentFragment();
一个新的文件片断被建立，但没有加到文件树中。要加入片断到文件树中，必须使用插入方法，例如insertBefore、replaceChild 或appendChild。
例如：
$("<div><p>Hello</p></div>"，window._content.document).appendTo("body");
// 在 IE 中无效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");


Js代码
jQuery(html,props)

对于 jQuery 1.4，我们可以向第二个参数传递一个属性映射。该参数接受能够传递给 .attr() 方法的属性的超集。
例如：
Js代码
创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。
function yy () {
$("<input>",{
type : "button",
val : "text",
click : function(){
alert("hello--button");
}
}).appendTo("body");
}


Js代码
jQuery(elements) 用于将elements表示的DOM元素封装成jQuery对象


Js代码
jQuery(callback) $(document).ready()的简写。
例如：
$(function(){
// 文档就绪
});

jQuery(function($) {
// 你可以在这里继续使用$作为别名...
});



3.对象访问
Js代码
each(callback)

例如:
迭代两个图像，并设置它们的 src 属性。
Js代码
<img/><img/>

代码为：
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});

注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
如果你想得到 jQuery对象，可以使用 $(this) 函数。
$(this).attr("src", "this"+i+".jpg");


Js代码
size() jQuery 对象中元素的个数(同jQuery 对象的'length' 属性)。


Js代码
length jQuery 对象中元素的个数(同 size()方法)。


Js代码
selector jQuery 1.3新增。返回传给jQuery()的原始选择器。

换句话说，就是返回你用什么选择器来找到这个元素的。可以与context一起使用，用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。
Js代码
例如：
var tr = $("table");
alert(tr.selector); //table
var tr = $("#tr_1");
alert(tr.selector); //#tr_1



Js代码
context
jQuery 1.3新增。返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。
如果没有指定，那么context指向当前的文档(document)。

可以与selector一起使用，用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。
var tr = $("#tr_1");
var tds = $("td", tr);
alert(tds.context); //[object HTMLDocument]

//如果是IE浏览器，则返回[object]
var tds = $("td", document.body);
alert(tds.context.nodeName); //BODY


Js代码
get()
取得所有匹配的 DOM 元素集合。
这是取得所有匹配元素的一种向后兼容的方式（不同于jQuery对象，而实际上是元素数组）。
如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用。


Js代码
get(index)
取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。


Js代码
index(subject)
搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。
如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。
例如：
var tr = $("tr").index($("#tr_1")[0]);
alert(tr); //1
var tr = $("tr").index($("#tr_1"));
alert(tr); //1



4.数据缓存


Js代码
data(name)

返回元素上储存的相应名字的数据，可以用data(name, value)来设定。
如果jQuery集合指向多个元素，那将只返回第一个元素的对应数据。
这个函数可以用于在一个元素上存取数据而避免了循环引用的风险。jQuery.data是1.2.3版的新功能。你可以在很多地方使用这个函数，另外jQuery UI里经常使用这个函数。


Js代码
data(name,value)

在元素上存放数据，同时也返回value。
如果jQuery集合指向多个元素，那将在所有元素上设置对应数据。
这个函数不用建立一个新的expando，就能在一个元素上存放任何格式的数据，而不仅仅是字符串。
$('selector').attr('alt', 'data being stored');
//之后可以这样读取数据:
$('selector').attr('alt');
使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的，我们可以使用jQuery的data方法来为页面中的某个元素存储数据,使用data方法可以避免在DOM中存储数据。


Js代码
removeData(name)
在元素上移除存放的数据
与$(...).data(name, value)函数作用相反


Js代码
queue(name[,callback | queue])
dequeue(name) 从队列最前端移除一个队列函数，并执行他。

jQuery中的queue和dequeue是一组很有用的方法，他们对于一系列需要按次序运行的函数特别有用。特别animate动画，ajax，以及timeout等需要一定时间的函数。
queue和dequeue的过程主要是：
a.用queue把函数加入队列（通常是函数数组）
b.用dequeue将函数数组中的第一个函数取出，并执行(用shift()方法取出并执行）

也就意味着当再次执行dequeue的时候，得到的是另一个函数了
同时也意味着，如果不执行dequeue，那么队列中的下一个函数永远不会执行

对于一个元素上执行animate方法加动画，jQuery内部也会将其加入名为 fx 的函数队列
而对于多个元素要依次执行动画，则必须我们手动设置队列进行了。

queue(name)当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);
当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时,它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).
Html代码
<style type="text/css">
div{
border:2px solid green;
width:18px;
height:18px;
left:0px;
background-color:red;
position:absolute
}
</style>

<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>




Js代码
$(document).ready(function(){
$("#id_but").bind("click",taskOne);
});
//当没有使用queue时，希望所有的div元素向右移动一定的距离，实现代码如下:
function taskOne(){
$("#one").delay(300).animate({left:"+=270px"},function(){
$("#two").delay(300).animate({left:"+=250px"},function(){
$("#three").delay(300).animate({left:"+=230px"},function(){
$("#four").delay(300).animate({left:"+=210px"},function(){
$("#five").delay(300).animate({left:"+=190px"},function(){
alert("动画结束");
});
});
});
});
});
}


Js代码
此时添加或删除一div时操作麻烦且易于出错，使用queue实现的代码如下：
var _sildeFun = [
function() {$("#one").delay(300).animate({left:"+=270"}, taskOne);},
function() {$("#two").delay(300).animate({left:"+=250"}, taskOne);},
function() {$("#three").delay(300).animate({left:"+=230"}, taskOne);},
function() {$("#four").delay(300).animate({left:"+=210"}, taskOne);},
function() {$("#five").delay(300).animate({left:"+=190"}, taskOne);},
function() {alert("动画结束");}
];

$(document).queue("task",_sildeFun);
function taskOne(){
$(document).dequeue("task");
}

此时只需在需要运行动画效果时调用taskOne方法即可，可以在外面直接调用taskOne()或在ready方法中调用。
Js代码
clearQueue([queueName]) 1.4新增的方法. 清空对象上尚未执行的所有队列.

与 stop() 方法（只适用于动画）不同，clearQueue() 能够清除任何排队的函数（通过 .queue() 方法添加到通用jQuery 队列的任何函数）。
$(selector).clearQueue(queueName)
//queueName : 可选。规定要停止的队列的名称。默认是 "fx"，标准效果队列。
Js代码
$(document).ready(function(){
$("#id_but").bind("click",taskOne);
$("#id_sbut").bind("click",clearQ);
});

function clearQ() {
//$(document).clearQueue("task");
$(document).queue("task",[]); //通过传递空数组来停止动画
}


Html代码
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").queue(function () {
$(this).css("background-color","red");
$(this).dequeue();
});
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
$("#stop").click(function(){
$("#box").clearQueue();
});
});
</script>
<style type="text/css">
#box{
background:#98bf21;
height:100px;
width:100px;
position:relative
}
</style>
</head>
<body>
<button id="start">启动</button>
<button id="stop">停止</button></p>
<div id="box"></div>
</body>
</html>



5.插件机制

jQuery插件的开发包括两种：
一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数。
另一种是对象级别的插件开发，即给jQuery对象添加方法。


Js代码
jQuery.fn = jQuery.prototype = {
init:function(selector, context){
.......
}
......
}

jQuery.fn.init.prototype = jQuery.fn;
jQuery.extend = jQuery.fn.extend = function() {
.......
}
Js代码
jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。


Js代码
<tr>
<td colspan="6">
<input type="checkbox" name="test" value="apple"/>
<input type="checkbox" name="test" value="peach"/>
<input type="checkbox" name="test" value="banana"/>
</td>
</tr>

$(document).ready(function(){
$("#id_but").click(function(){
$("input:checkbox").uncheck(); //让jQuery实例(对象调用)
});
$("input:checkbox").check();
});
//extend
jQuery.fn.extend({
alertClick:function(){
$(this).click(function(){
alert($(this).val());
});
},
color:function(val){
if (typeof(val) == undefined) {
alert("未知的颜色值");
return false;
}
$(this).css("background-color",val);
},
check:function(){
$(this).each(function(){
$(this).attr("checked",true);
});
},
uncheck: function() {
this.each(function() {
this.checked = false;
});
}
});


Js代码
jQuery.extend(object) 扩展jQuery对象本身。


Js代码
$(document).ready(function(){
$("#id_but").click(function(){
alert($.add(3,4)); //只能让jQuery来调用，不可以通过其实例(对象)调用
});
});

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; },
add: function(a, b) { return a + b}
});

类级别的插件开发jQuery.extend(object)
类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。
典型的例子就是$.AJAX()这个函数，将函数定义于jQuery(代表其命名空间)的命名空间中。
虽然 javascript　没有明确的类的概念，但是用类来理解它，会更方便。
jQuery便是一个封装得非常好的类，比如我们用 语句　$("#btn") 会生成一个 jQuery类的实例。
添加一个全局函数，我们只需如下定义：
Js代码
$(document).ready(function(){
$("#id_but").click(function(){
$.foo();
$.bar();
});
});

jQuery.foo = function(){
alert("hello");
}

jQuery.bar = function(){
alert("china");
}
我们也可以通过jQuery.extend(object)扩展jQuery对象本身,将上述代码修改为：
jQuery.extend({
foo:function(){
alert("hello");
},
bar: function() {
alert("china");
}
});
即将foo与bar方法放到jQuery.extend(object)中实现jQuery对象本身的扩展。

虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。
Js代码
$(document).ready(function(){
$("#id_but").click(function(){
$.myplugin.click();
$.myplugin.bar1('aaa');
});
});

jQuery.myplugin={
click:function(){
alert('This is a test. This is only a test.');
},
bar1:function(param){
alert('This function takes a parameter, which is "' + param + '".');
}
}

通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。
JavaScript本身具有click事件，但是我们在myplugin命名空间里仍然可以定义名称为click的事件。
对于extend名称空间在jQuery内部已做了处理，在该名称空间中添加的方法在使用时无需再注明其名称空间。
Js代码
对象级别的插件开发需要如下的两种形式：
形式一
(function($){
$.fn.extend({
pluginName:function(opt,callback){
// Our plugin implementation code goes here.
}
})
})(jQuery);
形式二
(function($) {
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};
})(jQuery);

上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.


Js代码
形式一
jQuery.fn.extend({ //注意{} 必须有
check:function(){
$(this).each(function(){
$(this).attr("checked",true);
});
},
uncheck:function(){
$(this).each(function(){
$(this).attr("checked",false);
});
}
});
形式二
$(document).ready(function(){
$("#id_but").click(function(){
$("input:checkbox").uncheck();
});
$("input:checkbox").check();
});

jQuery.fn.check=function(){
$(this).each(function(){
$(this).attr("checked",true);
});
}

jQuery.fn.uncheck=function(){
$(this).each(function(){
$(this).attr("checked",false);
});
}



6.多库共存
Js代码
jQuery.noConflict()
运行这个函数将变量$的控制权让渡给第一个实现它的那个库。
在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。

注意:这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库之前使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的。
Js代码
//代码一
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>

//代码二
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>

//代码三
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>

//代码四
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
</script>


Js代码
jQuery(extreme)
extreme Boolean 传入 true 来允许彻底将jQuery变量还原
将$和jQuery的控制权都交还给原来的库。用之前请考虑清楚!
注意:调用此方法后极有可能导致插件失效。
例如：
var dom = {};
dom.query = jQuery.noConflict(true);
// 新 jQuery 的代码
dom.query("div p").hide();
// 另一个库 $() 的代码
$("content").style.display = 'none';
// 另一个版本 jQuery 的代码
jQuery("div > p").hide();