jQuery核心

发表于 更新于 分类于 阅读次数：

记录jQuery 的核心知识。

jQuery框架结构代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//1.函数自调用，防止内部变量泄露，污染全局中的其他变量，将window作为实参传入，方便代码压缩
    (function(window){
  
//3.定义工厂函数 jQuery
    var jQuery = function(){
      
      //4.这里面封装了构造函数init,将通过new关键字创建jQuery实例对象的方法返回
        return new jQuery.fn.init();
      
      }
      
      //5.jQuery中封装的所有功能方法都会绑定在jQuery 的原型对象上，这样jQuery 的实例对象可以使用这些方法和属性。并且给jQuery的原型对象取了个别名: jQuery.fn。
      
     jQuery.fn = jQuery.prototype = {
        constructor: jQuery   // 为了不破坏原型链，指回了jQuery 工厂函数
        
         //jQuery 的 各种功能方法在此封装
     }
     
     
      //6.定义 构造函数 init
      var init = jQuery.fn.init = function(){
        
        
      }
      
      //7.为了方便以后扩展插件功能，共享原型
      //将构造函数init的prototype 指向 工厂函数jQuery的 prototype
      
      init.prototype = jQuery.fn;
     
     //2.将jQuery工厂函数暴露到全局中，$ 是 jQuery 的别名，方便用户使用
      window.jQuery = window.$ = jQuery;       
  })(window);

jquery框架设计结构图

jquery框架设计结构图

jQuery中的extend方法

jq中的extend的方法来给工厂函数jQuery以及jQuery的原型对象扩展方法（给jq实例扩展方法）。

实现原理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//首先给jQuery的原型和工厂函数jQuery添加extend方法
 jQuery.fn.extend = jQuery.extend = function(obj){     
     for(var k in obj){
       if(obj.hasOwnProperty(k)){   //判断属性k是不是obj 自身的，而不是原型链上的
         this[k] = obj[k];  //谁调用给谁添加属性K
       }
     }
 }

// 注：for...in 遍历会遍历原型链上的属性和方法，消耗性能
 
 jQuery.extend({
   toArray : function(){   //给jQuery工厂函数扩展方法
     alert("hello");
     
   }
   
 });

jQuery插件的扩展原理型

1
2
3
4
5
6
//原理：给 $ 或 jQuery函数的原型对象添加属性和方法。
//例：

$.prototype.accordion = function(){
...
}

jQuery对象

jQuery对象是一个伪数组，通过$(selector)获取到的对象是JQuery对象，这个对象里存储了length个dom对象。

###jQuery对象和dom对象

通过Jquery获取页面元素得到的对象就是jquery对象。而dom对象是通过js获取页面元素得到的对象。

jQuery对象是一个对象，它是一个包装集, 包装了很多 dom 对象的集合。

jQuery对象不能直接调用dom对象的方法，我们可以通过两种方法获取到jQuery对象包装集里的dom对象，来调用dom对象的方法。

方法1：通过下标的方式

1
2
3
var lis = ("li");
$lis[0].style.backgroundColor = "red";

方法2：利用get()方法

1
2
3
var lis = ("li");
$lis.get(0).style.backgroundColor = "red";

dom对象转jq对象方法：

将dom对象丢进$() 中。

dom对象不能直接调用jQuery对象的方法，我们可以将dom对象转换成jQuery对象再使用。

例：

1
2
3
var cloth = document.getElementById("cloth");
$(cloth).text("我是通过jQuery设置的文本内容");

###jQuery对象中的实例成员和静态成员

1.静态成员

绑定在构造函数上的属性和方法，供构造函数自己使用。此时的构造函数作为对象来理解。

2.实例成员

设置在构造函数体中的属性和方法以及构造函数原型上的属性和方法，供构造函数创建的实例对象使用。

例：

1
2
3
4
5
6
7
8
9
10
11
12
function Person(){
  name = "elen";  // 实例成员
  age = 18;    // 实例成员

}

Person.prototype.say = function(){   // 实例成员
  alert("hello");
}

Person.sex = "male";   // 静态成员

###jQuery实例对象的方法

方法 说明
index() 作用：求元素的索引值
语法：index(obj)
参数：obj : dom对象
1. 不传参数：表示返回该元素在兄弟元素中的索引值
2. 传参数：表示返回在dom对象这个集合中对应的索引值
each() 作用：以每一个匹配的元素作为上下文来执行一个函数。即遍历操作dom元素。 意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。
语法：each(function(index, ele){…})
注：实例方法each() 实际上用的就是jq的静态成员方法each()
源码如下：
each : function(callback){ return jQuery.each(this, callback);}
终止循环遍历使用 return false
size() 返回jQuery对象中元素的个数
get() 这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
语法：$(selector).get(index)
参数：index 索引值
返回值：返回jq对象（伪数组）中索引为index的dom对象不传参时返回的由dom对象组成的伪数组

###jQuery对象的属性

属性 说明
length jQuery 对象（伪数组）中元素的个数。

###jQuery对象中的静态成员方法

绑定在工厂函数jQuery上的方法。

方法 说明
each() 作用：遍历对象
语法：$.each(obj, function(index, element){})
参数：obj 要遍历的对象（数组，对象，伪数组）
index 索引值
element 元素的值
返回值：遍历的对象obj
注：1.执行时，回调函数中的this 指向遍历的每一个值（element）
2.如果想中断遍历，在回调函数中return false 即可
3.each返回遍历的对象，即会将obj 又返回

###静态成员方法each()的封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function each(obj, callback){
  // 如果obj 是数组或伪数组

  if("length" in obj){
    for ( var i = 0; i< obj.length ; i++){
      if( callback.call (obj[i], i , obj[i] ) === false ) {
        break;
      }
    }


  }else{    //如果obj是对象
    for(var k in obj){
      if ( callback.call( obj[k], k, obj[k] ) === false){
        break;
      }
    }

  }

}

​

​