jQuery

jQuery

[e-mail]

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:[e-mail]

           //@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/

示例：

<html>

<head>

      <title>Untitled</title>

      <script type="text/javascript"src="jquery-1.11.1.min.js"></script>

</head>

 

<body>

 

Hello World!

<divonclick="click1()">

test event

</div>

 

<script>

      function click1(){

           console.debug("click1()");

      };

      $("div")[0].click(function(){

           console.debug("jqueryclick()");

      });

      $(document).ready(function(){

           console.debug("ready.");

      });

 

</script>

</body>

</html>

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");

结果：