1.jQuery是如何尋找到DOM或者很多方法
$符號選擇標簽，然后進行事件監聽或者DOM操作
$('.class').on('click',function(){
$('#id').css('color',#000)；
});
可以把$，看成一個方法，$('node')就是調用一個方法把這個目標變成一個jQuery對象，然后這個對象就擁有了很多方法可以被調用
2.$調用時怎么實現的呢？
- JQ沒有用new去新增，而是通過$和jQuery來實現的；
- $()就能找到對應的DOM，那么$應該是一個函數；
- 將選定的標簽XX以字符串的形式傳遞進$()，就會得到一個XX的對象；
-
1. JQ的調用方式似乎就是這樣哈，下面進行重現；
var xQuery = function(selector,content){
return ??? //返回實例
};
xQuery.prototype = {
sayHello:function(){
console.log('hello world');
}
};
window.xQuery = window.$ = xQuery;
$()的時候就可以調用函數，并且還可以使用原型中的方法了，但返回實例是什么呢？
-
2. 那么調用可以使用了，返回新對象如何解決呢？
- 1.this
var xQuery = function(selector,content){ return this; };
- 1.this
this是不行的，因為執行的xQuery賦值給了window.$，this指向了window，返回window自己就沒有什么意義了；
- 2.new一個對象返回？
var xQuery = function(selector,content){ this.selector = new xQuery; return this; };
但是這樣就會讓xQuery陷入無盡的遞歸中
- 3.新建一個對象返回，或者返回prototype？
```
var xQuery = function(selector,content){
var obj = {};
return obj;
};
```
又或者
var xQuery = function(selector,content){ return xQuery.prototype; };
但是這樣，通過這個你選擇的對象標簽就沒有作用了無論是誰返回的都是一樣的，而我們需要的是傳入誰，就返回以誰為基礎的JQ對象；
- 4.返回構造函數的實例
思路整理一下，我們需要的是傳進來一個，然后在其送回去之后；他就擁有了xQuery這個的所有方法，我第一反應就是繼承，但是隨意選進來的DOM怎么會繼承xQuery呢？人家又不是xQuery new出來的，不在原型鏈上，根本不能繼承這些放在原型鏈上的方法；
var xQuery = function (selector, context) {
function CreateObject(selector,context) {
this.selector = selector;
}；
CreateObject.prototype = xQuery.prototype;
//CreateObject.prototype = Object.create(xQuery.prototype);
return new CreateObject (selector, context) ;
};
xQuery.prototype = {
say:function(){
console.log(this.selector);
}
};
window.xQuery = window.$ = xQuery;
我們已經知道xQuery的原型上有很多方法，如何讓隨便拉進來的一個DOM去繼承就很重要了；所以就有了上述的方法；
- 5.jQuery是怎么做的呢？
var xQuery = function(selector, context) {
xQuery.prototype.init.prototype = xQuery.prototype;
return new xQuery.prototype.init(selector, context)
};
xQuery.prototype = {
init: function(selector, context) {
this.selector = selector;
return this;
},
say:function(){
console.log(this.selector);
}
};
window.xQuery = window.$ = xQuery;
將new和Object.create()的那個階段放到了init里面
3.鏈式調用
JQ中，可以進行鏈式調用，這種方式讓思路很連貫，這是因為JQ操作之后，返回的仍舊是這個JQ對象，所以并不是所有的JQ操作都可以鏈式，要集中在同一個對象上才可以；
$('foo').addClass('active').removeClass('active').say();
所以這個返回自身很重要
var xQuery = function(selector, context) {
xQuery.prototype.init.prototype = xQuery.prototype;
return new xQuery.prototype.init(selector, context)
};
xQuery.prototype = {
init: function(selector, context) {
this.selector = selector;
return this;
},
say:function(){
console.log(this.selector);
return this;
},
addClass:function(tag){
console.log(tag)
return this;
},
removeClass:function(tag){
console.log(tag)
return this;
}
};
window.xQuery = window.$ = xQuery;
4.插件接口
JQ也給了開發者一些拓展的接口，開發者可以通過jQuery.fn.extend()，來向jQuery中添加自己的新方法；
- 1：jQuery.extend()和jQuery.fn.extend兩種方式，都不破壞JQ的結構，都可以拓展屬性和方法，既然有兩個，絕對是有區別的；
jQuery.extend = jQuery.fn.extedng = function(){
// TO DO
}
這么做是為什么呢？因為通過jQuery.extend()，可以實現對jQuery本身屬性和方法的拓展，jQuery.fn.extend()是對jQuery原型的屬性和方法的拓展，放的地方不一樣而已;
其次，還有
jQuery.extend = jQuery.fn.extend = function() {}
都連等了，就是說兩者都指向同一個函數，但是又能實現不同的功能，分別添加和拓展；那么這里就是因為有this
+ jQuery.extend 調用的時候，extend中的this指向了jQuery對象
+ jQuery.fn.extend調用的時候，這個this又指向了jQuery.fn，jQuery.fn和jQuery.prototype又指向同一個對象，所以擴展fn就是擴展jQuery.prototype原型對象；
- 2.舉個栗子
jQuery.newFunc = function(){
console.log('new new new');
};
$.newFunc();
//這種就是直接在jQuery上動態的添加屬性，屬性的值時一個函數，達到一些目的；
當然還有這種
jQuery.prototype.newFunc = function(){
console.log('new new new');
return this;
};
$('node').newFunc();
最近在做一個音樂小DEMO，需要讓所選的界面能夠拖動，但是原來只是單純的寫一個JS模塊，引入進頁面，再選DOM進行初始化，讓選擇的DOM能夠動，但是這種總是感覺很慢，感覺DOM的移動速度跟不上鼠標的速度，有時候文字還能被選中，正好做拿這個來做一下；
DEMO里面的拖拽重新用插件形式寫了一下
