jQuery的核心及工具

1.核心函数

jQuery()函数(亦可写成$())是jQuery中最重要的一个函数,jQuery的核心功能都是通过这个函数实现的。jQuery中的一切都是基于这个函数,或者说都是在以某种方式使用这个函数。

$(expression,[context])  返回值:jQuery  参数-expression:表达式(通常是CSS选择器),XML文档,Window对象或者是HTML代码  context:作为待查找的DOM元素集,文档或jQuery对象Element,jQuery

第二个参数是可选参数,在默认情况下,如果没有指定context参数,$()将在当前HTML文档中查找DOM元素;如果指定了context参数,如一个DOM元素集或jQuery对象,则会在它们之中查找。

<input type="button" id="jquery" value="$.()" />

    <div>1外1</div>

    <div id="1">

    <div>1内1</div>

    <div>1内2</div>

    </div>

    <div>1外2</div>

$(function(){

$("#jquery").click(function(){

$("div",$("#1")).addClass("ABC");

})})

如上则只有位于#1内的div被应用了ABC样式

expression参数还可以是HTML标记字符串,这样可以动态创建由jQuery对象包装的DOM元素

$(function(){

$("#jquery").click(function(){

$("<div>1内3</div>").appendTo("#1");

$("div",$("#1")).addClass("ABC");

})})

还是用上面的例子,动态创建一个div标签然后添加到#1内,这样新被添加的div也可以被应用ABC样式

 

2.jQuery对象访问

①获得长度

所谓jQuery对象的长度即是指该页面上能够匹配该jQuery对象的元素的个数。一是利用length属性,二是利用size()函数

alert($("div").length);

alert($("div").size());

②获得其中某个对象

get([index])  返回值:纯DOM元素或纯DOM元素集  参数-index:取得第index个位置上的元素Number  不带参数时取得所有匹配的DOM元素集合，带参数index表示取得第几个匹配元素,此时函数用于取得其中一个匹配的元素

这个方法很好理解但是有一个要注意的问题是,它返回的是一个纯DOM元素,而不是一个jQuery对象(是在纯DOM元素外包了一层**就成了jQuery对象),所以很多jQuery函数是不能给纯DOM元素使用的,这一点与这里的5不同

alert($("div").get(0).hide());   会出错,因为纯DOM元素不认识hide()函数,还有很多jQuery函数是不能使用的

alert($("div").get().reverse());  一些可以操作纯DOM元素的函数则可以,如本处的reverse()

alert($("div").get().innerHTML);

index(subject) 返回值:Number  参数-subject:要搜索的对象Element,jQuery  在一个元素集合里搜索subject表示的元素,并返回其在该元素集合里的位置,没找到的话返回-1

<ul id="3">

    <li>0</li>

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ul>

$("#3 li").click(function(){

alert($("#3 li").index($(this)[0]));

})

每点击一个li 就显示该li在所有li中的位置http://www.cnblogs.com/trance/archive/2009/04/23/1442171.html

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

http://www.cnblogs.com/dongpo888/archive/2009/11/19/1605886.html

<span id="5">1

    <span>2</span>

    <span>3</span>

    <input type="text" />

</span>

$("#index").click(function(){

alert($("#5 *").index($("#5 input")));

})

要查找的元素不管是不是位于元素集合,大不了不在的时候返回-1。但匹配的元素最好范围小一些,如不要将本处改成alert($("#5 *").index($("input")));  会找不到,因为input在别处一般也会有

③遍历对象集

each(callback)  返回值:jQuery  参数-callback:对于每个匹配的元素所要执行的函数Function   在匹配的元素集中每遍历一个元素就执行一次该函数,且可以向callback函数传递一个参数,该参数代表当前所遍历的元素在匹配的元素集中的位置,还可以在callback函数中返回false停止遍历(像在C#循环中使用break)或返回true跳到下一个元素(像在C#中使用continue)

<div id="1">

    <input type="button" id="each1" value="$().each()" />

    <div class="abc">aaa</div>

    <div>bbb</div>

    <div class="abc">ccc</div>

    <div>从0开始第3个</div>

    <div>ddd</div>

 </div>

$("#each1").click(function(){

$("#1 div").each(function(data){

if(data==3){return false;}

$(this).toggleClass("abc");

})

点击按钮时有abc类的div和没abc类的div切换样式，但当遍历到第三个div时,跳过该元素直接到第4个div

 

3.数据缓存

①设置和获取元素的缓存数据

data(name,value)  返回值:Any 参数-name:存储数据的变量名String  value:存储的任意数据Any  为每一个匹配的元素绑定一个变量,而该变量则存储着数据

<input type="button" id="data1" value="$().data(name,value)" />

<input type="button" id="data2" value="$().data(name)" />

<div id="aaa"></div>

<div id="bbb"></div>

$("#data1").click(function(){

$("#aaa").data("data",12);})

$("#data2").click(function(){

$("#bbb").html($("#aaa").data("data"));})

先单击第一个button为#aaa绑定一个存储了数据12的变量data，再单击第二个button读取该数据到#bbb

data(name)  返回值:Any  参数-name:存储数据的变量名String  获取为匹配元素绑定的变量所存储的数据,如果匹配的是一个元素集,则只获取该元素集的第一个元素所绑定的数据

前面讲data(name,value)时已经说了value可以是任意类型的数据,自然也可以是json对象

$("#data1").click(function(){

$("#aaa").data("data",{qq:222,qw:"sss000"});})

$("#data2").click(function(){

alert($("#aaa").data("data"));

$("#bbb").html($("#aaa").data("data").qq+$("#aaa").data("data").qw);})

②删除缓存数据

removeData(name)  返回值:jQuery  参数-name:存储数据的变量名String  删除每一个匹配的元素绑定的变量,而该变量则存储着数据

$("#data3").click(function(){

$("#aaa").removeData("data");})

4.jQuery常用工具类

①浏览器相关

$.browser 得到一个浏览器类型数组    $.browser.version

②数组与对象相关

$.each(obj,[callback])   返回值:object  参数-obj:需要遍历的对象或数组Object  callback:每个成员或元素执行的回调函数Function  可用于遍历对象和数组,callback函数有俩参数,一个是对象的成员或数组的元素的索引,另一个是对应的成员或数组元素  

与$(".class").each(callback)不同的是$.each(obj,[callback])遍历的不是匹配的元素,而是对象{1:2,3:4}和数组[1,2,3,4] 并且为callback传递两个参数而不是一个 对于对象而言callback里的第二个参数是成员的值,不包括键

<input type="button" id="each" value="$.each()" />

    <div id="array1"></div>

    <div id="array2"></div>

    <div id="array3"></div>

var array=["rooney",10,"ronaldo",9];

var obj={rooney:10,ronaldo:9};

$("#each").click(function(){

$.each(array,function(i,data){

$("#array1").append(data);})

$.each(array,function(i,data){

if(i==1){return false;}

$("#array2").append(data);})

$.each(obj,function(i,data){

$("#array3").append(data);})

})

上面绿色部分,返回false,这里与$(".class").each(callback)的意义一样,可看原处详解

$.extend(target,obj1,...objN)  返回值:Object  参数-target:带修改对象或数组 objN:带合并到带修改对象或数组的对象或数组     用一个或多个其他对象或数组来扩展一个对象或数组,返回被扩展后的对象或数组

<input type="button" id="extend" value="$.extend()" />

    <div id="extend1"></div>

    <div id="extend2"></div>

var exarray1=[1,2,3,4,5];

var exarray2=[3,4,5,6,7,8,9];

var exarray3=[8,9];

$("#extend").click(function(){

var fin= $.extend(exarray1,exarray2,exarray3)

$.each(fin,function(i,data){

$("#extend1").append(data);})

})

从结果看基本上就是从最后一个元素开始向前覆盖相应索引的元素,多出来的元素会保留下来,此处最后extend1结果是8956789, 对于对象则是成员值的从后往前覆盖,不知道有什么意义,哪位网友有例子,望提供。

$.grep(array,[callback],[invert])  返回值:Array  参数-array:带过滤数组Array  callback:此函数处理数组中每个元素该函数每处理一个元素需返回true或false Function  invert:没设或为false,该函数返回callback中被处理为true的元素组成的数组;设成true则返回callback中被处理为false的元素组成的数组  使用过滤函数过滤数组元素,过滤函数callback的第一个参数为当前值,第二个参数为索引

<input type="button" id="grep" value="$.grep()" />

    <div id="grep1"></div>

    <div id="grep2"></div>

var greparray=[1,2,3,4,5,6,7,8,9,10];

$("#grep").click(function(){

$.each(greparray,function(i,data){

$("#grep1").append(data);})

var garray= $.grep(greparray,function(data,i){

return data>6;})

$.each(garray,function(i,data){

$("#grep2").append(data);})

})

只保留greparray数组中所有大于6的元素

$.inArray(value,array)  返回值:Number  参数-value:用于在数组中查找是否存在Any array:待处理数组Array  确定第一个参数在数组中的位置(如果没有找到,则返回-1)

$("#inArray").click(function(){

var array=[1,2,3,4,5,6];

alert($.inArray(3,array));

})

$.makeArray(obj)  返回值:Array  参数-obj:类数组对象Object  将类数组对象转化为数组对象,对需要同时操作大量具有相同或者相似属性的页面元素的情况特别有用

<input type="button" id="makeArray" value="$.makeArray()" />

<span class="a">aaa</span>

<p class="a">bbb</p>

<span class="a">ccc</span>

<p class="a">ddd</p>

<div id="mA" style="background-color:Green;"></div>

$("#makeArray").click(function(){

var array=$.makeArray($(".a").text());

$.each(array,function(i,data){

$("#mA").append(data);})

})  

将css类为a的元素里的文本组成一个数组,然后将新数组里的元素添加到#mA里

由于$.makeArray(obj)里的参数可以是任意类型,所以看下面

$("#makeArray").click(function(){

var array=$.makeArray($(".a"));

$.each(array,function(i,data){

$("#mA").append(data);})

})

将css类为a的元素组成一个数组,然后将新数组里的元素添加到#mA里

$.map(array,callback)  返回值:Array  参数-array:待转换数组Array  callback:对于每个数组元素所要执行的函数有俩参数一是当前处理元素,另一个是该元素的索引Function   将一个数组中的元素转换到另一个数组中,callback中需要用return返回每个元素到新数组中,原来数组中的元素依然还在

<input type="button" id="map" value="$.map()" />

    <div id="map1">①</div>

    <div id="map2">②</div>

$("#map").click(function(){

var array=[1,2,3,4,5,6];

var newarray=$.map(array,function(data,i){return data-1});

$("#map1").append(array.join(","));

$("#map2").append(newarray.join(","));

})

join()函数用于使用指定分隔符分隔数组的元素并返回字符串,类似C#里的split()

$.unique(array)  返回值:jQuery  参数-array:待处理数组Array  删除数组中重复的元素

该函数貌似无效,可看一下该函数的jQuery源码找找问题

③其他功能性函数

$.isFunction(obj)  返回值:Boolean  测试对象是否为函数

$.trim(str)   返回值:String  去掉参数字符串起始和结尾的空格 

5.jQuery插件机制

jQuery插件就是第三方为jQuery拓展出来的方法,jQuery提供了以下两种方法供第三方定义插件来对其拓展

①$.extend(object)   参数object是一个特殊的json对象{键:值} 其中键是拓展的方法名  值一般是一个函数

类似于$.methodname(pasmas)

如自己设计一个比较两个数的大小的插件,拓展了max(a,b)和min(a,b)俩函数

$.extend({min:function(a,b){

return a<b?a:b;},

max:function(a,b){

return a>b?a:b;}

})

$("#ext").click(function(){

alert($.min(2,3));

alert($.max(3,4));

})

②$.fn.extend(object)   参数object是一个特殊的json对象{键:值} 其中键是拓展的方法名  值一般是一个函数

类似于$("#id").methodname(pasmas)

如自己设计一个改变匹配元素颜色的插件,拓展了changeColor(color)函数

<input type="button" id="fnext" value="$.fn.extend()" />

<div id="fnext1" style="width:50px; height:50px;"></div>

$.fn.extend({chengeColor:function(color){

return this.each(function(){

$(this).css("background",color);})

}})

$("#fnext").click(function(){

$("#fnext1").chengeColor("red");

})

jQuery插件开发:http://www.iteye.com/topic/545971

                        http://www.oschina.net/question/28_39656