## 一、監聽/取消事件 ~~~ $('.box').on('click', selector, callback); $('.box').off('click'); ~~~ ## 二、attr/prop屬性添加/刪除 ~~~ // 自定義屬性 $('.box').attr('data-url', 'www.demo.com'); $('.box').removeAttr('data-url'); // 內置屬性 $('.box').prop('checked', true); $('.box').removeProp('checked'); ~~~ ## 三、判斷數據 ~~~ // 判斷是否是數字，返回true/false $.isNumeric(1); // true // 判斷是否是數組，返回true/false $.isArray([]); // true // 判斷元素是否在數組內，成功返回索引否則返回-1 $.inArray(1, [1,2,3]); // 0 // 判斷是否是空對象，返回true/false $.isEmptyObject({}); // true ~~~ ## 四、ajax相關 ~~~ // ajax參數式 $.ajax({ // 請求method方式 type: 'post', // 請求地址 url: 'demo.php', // 請求參數 data: {name: 'tom'}, // 返回數據類型 dataType: 'json', // 發送前 beforeSend: function() { // 顯示loading }, // 請求成功 success: function(res) { console.log(res); }, // 請求失敗 error: function() { console.log('%c 請求接口失敗~', 'color: red'); }, // 請求完成(不管成功/失敗) complete: function() { // 隱藏loading } }); // ajax鏈式 $.ajax({ type: 'get', url: 'demo.php' }).done(function(res) { console.log(res); }).fail(function() { console.log('請求失敗~'); }); // 取消ajax請求 var ajax1 = $.ajax({ type: 'get', url: 'test.php', success: function(res) { console.log(res); } }); ajax1.abort(); // $.when方法，可用于所有異步請求完成 var ajax1 = $.ajax({ type: 'get', url: 'test.php' }); var ajax2 = $.ajax({ type: 'post', url: 'test2.php' }); var ajax3 = $.get('test3.php'); // then方式 $.when(ajax1, ajax2, ajax3).then(function(res1, res2, res3) { console.log(res1[0]); console.log(res2[0]); console.log(res3[0]); },function() { console.log('%c 某個接口請求失敗~', 'color: red'); }); // 鏈式方式 $.when(ajax1, ajax2, ajax3).done(function(res1, res2, res3) { console.log(res1[0]); console.log(res2[0]); console.log(res3[0]); }).fail(function() { console.log('%c 某個接口請求失敗~', 'color: red'); }); // ajax全局設置 $(document).ajaxSetup({ beforeSend: function() {}, dataFilter: function() {}, success: function() {}, error: function() {}, complete: function() {} }); // $.Deferred方法 function req(url) { var def = $.Deferred(); $.ajax({ type: 'get', url: url, success: function(res) { def.resolve(res); }, error: function() { def.reject('請求失敗~'); } }); return def; } req('demo.php').then(function(res) { console.log(res); return req('demo.php2'); }).then(function(res) { console.log(res); }, function() { console.log('請求失敗~'); }); // 配合$.when var $def = $.Deferred(); setTimeout(function() { $def.resolve({name: 'tom'}); }, 1500); $.when($def).then(function(res) { console.log(res); }); ~~~ ## 五、遍歷數據 ~~~ // 數組 $.each([1,2,3], function(val, index) { console.log(val, index); }); // 對象 $.each({name: 'tom', age: 23}, function(k, v) { console.log(k, v); }); // 數組對象 $.each([{name: 'tom', age: 23}, {name: 'jack', age: 16}], function(val, index) { console.log(JSON.stringify(val), index); }); ~~~ ## 六、設置/獲取元素文本 ~~~ <div class="box"><span>hello</span>world</div> <script> // 設置文本 $('.box').contents().filter(function() { if(this.nodeType === 3) { this.nodeValue = '，世界' } }); // 獲取文本 var text = $('.box').contents().filter(function() { return this.nodeType === 3; }).text(); console.log(text); // ，世界 </script> ~~~ ## 七、$.extend方法 ~~~ // 合并對象 var config = $.extend({}, {name: 'tom', age: 23}, {age: 24, gender: 'm'}); console.log(config); // {name: "tom", age: 24, gender: "m"} // 擴展jQuery對象本身 $.extend({ checkbox: function() { console.log(1); } }); $.checkbox(); // 1 ~~~ ## 八、$.fn.extend擴展jquery元素方法 ~~~ <div class="box"></div> <script> $.fn.extend({ addText: function(text) { this.text(text); // 這個this是jquery element context } }); $('.box').addText('hello'); </script> ~~~ ## 九、獲取指定元素在集合中的索引 ~~~ <div class="list"> <div class="item">a</div> <div class="item2">1</div> <div class="item">b</div> <div class="item2">2</div> <div class="item">c</div> </div> <script> $('.list .item').click(function() { console.log($(this).parent().find('.item').index($(this))); // 獲取指定元素在集合中的索引 }); </script> ~~~ ## 十、事件委托on監聽scroll無效 ~~~ $('body').on('scroll', '.box', function() { }); // 無效 // 需要這樣才行 $('.box').on('scroll', function() { }); ~~~