jQuery知识篇二

1.jQuery对象是一个类数组对象，含有连续的整型属性，length属性和大量的jQuery方法。

  jQuery对象由构造函数jQuery()创建，$()是jQuery()的别名

 

  构造jQuery对象的7种方式：

  1.1 jQuery( selector [, context] )：

  如果传入一个字符串参数，jQuery 会检查这个字符串是选择器表达式还是 HTML 代码。如果是选择器表达式，则遍历文档，查找与之匹配的 DOM 元素，并创建一个包含了这些 DOM 元素引用的 jQuery 对象；如果没有元素与之匹配，则创建一个空 jQuery 对象，其中不包含任何元素，其属性 length 等于 0。默认情况下，对匹配元素的查找将从根元素 document 对象开始，即查找范围是整个文

档树，不过也可以传入第二个参数 context 来限定查找范围，如下：

  $('div.foo').click(function() {

      $('span', this).addClass('bar'); // 限定查找范围

  });
  又或
  $("a","div #ajia").css(....)  //在id为ajia的div中寻找a标签

 

  1.2 jQuery( html [, ownerDocument] ) 或者 jQuery( html, props )

  如果传入的字符串参数看起来像一段 HTML 代码（例如，字符串中含有 ），jQuery 则尝试用这段 HTML 代码创建新的 DOM 元素，并创建一个包含了这些 DOM 元素引用的 jQuery 对象。如果 HTML 代码是一个单独标签，那么第二个参数还可以是 props，props 是一个包含了属性、事件的普通对象。例如，在下面的例子中，创建一个 div 元素，并设置类样式为“ test”、设置文本内容为“ Click me!”、绑定一个 click 事件，然后插入 body 节点的末尾，当点击该div 元素时，还会切换类样式 test：

   $("", {

     "class": "test",  //class是js的保留字，需要用引号

     text: "Click me!",

     click: function(){

        $(this).toggleClass("test");

     }

   }).appendTo("body");

 

   1.3　jQuery( element )、jQuery( elementArray )

   如果传入一个 DOM 元素或 DOM元素数组，则把 DOM 元素封装到 jQuery 对象中并返回。这个功能常见于事件监听函数，即把关键字 this 引用的 DOM 元素封装为 jQuery 对象，然后在该 jQuery 对象上调用 jQuery 方法。

   例如，在下面的例子中，先调用 $(this) 把被点击的 div 元素封装为 jQuery 对象，然后调用方法 slideUp() 以滑动动画隐藏该 div 元素：

   $('div.foo').click(function() {

      $(this).slideUp();

   });

 

   1.4　jQuery( object )

   如果传入一个普通 JavaScript 对象，则把该对象封装到 jQuery 对象中并返回。这个功能可以方便地在普通 JavaScript 对象上实现自定义事件的绑定和触发

   例如，执行下面的代码会在对象 foo 上绑定一个自定义事件 custom，然后手动触发这个事件，执行绑

定的 custom 事件监听函数，如下所示：

   // 定义一个普通 JavaScript 对象

   var foo = {foo:'bar', hello:'world'};

   // 封装成 jQuery 对象

   var $foo = $(foo);

   // 绑定一个事件

   $foo.on('custom', function (){    //使用.bind 或者 .live都可以，添加的事件名称是可自定义的

      console.log('custom event was called');

   });

   // 触发这个事件

   $foo.trigger('custom');    // 在控制台打印 "custom event was called"

 

 

jQuery代码优化：

1. 尽量避免重布局和重绘的情况

2.对于dom元素的操作，尽量一次性操作

 

3.使用$.detach()函数将元素从dom文档中剥离出来，再进行操作 

  $("#ajia").detach().appendTo($("#theMe"));   //原有的元素操作 用detach处理

  var me = $("--ajia").detach().appendTo($("#ajia"));  //新创建的元素   也使用detach来处理 

 

4.对jQuery包装集的循环，如果集的元素不多，直接使用$.each（），如果多的，可使用js中数组循环函数:forEach(function(obj,ind){....})   //其中obj是dom元素，ind是下标

   var pArr = $.makeArray($("p"))  //所以先通过$.makeArray来将jQuery对象集转 换成 js数组      

   pArr.forEach(function(obj,ind){

    console.log( $(obj).html() );

   })

5.给选择器添加上下文

  $("a","#ajia") 的速度快于 $("#ajia a"),前者的意思就是在#ajia的范围内寻找a标签

 

 

jQuery的module模式

模块方式包括3个组件：1.命名空间 2.立即执行的函数 3.函数的返回对象

var 命名空间 = ( function($){....} )(jQuery);

 

插件使用规则

1.在jQuery名称空间中只为插件声明单个名称，也就是单一访问入口

2.为插件中的事件也定义命名空间，可以避免错误解除插件外的同一元素的绑定事件，例如click.ajia或ajia.click

3.插件中使用单个$.data来存取数据，如果是多项数据，使用对象字面量来包含后，再存入单个$.data

4.接受一个options参数以控制插件的行为，该参数会通过$.extend来合并插件默认参数，由于options参数是在插件实例化是传入，所以options参数只会作用于具体的插件实例，如果需要在插件外修改插件默认的参数，就需要使用5的做法

(function($){

     $.fn.cjDemo = function(options){

          var default_options = {color:'red','font-size':12};

          var settings = $.extend(default_options ,options); //合并

          return this.each(function(){......});

     }

})(jQuery);

5.为插件的默认参数设置提供公开的访问,通过在插件内使用$.fn的方式来原型话默认参数，

(function($){

     $.fn.cjDemo = function(options){

          $.fn.cjDemo.default_options = {color:'red','font-size':12};

          var settings = $.extend({},$.fn.cjDemo.default_options,options); //注意写法

          return this.each(function(){......});

     }

})(jQuery);

插件外访问修改默认参数的方式：$.fn.cjDemo.default_options.color = "blue";

 

jQuery的延迟对象$.Deferred 能够将 回调行数 单独出来处理，大大减低了代码耦合性，该对象是根据其的promise对象的状态resolve 或 reject 来判断成功或失败，从而调用done 或者 fail对应的回调函数来处理，如下代码：

$.when( demo() )  //$.when 捕捉 demo()返回的promise对象的状态，而决定执行下面哪函数

 .done(success)   //成功

 .fail(failed);   //失败

//可以使用.then(success,failed)来代替

 

function demo(){

   return $.Deferred(

      function(){

         $("#ajia").show(1000,this.resolve);  //在回调函数处返回promise的resolve（成功）状态，reject则是失败

      }

   ).promise();  //返回promise对象

}

 

$.ajax本身就是一个Deferred 对象，它的success、error、complete对应着Deferred.done、Deferred.fail、Deferred.always

function demo(){

/*return $.ajax({

'type':'post',

'dataType':'json',

                        'url':'a.php'

 

});*/

 

//return $.getJSON('aj.php');

 

        //return $("#haha").load('ag.php');//该ajax形式，无论是否load成功失败，都是resolve

 

 

}

     $.when( demo() )

.then(success,failed)

.always(function(){alert('always');});//无论成功失败都执行