# jQuery工具方法 - 1.$.type() 判斷數據類型 $.isArray() $.isFunction() $.isWindow() ```js console.log($.type(undefined));//undefined console.log($.type('abc'));/ ...
# jQuery工具方法 - 1.$.type() 判斷數據類型 $.isArray() $.isFunction() $.isWindow() ```js console.log($.type(undefined));//undefined console.log($.type('abc'));//string console.log($.type(123));//number console.log($.type(true));//boolean console.log($.type(function(){}));//function console.log($.type(null));//null console.log($.type({}));//object console.log($.type([1,2,3]));//array console.log($.type(new Date()));//date console.log($.type(new Number()));//number console.log($.type(new Person()));//object 自定義對象 ```
- 2.$.trim() 消除前後空格
- 3.$.proxy() 改變this指向，返回一個函數，此函數改變了原來函數的指向 ```js function show(){ console.log(this); }
var obj = { name:"nihao", age:12 };
var showProxy = $.proxy(show, obj);//改變this指向，並返回改變後的函數 show();//window showProxy();//obj對象 ``` ```js var list = { init : function(){ this.ms = 123; this.dom = document.getElementById('demo'); }, bindEvent:function(){ this.dom.onclick = $.proxy(this.show(), this); }, show :function(){ console.log(this.produseMs(this.ms)); }, produseMs :function(){ return ms + 234; } };
list.init(); ```
- 4.$.noConflict()防止衝突 ```js $c = $.noConflict();//防止$變數命名衝突，這樣$c就是替代了原來的$ $c('.demo').width(); ```
- 5.$.each()迴圈 $.map() ```js var arr = [1,2,3]; $.each(arr, function(index, ele){ console.log(ele); });
$.map(arr, function(index, ele){ return ele * index; }) console.log(arr); ```
- 6.parseJSON() 嚴格json字元串轉換成對象 - 原生JSON.parse(); ```js var json = '{"a" : 123,"b" : "str","c" : true}' var a = $.parseJSON(json); ```
- 7.$.makeArray() 類數組轉換成數組 ```js //傳一個類數組，變成數組 var obj = { 0 : 'a', 1 : 'b', 2 : 'c', length : 3 } var arr = $.makeArray(obj); ```
- 8.$.extend()插件擴展（加到工具方法） $.自定義方法 ```js //1.擴展方法 $.extend({ definedRandom : function(start, end){ var len = end - start; return Math.random() * len + start; } });//定義產生隨機數的方法 $.definedRandom(5, 10); //2.淺層克隆 $.extend(obj1, obj2);//把obj2中的內容淺度複製到obj1中 //3.深層克隆 $.extend(true, obj1, obj2);//把obj2中的內容深度複製到obj1中 ```
- 9.$.fn.extend()插件擴展（加到實例方法裡面） $().自定義方法 ```js //1.擴展方法 $.fn.extend({ drag : function(){ var disX, disY, self = this;
$(this).on('mousedown',function(e){ disX = e.pageX - $(this).offset().left; disY = e.pageY - $(this).offset().top; $(document).on('mousmove', function(e){ $(self).css({left:e.pageX - disX, top:e.pageY - disY}); }); $(document).on('mouseup', function(e){ $(docment).off('mousemove').off('mouseup'); }); });
return this; } });//定義元素拖拽的方法 $().definedRandom(5, 10); ```
- 10.$.ajax() 網路 ```js //參數obj //屬性 url:請求地址 //type: 'GET' 或者 'POST' //data: 請求數據信息 //success: 請求成功後的處理函數 //error: 請求失敗後的處理函數 //complete:請求完成的處理函數 最後執行 //context:改變函數上下文 //timeout:請求超時 //async:true false 是否非同步 //dataType: 'jsonp' $.ajax({ url:'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person', type: 'GET', dataType:'jsonp', data:{ username:'qwe', password:'123456' }, success:function(res){ //res:請求成功後的返回數據 console.log(res); consolt.log(this); }, error:function(e){ console.log(e.status, e.statusText);//狀態碼和狀態名稱 }, complete: function(e){
}, context:$('.wrapper')//改變this的指向 }); ```
- 11.回調管理者Callbacks() ```js var cb = $.callbacks('once');//once:回調只執行一次; memory:具有記憶功能，後面add的回調函數，fire執行時，也會被執行; unique:添加相同的回調處理函數會被去重; stopOnFalse:回調函數中返回false，後面的回調處理函數不會在執行 //回調處理函數 function a(x, y){ console.log('a', x, y); } function b(x, y){ console.log('b', x, y); } cb.add(a,b); cb.fire('10', '20'); cb.fire('10', '20'); ``` ```js var cb = $.callbacks('memory');//once:回調只執行一次; memory:具有記憶功能，後面add的回調函數，fire執行時，也會被執行; unique:添加相同的回調處理函數會被去重 //回調處理函數 function a(x, y){ console.log('a', x, y); } function b(x, y){ console.log('b', x, y); } cb.add(a,b); cb.fire('10', '20'); function c(x, y){ console.log('c', x, y); } cb.add(c); ``` ```js var cb = $.callbacks('unique');//once:回調只執行一次; memory:具有記憶功能，後面add的回調函數，fire執行時，也會被執行; unique:添加相同的回調處理函數會被去重 //回調處理函數 function a(x, y){ console.log('a', x, y); } function b(x, y){ console.log('b', x, y); } cb.add(a,b); cb.add(a,b); cb.fire('10', '20'); ``` ```js var cb = $.callbacks('stopOnFalse');//once:回調只執行一次; memory:具有記憶功能，後面add的回調函數，fire執行時，也會被執行; unique:添加相同的回調處理函數會被去重; stopOnFalse:回調函數中返回false，後面的回調處理函數不會在執行 //回調處理函數 function a(x, y){ console.log('a', x, y); } function b(x, y){ console.log('b', x, y); return false; } function c(x, y){ console.log('c', x, y); } cb.add(a,b,c); cb.fire('10', '20'); ``` 以上是markdown格式的筆記
