## 一、监听/取消事件 ~~~ $('.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() { }); ~~~