jQuery
jQuery
2015年6月12日
2015年7月29日添加数组处理
2015年8月5日添加插件
2015年9月1日添加动态加载
2015年10月14日添加效果
1 目标：提供JavaScript的封装，提供更为完善的简洁的SDK。
2 方法：jQuery封装JavaScript。
jQuery封装JavaScript，并提供了动画，特效，ajax等的简洁SDK。
jQuery是所有子类、方法的父类，以$作为简化名称（如果有冲突，使用onConflict()禁用）。
2.1 jQuery对象
目标：由jQuery类生成的对象，调用jQuery的特性。
方法：使用不同的jQuery输入参数，构造的不同的结构jQuery对象。
选择器返回的是一个DOM数组。
参考：jQuery源码，http://ccvita.com/192.html
http://blog.csdn.net/itmyhome1990/article/details/20998191
2.2 事件：只有jQuery对象才能绑定事件（dom无效）。
2.2.1事件对象：event,作为唯一参数传入。
参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
2.2.1.1 事件对象的属性：标准属性如下，如果有额外数据使用data属性。
参考：http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html
http://www.w3school.com.cn/jquery/jquery_ref_events.asp
2.2.2事件绑定：bind()。部分常用事件可以直接绑定eventName(fn)。
参考：http://www.php100.com/manual/jquery/
示例：
$("#point").click(function(evt){
console.debug("point click");
});
$("div").click(function(e){
console.debug("jquery click()"+e.data);
});
$("div").bind("click",function(e){
console.debug("jquery bind()"+e.pageX+","+e.pageY);
});
2.2.3解绑：unbind()。
2.2.4事件触发（trigger(eventName)）。
2.2.5交替事件toggle()。
2.2.6鼠标感应hover(over,out)。
2.3 插件
表单插件：方便的处理表单。
UI插件：实现拖曳效果和Tab菜单。
2.4 XML：$(xml)与html处理方式相同。
2.5 Ajax操作
目标：作为Ajax框架，简化操作，封装固定内容。
方法：load(url,【data】,【callback】)。
如果存在data则使用post，否则使用get。
2.5.1$.get(url,data,callback)。
2.5.2$.post(url,data,callback,type)。
2.5.3深度定制ajax:$.ajax(options)。options使用json格式。
2.5.4全局设定：$.ajaxSetup()。
2.5.5事件：beforesend,success,complete,error。全局事件ajaxStart，ajaxStop，ajaxSend，ajaxSuccess，ajaxComplete，ajaxError。
2.5.6JSON：getJSON（）直接处理服务器返回的json字符串。
3 方法：操作JavaScript
3.1 库函数： $(document).ready()：代替window.onload()。trim()。
$(document).ready()在DOM结构加载完成就会执行，而window.onload()则需要所有元素（图片之类）加载完成才会执行。$(document).ready()可以编写多个，window.onload()只能执行一个。
参考：http://www.jb51.net/article/21628.htm
示例：dom加载完成事件
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideToggle();
});
});
3.2 扩展库函数：$.fn.新函数=…。
3.3 动画
显示、隐藏：show(【延时【，callback】】),hide(【延时【，callback】】)。toggle()默认在show()/hide()之间切换。如果设置了延时，则为渐变效果。fadeIn(),fadeout()与show/hide完全相同。
自定义变换：fadeTo(延时，透明度，callback)。
PPT翻页：slideUp(),slideDown()，slideToggle()。
自定义动画：animation(params【,延时【，casing】【，callback】】】)。
3.4 加载外部代码：$.getScript(src【,callback】)。
3.5 遍历：$(数组).each(function(index,item){})。
参考：http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp
3.5.1跳出each：return。
continue=return;break=return false。
参考：http://hyj1254.iteye.com/blog/497079
3.6 JSON
将字符串转换为JSON：$.parseJSON(“字符串”)。
3.7 数组处理：包括遍历each，过滤grep，映射map，判断inArray，合并merge，唯一化unique，转换makeArray。
3.7.1遍历$.each(数组，处理函数（序号，值）｛｝);
$.each(data,function(key,val){
chart1.addSeries(val);
});
3.7.2合并$.merge(数组1，数组2)
//create datagrid
//
//@author:[email protected]
//@date:2015-10-14 16:02
function createDataGrid(tid, url, type) {
var col1=[ {
title : '序号',
field : 'xh',
width : 100
}, {
field : 'zz',
title : '组织',
width : 100
}, {
field : 'cph',
title : '车牌号',
width : 100
}, {
field : 'vinh',
title : 'VIN号',
width : 100
} , {
field : 'cllx',
title : '车辆类型',
width : 100
}];
if (type != 0) {
col1.push({
field : 'rq',
title : '日期',
width : 100
})
}
var col2= [{
field : 'yjffyygj',
title : '夜间非法运营告警',
width : 100
}, {
field : 'ffdhgj',
title : '非法点火告警',
width : 100
}, {
field : 'jcqygj',
title : '进出区域告警',
width : 100
}, {
field : 'jclxgj',
title : '进出线路告警',
width : 100
}, {
field : 'phgj',
title : '偏航告警',
width : 100
}, {
field : 'qynkmgj',
title : '区域内开门告警',
width : 100
}, {
field : 'cygj',
title : '超员告警',
width : 100
}, {
field : 'fftkgj',
title : '非法停靠告警',
width : 100
}, {
field : 'ldxssjgcgj',
title : '路段行驶时间过长告警',
width : 100
}, {
field : 'hj',
title : '合计',
width : 100
}, {
field : 'pm',
title : '排名',
width : 100
}];
varcolumns = [$.merge(col1,col2)];
var cols = {
fitColumns : true,
singleSelect : true,
url : url,
columns : columns
};
$(tid).datagrid(cols);
}
参考：http://mrthink.net/jquery-array-eachgrepinarray/
http://blog.csdn.net/cqkxzyi/article/details/7415084
3.8 动态加载JavaScript文件：getScript
格式：getScript(src,callbackFunction(data,status,response){});
示例：动态加载百度地图js
$.getScript("http://webapi.amap.com/maps?v=1.3&key=416a43c96936f23269f63b3148a84ab9",function(data, status, jqxhr) {
mapInit();
});
参考：http://www.jb51.net/article/48697.htm
4 方法：操作DOM：$
4.1 选择器：直接使用CSS3规则提取元素。$(#id),$(.class)，$(element)。
注意，返回的是jQuery对象，需要用【】来取得dom。
参考：
http://blog.allenm.me/2009/07/jquery%E4%B8%ADid%E5%92%8Cdocumentgetelementbyidid%E7%9A%84%E5%8C%BA%E5%88%AB/
http://www.php100.com/manual/jquery/
示例：
Hello World!
test event
4.2 创建元素：$可以直接创建元素。
4.3 集合操作：添加、删除等
添加add()，删除not(),过滤filter()，查询find()。遍历each(callback)。过滤grep(数组，过滤函数，反转)。映射$.map(数组，转换函数)。数组查找$.inArray(value,array)。
4.4 属性读写：atrr(属性名【，新的属性值】)，多个设置attr(json数组)。removeAttr(属性名)。
4.5 读写内容：html(【新值】),text(【新值】)。
4.6 元素操作：添加、删除等。
append()，appendTo()，prepend(),prependTo()，before()，insertBefore()，after()，insertAfter()，remove()，clone()。
4.7 表单值：val(【新值】)。
4.8 jQuery效果：显、隐，动画等
参考：http://www.w3school.com.cn/jquery/jquery_animate.asp
4.8.1显示、隐匿：show()/hide()，toggle（）。
if($('#pie').is(':visible')){
$('#pie').hide();
}else{
$('#pie').show();
}
$('#pie').toggle();
4.8.2淡入、淡出:fadeIn(),fadeOut(),fadeToggle(),fadeTo()。
4.8.3滑动：slideDown(),slideUp(),slideToggle。
4.8.4动画：animate（）,stop()。
5 方法：操作CSS
CSS读写：css(样式【，值】)。
类名：addClass(),removeClass()，toggleClass()。
盒子模型：$.boxModel。
6 方法：操作BOM
浏览器信息：$.browser。
7 方法：插件，扩展jQuery
目标：扩展jQuery，向jQuery中添加自定义的属性、方法、事件响应等，开放接口。
原理：利用javascript的原型链机制（参见：javascript语法.docx）向jQuery中添加属性、方法、事件响应等。所谓的插件，就是jQuery中外置的功能。
方法：
参考：http://www.poluoluo.com/jzxy/201406/277886.html
7.1 增加jQuery全局变量：扩展$类的属性或是使用extend扩展类的已有的JSON属性。
7.1.1 直接扩展$类的属性
示例：
jQuery.showDebug=function(){
console.debug("ok,this is a staticplugin");
};
$.showDebug();
7.1.2extend扩展方法：扩展jQuery类的JSON属性
目标：扩展jQuery类，将指定内容合并到jQuery目标对象的JSON中。
方法：
extend(【Boolean,】【dest,】src【,src】)。
Boolean:是否使用深复制，默认为false，JSON属性直接使用后续覆盖；如果为true，则所有JSON对象执行extend方法。
目标对象：dest,如果省略，则src只能有一个，调用者为dest。
需要合并对象：src,可以有多个。
参考：http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html
示例：
varc=$.extend({},{a:"1",d:{d1:1,d2:2}},{b:"2",d:{d1:1,d3:3}});
console.debug("default");
console.debug(c);
varc=$.extend(true,{},{a:"1",d:{d1:1,d2:2}},{b:"2",d:{d1:1,d3:3}});
console.debug("true");
console.debug(c);
console.debug("false");
varc=$.extend(false,{},{a:"1",d:{d1:1,d2:2}},{b:"2",d:{d1:1,d3:3}});
console.debug(c);
7.2 扩展jQuery实例化对象：$.fn.extend
目标：模拟类的组织方法，生成具有私有数据、方法，公有数据方法的封装插件。
原理：扩展prototype实现实例化封装，使用apply和函数对象JSON实现参数化实例。
方法：
由于jQuery的是jQuery的prototype属性。$.fn=jQuery.prototype。所以扩展$.fn或是prototype可以为实例化对象增加变量或方法。
参考：http://www.iteye.com/topic/545971
示例：
$.fn.extend({showTime:function(){
console.debug(new Date());
}});
$("test").showTime();
$.prototype.showDate=function(){console.debug(newDate());};
$("test").showDate();
结果：
7.3 增加命名空间：增加JSON属性。
目标：将相关的属性或方法置于同一作用域内。
方法：所谓的命名空间就是JSON对象。
一般将默认的参数都放在defaults命名空间下，调用时提供默认值。
可以增加元数据$.meta来添加内部变量供使用。
参考：http://www.iteye.com/topic/349727
http://www.iteye.com/topic/545971
7.4 示例：创建一个插件并调用。
//create a jquery plugin
(function($){
methods={
init:function(){
console.debug("this is init.");
return this;
},
sum:function(){
console.debug("thisis sum.");
return this;
},
sub:function(){
console.debug("this is sub.");
return this;
}
};
$.fn.myPluginXX=function(opts){
//public data
this.a=1;
this.b=2;
//private data
var a=11;
var b=12;
var c=13;
//public functions
this.sum2=function(){
sum3();
console.debug("this is sum2.");
return this.a+this.b;
};
if(methods[opts]){
returnmethods[opts].apply(this, Array.prototype.slice.call(arguments, 1));//use applythis to send caller to this.use Array.prototype to avoid null arguments
}
elseif(typeof opts==='object'||!opts){
returnmethods.init.apply(this,arguments);
}
else{
return$.error("method does not exist");
}
//private functions
function sum3(){
console.debug("this is sum3.");
return a+b+c;
};
return this;
};
})(jQuery);//noname function to run the enclosure
var myXX=$('#test').myPluginXX();
console.debug(myXX);
console.debug(myXX.sum2());
var mySum=$('#test').myPluginXX("sum");
结果：