jQuery核心及其工具
1、核心函数
jQuery核心函数为$,可以作为$("document").ready()的简写,可以用来作为一个在DOM文档载入完成后执行的函数,
简写和全写一样,不过在使用时候有区别,一个文档中$只能有一个要包裹所有的操作,而全写的可以有多个,分别包裹。
2、jQuery对象的访问
$(".first").size() 等价于$(".first").length() 获得长度
get([index]) 不带参数时,取得所有匹配的DOM元素的集合,参数index表示取得第几个匹配的元素,此时函数用于取得第一个匹配的元素
join()函数用来将数组中的内容连接成一个字符串,如果里面带单数如join(",")则以参数为分割符,连在一起组成字符串。
reverse() 函数用于将得到的DOM元素数组内的各项反序。
使用get(index)可以根据已有的index定位匹配的元素位置,同样如果在已经得到元素的情况下可以查询其在DOM元素数值中的位置
这时候使用index(subject) 找到返回number,没找到返回-1
遍历对象集
for循环 、each(callback)其中的callback函数可以设定返回值,返回false时将停止循环(等同于break),设置ture时家你个跳至下一循环(等同与continue)。
3、数据缓存
隐藏数据
设置和获取元素的缓存数据
设置缓存数据的函数为data(name,value) name为存储的数据名,value为存储的数据值
获取数据的使用data(name)
其中value可以为包括字符串在内的所有数据类型,为在一个变量中保存多为数组提供来方便
$("#testbutton").click( function(){ $("#div1").data("style", {font:14,border:2}); $("#div3").html("style.font: " + $("#div1").data("style").font + "<br/>style.border:" + $("#div1").data("style").border); } );
代码中定义了stytle,并为其设定来一组数据,可以像在C语言中访问结构体一样使用“.”操作符进行访问。
删除缓存数据removeData(name),与data(name,value)的操作刚好相反。
4、jQuery常用工具类
浏览器相关
jQuery.browser的可用值有safari、opera、msie、mozilla
function(){ //显示浏览器类型以及版本 jQuery.each(jQuery.browser, function(i, val) { $("<div>" + i + " : <span>" + val + "</span>") .appendTo("#div3"); }); }
显示结果为:
这里用来显示结果.
数组与对象相关
each(obj,callback)
var arr=["one","two","three","four","five"];
如果只想遍历数组中前面4个元素,则可以设置返回false
function() { var arr = [ "one", "two", "three", "four", "five" ]; var obj = { one : 1, two : 2, three : 3, four : 4, five : 5 }; jQuery.each(arr, function() { $("#div3").append( "<div id='"+this+"'>My id is " + this + ".</div>"); return (this != "four"); }); jQuery.each(obj, function(i, val) { $("#" + i).append( document.createTextNode("--" + val)); })
为真时候等同为continue,继续执行循环。
extend()扩展数组
extend(target,obj1,[bojN])
target待修改对象,obj1待合并到第一个对象的对象,objN待合并到第一个对象的对象
var empty={};
var defaults={validate:false,limit:5,name:"foo"};
var options={validate:true,name:"bar"}
var setting=jQuery.extend(empty,defaults,options);
我们可以看到执行之后setting={validate:true,limit:5,name:"bar"};
empty与setting相等
defaults里面的数值没有任何改变,使之得到来很好的保留
grep()筛选数组
jQuery.grep(array,callback,[invert])
array待过滤数组,callback该函数处理数组中的每个元素,
invert(boolean)如果invert为false或未设置,则函数返回数组中由过滤函数返回true的元素,当invert为true时,
则返回过滤元素中为false的元素,即是否对过滤进行反转。
返回值为object。
如显示index比3大,且数字本身不是5的数字,函数中n代表number,i代表index
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ]; $("#div3").append("<br/>"+arr.join(", "));
arr = jQuery.grep(arr, function(n, i){ return (n != 5 && i > 3); }); $("#div3").append("<br/>"+arr.join(", "));
inArray()判断是否在数组中
jQuery.inArray(value,array) 确定第一个参数在数组中的位置,(如果没有找到,返回-1)
返回值:Number
value用户在数组中查找是否存在,array待处理数组
makeArray()生成数组
jQuery.makeArray(obj) 将类数组对象转化为数组对象,类数组对象有length属性,其成员索引为0至length-1。
实际中次函数在jQuery中将自动使用而无需特意转换。
返回值:Array 参数:obj类数组对象
调用方式如下所示:
function(){ //makeArray:生成数组 var arr = jQuery.makeArray(document.getElementsByTagName("p")); arr.reverse(); // use an Array method on list of dom elements $(arr).appendTo("#div3"); }
map()数组元素映射
jQuery.map(array,callback) 将以个数组中的元素转换到另一个元数组中
返回值:Array
参数:array为待转换数组,callback为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数
调用实例如下:
function(){ //map:数组元素映射 var arr = [ "a", "b", "c", "d", "e" ] $("#div3").append("<br/>" + arr.join(", ")); arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); }); $("#div3").append("<br/>" + arr.join(", ")); arr = jQuery.map(arr, function (a) { return a + a; }); $("#div3").append("<br/>" + arr.join(", ")); }
map()函数的第二个参数(也就是转换函数)可以设置为一个字符串,当设置为字符串时,将视为缩写形式,其中a代表数组元素。
有如下语句:a*a
与下述语句等价:
function(a){ return a*a; }
unique()删除重复元素
jQuery.unique(array)
返回:jQuery
其他功能行函数
isFunciton()、trim()、
5、jQuery的插件机制
jQuery具有很强的可扩展性,不但可以定义插件来对其进行扩展,甚至还可以对jQuery对象本身进行扩展,
jQuery提供了与插件机制相关的两种方式:
jQuery.extend(Object)
jQuery中本身没有提供比较两个数字大小的函数,现在定义两个函数min()和max()对jQuery对象本身进行扩展
jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } });
调用形式和普通的函数一样,因为其已经是jQuery对象的一部分了。
$("#div3").html("min(2, 3): " + $.min(2, 3) + "<br/>max(4, 5):" + $.max(4, 5)); $("#div3").html("min(2, 3): " + jQuery.min(2, 3) + "<br/>max(4, 5):" + jQuery.max(4, 5));
jQuery.fn.extend(Object)
此方法用于扩展jQuery元素集来提供新的方法,目前很多方法都是基于这种机制来实现的。
如改变匹配元素的背景的函数
jQuery.fn.extend({ colorize: function(color) { return this.each( function() { $(this).css("background", color); } ); } });
调用方式,使用普通的jQuery对象即可调用
$(".first").colorize("red");