欢迎莅临阿Q的项目

专业WP商业设计开发销售中心

jQuery 自学手册

花了两天时间系统性的学习jQuery,获益匪浅。之前摸着石头写的一些jQuery程序也得到了相应的改良,以下便是我这两天的学习心得...

工具 Utilities:

jQuery.boxModel; //判断浏览器是否使用了符合w3c的标准盒模型

jQuery.each(jQuery.browser, function(i, val) {
 $("<div>" + i + " : <span>" + val + "</span>").appendTo(document.body);
}); //判断浏览器的类型

$("#start").click(function () {
 $("div").show("slow");
 $("div").animate({left:'+=200'},5000);
 $("div").queue(function () {
 $(this).addClass("newcolor");
 $(this).dequeue();
 });
 $("div").animate({left:'-=200'},1500);
 $("div").queue(function () {
 $(this).removeClass("newcolor");
 $(this).dequeue();
 });
 $("div").slideUp();
});
$("#stop").click(function () {
 $("div").clearQueue(); //清除动画队列
 $("div").stop();
});

jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false
//判断前者是否包含后者

var div = $("div")[0];
jQuery.data(div, "test", { first: 16, last: "pizza!" });
$("span:first").text(jQuery.data(div, "test").first);
$("span:last").text(jQuery.data(div, "test").last);
//保存数据到标签中

$("button").click(function () {
 $("div").animate({left:'+=200px'}, 2000);
 $("div").animate({top:'0px'}, 600);
 $("div").queue(function () {
 $(this).toggleClass("red");
 $(this).dequeue(); //执行下一个函数队列
 });
 $("div").animate({left:'10px', top:'30px'}, 700);
});

$("button").click(function () {
 $("div").animate({left:'+=200px'}, 2000);
 $("div").animate({top:'0px'}, 600);
 $("div").queue(function () {
 $(this).toggleClass("red");
 $.dequeue( this ); //执行下一个函数队列
 });
 $("div").animate({left:'10px', top:'30px'}, 700);
});

$.each([52, 97], function(index, value) {
 alert(index + ': ' + value);
}); //通用例遍方法,可用于例遍对象和数组。
var map = {
 'flammable': 'inflammable',
 'duh': 'no duh'
};
$.each(map, function(key, value) {
 alert(key + ': ' + value);
}); //通用例遍方法,可用于例遍对象和数组。

//合并 settings 和 options,修改并返回 settings。
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
//合并 defaults 和 options, 不修改 defaults。
var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);

jQuery.globalEval("var newVar = true;"); //以全局方式执行javascript

$.grep( [0,1,2], function(n,i){
 return n > 0;
}); //过滤小于或等于0的数组项目

var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr); //判断'John'是否在arr数组里并返回索引值, 如果不存在则返回-1

$.isArray([]); //判断参数是否为数组,return true/false.

jQuery.isEmptyObject({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false
//判断是否为空的对象

jQuery.isFunction(objs[i]); //判断是否为函数

jQuery.isPlainObject({}) // true
jQuery.isPlainObject("test") // false
//判断是否为简单对象

jQuery.isXMLDoc(document) // false
jQuery.isXMLDoc(document.body) // false
//判断是否为xml文档

var elems = document.getElementsByTagName("div"); // returns a nodeList
var arr = jQuery.makeArray(elems); //将类数组对象转换为数组对象

var newArr = $.map( [0,1,2], function(n){ return n + 4; }); //将源数组中的所有键值+4后赋值给新数组

var first = ['a','b','c'];
var second = ['d','e','f'];
$.merge($.merge([], first), second); //合并两个数组, 不赋值给第一个数组
$.merge(first, second); //合并两个数组, 并将结果赋值给第一个数组

jQuery.noop(); //一个空函数

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" ); //从语法上分析一个JSON字符串

var obj = {
 name: "John",
 test: function() {
 alert( this.name );
 $("#test").unbind("click", obj.test);
 }
};
$("#test").click( jQuery.proxy( obj, "test" ) ); //代理对象函数

obj.queue(); //函数队列?
jQuery.queue(); //函数队列?

jQuery.removeData(div, "test1"); //移除标签上的数据

jQuery.support.boxModel; //是否支持w3c盒模型

$.trim("  hello, how are you?  "); //删除字符串首尾的空格

var divs = $("div").get(); // 将对象转换为对象数组
divs = divs.concat($(".dup").get()); //合并3个对象数组到divs
$("div:eq(1)").text("Pre-unique there are " + divs.length + " elements."); //有9个元素
divs = jQuery.unique(divs); //其中有3个是重复的,需要用unique函数去掉他们
$("div:eq(2)").text("Post-unique there are " + divs.length + " elements.").css("color", "red"); //就只有6个了
如果喜欢本文,请分享给朋友们