[jQuery] 12.jQuery 的实现原理和核心？

[qiilee]

答案：

1、jQuery 的实现原理

var jQuery = function(selector, context) {
  return new jQuery.fn.init(selector, context);
};

1)jQuery 采用的是构造函数模式进行开发的,jQuery 是一个类

2)上面说的常用的方法(CSS、属性、筛选、事件、动画、文档处理)都是定义在 jQuery.prototype 上的 ->只有 jQuery 的实例才能使用这些方法

2、选择器/筛选

1)我们的选择器其实就是创造 jQuery 类的一个实例 ->获取页面中元素用的 jQuery(); -> $()

$()就是 jQuery 的选择器,就是创建 jQuery 这个类的一个实例

2)执行的时候需要传递两个参数

selector -> 选择器的类型 一般都是string类型
context -> 获取的上下文  第二个参数一般不传，不传默认为document
$("#div1")
$(".box")
$("#div1 span") -> $("span", div1)
console.log($("#div1 span:first"))

3)通过选择器获取的是一个 jQuery 类的实例->jQuery 对象

console. log($( #div1"))

[jQuery对象的私有的属性]

$("#div1")[0] -> div1这个元素对象
S(#div1").selector -> "#div1"
S(#div1").context -> document
("#div1").length-)1 获取元素的个数

[jQuery对象的公有的属性]
jQuery.prototype

4)我们获取的是 jQuery 对象(他是 jQuery 的实例)不是我们的原生 js 对象

jQuery:$("#div1")
JS:document.getElementById("div1") 原生JS的对象不能直接的使用jQuery的方法,同理,jQuery的对象也不能使用原生js的方法
$("#div1").className = "box"; no
document.getElementById("div1").addClass();

5)互相转化

var $oDiv =$("#div1")
var oDiv = document.getElementById("div1")
Js->jQuery: $(oDiv).addClass()
jQuery->Js: $oDiv[o]/ $oDiv.get(0)

3、核心

$(document).ready(function() {
  //HTML结构加载完成就执行这里的代码
});
$(function() {});

each

$("selector").each( function(){})遍历获取的这些元素 jQuery.prototype
$.each(ary)遍历数组中的每一项 jQuery.each

我们的 jQuery 不仅仅是一个类(在它的原型上定义了很多的方法,每一个 jQuery 的实例都可以使用这些方法),它还是一个普通的对象,在 jQuery 本身的属性中还增加了一系列的方法:Ajax、each、工具

$.unique(ary)

$.ajax()

$.extend()->把 jQuery当做一个对象,给它扩展属性->完善类库

$.fn.extend()->在 jQuery的原型上扩展属性和方法->编写 jQuery插件

$.extend({
    a: function(){

    }
})
$.a()

$.fn.extend({
    b: function(){

    }
})
$().b()