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();
});
});