jQuery

jQuery

sf2gis@163.com

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 扩展库函数