jQuery · 編程開發筆記

[TOC] ## :-: <a href="http://jquery.cuishifeng.cn/index.html">jQuery API 3.3.1 速查表</a> :-: WRITE LESS,DO MORE 人狠,話不多 ***** ## :-: <a href="https://www.bootcdn.cn/jquery">調用jquery插件</a> ``` <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> ``` ## :-: <a href="http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp">jQuery 選擇器</a> ``` // .get() // 選出原生dom元素 0 = 第一位、 -1 = 最后一位、 var dom = $('#demo ul>li').get(0); var dom = $('#demo ul>li').get(-1); // .eq() // 選出包裹著jQuery方法的dom元素 0 = 第一位、 -1 = 最后一位、 var dom = $('#demo ul>li').eq(0); var dom = $('#demo ul>li').eq(-1); // .find() // 可以鏈式操作，選出子元素、 $('.wrapper').css({position: 'relative'}) .find('ul').css({listStyle: 'neno'}) .find('li').css({backgroundColor: '#ccc'}) // .prevObject對象 // prevObject對象是上一個(父級)被選擇的dom對象(ul)，$('.wrapper').find('ul') $('.wrapper').find('ul').find('li').prevObject // .end() // 回退到子元素(ul)的父級，此時返回的對象為.warapper $('.warapper').add('ul').end() // .filter(str) // 基于li篩選出帶class="demo"屬性的li.demo元素、 $('.wrapper').find('ul').find('li').filter('.demo') // .filter(fun) // 逐個遍歷元素、 $('.wrapper ul>li').filter(function(index, ele) { // 這里輸出的ele是原生的dom對象、 console.log(index, ele); // 返回true留下、false排除、返回后domArr會包裹jQuery對象、 return index == 0; // 第一個 }) // .not(fun) // 作用一樣，但與filter()相反 $('.wrapper ul>li').not(function(index, ele) { // 這里輸出的ele是原生的dom對象、 console.log(index, ele); // 返回false留下、true排除、返回后domArr會包裹jQuery對象、 return index == 0; // 選出非第一個、 }) // .is() // 判斷交集(相差、差值)是否存在指定的dom元素，返回布爾值、 // Demo點擊ul下的li時彈出對應的HTML文本，當點擊到非li時彈出ul所有的HTML文本、 $('.wrapper ul').click(function(e) { // 事件委托、e.target —— 事件原對象(li)、 if ($(e.target).is('li')) { alert($(e.target).text()); } else { alert($(this).text()); } }); // .add() // 元素疊加相當于css選擇 .warapper,ul $('.warapper').add('ul').css({color: 'red'}) ``` ## :-: <a href="http://www.w3school.com.cn/jquery/jquery_dom_set.asp">jQuery 獲取與設置</a> ``` // .css() // 取/加(累加) CSS樣式、 var width = $('.warapper ul>li').css('border', '1px solid red') .css({ width: 100, height: '30px', 'line-height': '30px' }) .css('width', '+=100') .css('width'); console.log(width); // 200px // .attr() // 獲取/設置(自定義) 標簽屬性、 var id = $('.warapper').attr('id', 'demo').attr('id'); console.log(id); // demo // .prop() // 讀取/設置標簽中的特性、等同于 DOM元素對象[屬性值] = 'text' // 注意：如果被膩值的是自定義的屬性值(非映射關于)。將不在標簽中顯現、 var is = $('input').prop('chacked'); console.log(is) // true/false // .val() // 獲取/設置表單相關元素的value值、 var val = $('textarea').val('Text').val(); console.log(val); // Text // 方法二：依次遍歷 var val = $('textarea').val(function(index, oValue) { // 返回str就會改變當前選擇的value值、 return index + ' - ' + oValue; }); // .html() // 設置/返回html標簽、 // 特點，多個標簽只能讀取第一個、賦值可以同時多個、 $('ol').html('<li>demo</li>'); var html = $('ol>li').html(); console.log(html); $('ol>li').html(function(index, ele) { console.log(index, ele); return index + '-' + ele; }); // .text() // 設置/返回text文本、 // 特點，只返回標簽中的文本、選中多個則拼接起來、 $('ol>li').text('demo'); var text = $('ol>li').text(); console.log(text); $('ol>li').text(function(index, ele) { console.log(index, ele); return index + '-' + ele; }); // .addClass() // 給元素對象添加1/n個Class屬性值、 $('div.demo').eq(0).addClass('a1 a2 a3'); $('div.demo').addClass(function(index, ele) { console.log(index, ele); return 'test-' + index; // 不覆蓋、會疊加 }); // .removeClass() // 清除1/n個Class屬性值、 $('div.demo').eq(0).removeClass('a1 a3'); // 填寫要清除的Class值、 $('div.demo').eq(0).removeClass(); // 如果不填會清除全部、 $('div.demo').removeClass(function(index, ele) { console.log(index, ele); return ele; // 清除被返回的Class屬性值、 }); // .hasClass() // 判斷被選中的元素對象中，是否含有特定的Class值、返回：true/false $('div.demo').hasClass('kk'); ``` ``` // .next() $('button').click(function() { // .next() 選擇this同級下一個元素節點、(可以加限制條件) $(this).next('p').css({'color': 'red'}) }); // .prev() $('button').click(function() { // .prev() 選擇this同級上一個元素節點、(可以加限制條件) $(this).prev('p').css({'color': 'red'}) }); // .nextAll() $('button').click(function() { // .nextAll() 選擇在this以下所有同級元素節點、(可以加限制條件) $(this).nextAll('p.red').css({'color': 'red'}); }); // prevAll() $('button').click(function() { // .prevAll() 選擇在this以上所有同級元素節點、(可以加限制條件) $(this).prevAll('p.red').css({'color': 'red'}); }); // .nextUntil() $('#test>li').click(function() { // 選擇在this以下到指定(.end)截止的同級元素節點、可選參數：附加一個篩選條件(.li-test) $(this).nextUntil('.end', '.li-test').css({'font-size': '25px','color': 'red'}); }); // prevUntil() $('#test>li').click(function() { // 選擇在this以上到指定(.top)截止的同級元素節點、可選參數：附加一個篩選條件(.li-test) $(this).prevUntil('.top', '.li-test').css({'font-size': '25px','color': 'red'}); }); // .siblings() // 選中同級除自身以外的所有元素、可選參數：過濾(span) $('#demo-ul>li').eq(4).css('color', 'red') .siblings('span').css('color', '#ccc'); // .parent() // 獲取父級元素節點、可選參數：過濾(ul) $('li').click(function() { var dom = $(this).parent('ul'); console.log(dom); }); // .parents() $('#demo .commodity span.but').click(function() { // .parents() 選出this所有父級的元素節點、可選參數：過濾(.commodity) var dataId = $(this).parents('.commodity').attr('data-id'); console.log(dataId); }); // .closest() // 查找距離this最近的父級元素(p)節點、(也可以是自身) var dom = $('#demo .commodity span.but').eq(0).closest('p'); console.log(dom); // .slice() // 在選擇器中截取指定區域(n,m)的成員(元素節點) $('ul>li').slice(4, 7).css('background', 'red'); ``` ## :-: 操作 DOM ``` // 剪切插入到前面 // .insertBefore() // 將A元素(.top)剪切，插入到B元素(.end)之前、 $('.top').insertBefore('.end'); // .before() // 相反將B元素(.end)剪切，插入到A元素(.top)之前 $('.top').before($('.end')); // 剪切插入到后面 // .insertAfter() // 將A元素(.top)剪切，插入到B元素(.end)之后、 $('.top').insertAfter('.end'); // .ater() // 相反將B元素(.end)剪切，插入到A元素(.top)之后、 $('.top').after($('.end')); // 頭移動元素節點 // .prependTo() // 將p標簽插入到ul內的最頂部、 $('p').prependTo('ul'); // .prepend() // 在p標簽內最頂部插入標簽、 $('p').prepend( $('ol') ); // 尾移動元素節點 // appendTo() // 將p標簽插入到ul內的末尾處、 $('p').appendTo('ul'); // append() // 在p標簽內末尾處插入標簽、 $('p').append('<spam style="color:#fff;">2</span>'); // 清除元素節點、 // .remove() // 刪除(剪切)并返回被刪元素節點、(綁定事件會被清理) var dom = $('p').remove() console.log(dom); // 刪除(剪切)并返回被刪元素節點、(綁定事件不會被清理) console.log( $('p').detach() ); // 創建元素節點、 $('<span style="color:red;">123</span>') // .wrap() // 給元素節點套一個父級、 $('#demo').wrap('<div></div>'); // 方法二： $('#demo').wrap(fun); $('a').wrap(function(index,ele) { return $('li'); }); // .wrapInner() // 給指定元素(ul)里面的子級套一個父級、 $('ul').wrapInner('<div></div>'); // 方法二： $('#demo').wrapInner(fun); // .wrapAll() // 給選中的元素套一個統一的父級、(被選中的li會套到一個div里去) $('li').wrapAll('<div></div>'); // .unwrap() // 刪除自身的父級、(截止到body) $('#box').unwrap(); // .clon() // 克隆元素節點、參數：克隆事件(true) $('#box').clone(true).appendTo('body'); // .data() // 存/取數據、狀態 (跟dom對象有一定映射關系) $('#box').data('f', 1); // 賦值方式有兩種(str/obj)、 $('#box').data({a: 1,b: '2',c: true}); // 取值方式：.data('c') ``` ## :-: <a href="http://www.w3school.com.cn/jquery/jquery_ref_events.asp">Element事件</a> ``` // .on() // 給元素綁定事件、(可以綁定多個) // 參數：1.type 2.selecter 3.data 4.handle (2、3 可以省略) $('ul.demo>li').on('click', fun); $('ul').on('click', 'li', fun); // 給ul里面的li綁定事件、 // 還可以傳遞data數據、通過e.data的方式讀取、 $('ul.demo>li').on('click', {name: 'abc'}, function(e) { console.log(e.data); // Object {name: "abc"} }); // 同時注冊綁定多個事件處理函數、(通過對象的方式傳遞) $('p.demo').on({ click: function() { console.log('鼠標點擊·事件'); }, mouseenter: function() { console.log('鼠標移入·事件'); }, mouseleave: function() { console.log('鼠標移出·事件'); } }); // .one() // 綁定一次性的事件。使用方式跟.on()方法一致，但綁定后執行一次后將會銷毀、 $('ul').one('click', 'li', fun); // 意思是ul綁定事件，委托給li、fun是執行對應函數、 // Demo 讓a標簽第一次點擊跳轉到淘寶，再點擊跳轉到百度、 // <a href="https://baidu.com" target="_blank">百度一下</a> $('a').one('click', function() { open('https://taobao.com'); return false; // 可以阻止默認事件以及冒泡、 }) // .off() // 銷毀綁定的事件、(如不填參數將銷毀所有的綁定) $('ul.demo>li').off('click', fun); $('ul').off('click', 'li'); // 同時銷毀多個事件處理函數、 $('p.demo').off({ click: fun_1, mouseenter: fun_2, mouseleave: fun_3 }); // .trigger() // 主動觸發一個元素事件(可觸發自定義事件)、參數：1.type 2.dataArr // 范例：$('ul').find('li.demo').click(function(e, a, b, c) {console.log(e, a, b, c);}); $('ul').find('li.demo').trigger('click', [1, 2, 3]); // 參數2 可以傳遞一個數組作為實參、 // .hover() // 鼠標移入(mouseenter)、移出(mouseleave)事件簡寫的方式、 $('.demo').hover(function() { console.log('鼠標移入·事件'); }, function() { console.log('鼠標移出·事件'); }); // 其他直接使用的方法(事件) // .click .keydown .mouseenter .mouseleave 、、 // 兼容的事件對象 // e.pageX e.clienX e.which e.button // e.preventDefault() // e.stopPropagation() // return false; 兼容阻止事件冒泡和默認事件、 ``` ## :-: <a href="http://jquery.cuishifeng.cn/show.html">動圖效果</a> ``` // .hide() 隱藏 1.延遲(ms) 3.回調函數 // .show() 顯示 1.延遲(ms) 3.回調函數 // .toggle() 在hide跟show中來回切換、 // .toggle([speed],[easing],[fn]) $('p').click(function() { $('#demo').toggle(300); }) // .fadeIn() 淡入 fadeIn([speed],[fn]) // .fadeOut() 淡出 fadeOut([speed],[fn]) // .fadeToggle() 兩個狀態來回切換、 $('p').on('click', function() { $(this).next().fadeToggle(500); }); // .fadeTo() 漸變到指定的透明度、 // .fadeTo([[speed],opacity,[fn]]) $('#demo').fadeTo(600, 0.2); // 卷簾動圖效果、 // $(this).slideUp(ms,fun); // 卷入 // $(this).slideDown(ms,fun); // 卷出 // $('ul.demo').slideToggle(500); // 兩種狀態間的切換、 // .animate() // 通過給定的參數自定義動圖、(內置隊列) $('#demo').animate({ width: '+=50px', height: '+=50px', top: '50px', left: '50px', opacity: '-=0.3' }, 600, function() { console.log('Hello World~'); }); // .stop() // 阻止本次運動并直接到目標點、參數：1.阻止本次 2.到目標點 $('#demo').stop(true, true); // .finish() // 直接跳到最后的一個目標點、(無參數) $('#demo').finish(); // .delay() // 使動圖延遲執行、 $('#demo') .animate({top: '+=200px'}, 500) .delay(2000) .animate({left: '+=200px'}, 500); ``` ## :-: 內置隊列的使用 ``` // .queue() // 查詢/創建執行隊列、 $('.demo') // 創建隊列、 // 參數： type fn .queue('demo', function(next) { // next參數會執行下一個、 console.log(this, 'demo_1'); next(); }).queue('demo', function() { console.log(this, 'demo_2'); }).queue('demo', function(next) { console.log(this, 'demo_3'); next(); }); // 查詢這個隊列的一組函數、 console.log($('.demo').queue('demo')); // 執行隊列、(函數會按先后循序執行，有參數(next)將依次執行下一個) $('.demo').dequeue('demo'); // 清空隊列、 $('.demo').clearQueue('demo'); ``` ## :-: <a href="http://www.runoob.com/jqueryui/api-easings.html">關于動圖效果拓展API (jQuery UI API - Easings)</a> ``` <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> ``` ## :-: 獲取盒子的相關參數 ``` // .offset() // 獲取元素距離文檔的絕對位置top、left 返回對象。 $('.demo').offset(); // 取值：Object {top: 50, left: 50} $('.demo').offset({top: 50, left: 50}); // 賦值、 // .position() // 只能取值，元素相對于有定位的父級位置top、left 返回對象。 $('.demo').position(); // Object {top: 50, left: 50} // .scrollTop() / scrollLeft() // 獲取、賦予滾動條位置、 $(window).scrollTop(); $(window).scrollLeft(); $(window).scrollTop(666); $(window).scrollLeft(333); $('.demo').scrollTop(); $('.demo').scrollLeft(); $('.demo').scrollTop(666); $('.demo').scrollLeft(333); // .width() .height() // 區域：content // 取內容區寬高、不含padding的區域、返回數值不帶px。 // .innerWidth() .innerHight() // 區域：content + padding // 取內容區寬高、含padding的區域、返回數值不帶px。 // .outerWidth() .outerHight() // 區域：content + padding + border // 取邊框及內容區寬高、返回數值不帶px。 // .outerWidth(true) .outerHight(true) // 區域：content + padding + border + margin // 取整個盒子的所有寬高、返回數值不帶px。 ``` ``` // .each() // 循環遍歷每一個元素、(節省效率) $('ul>li').each(function(index, ele) { // 索引(index) 原生DOM(ele) $(ele).text(index + 1).addClass('demo-' + (index + 1)); }); // .children() // 選中ul下面的所有子級、 $('ul').children(); // .index() // 獲取自身在兄弟中的索引位、(可以傳參數，參數為dom元素) ``` ## :-: jQuery工具方法 ``` // $.type() // 判斷數據類型，是typeof()的升級版、 // 判斷是否為該數據類型、返回true/false // $.isArray(); $.isFunction(); $.isNumeric(); // ··· // $.trim() 到文本，并清空首尾空、 // $.proxy() 改變this指向、 // $.noConflict() 防止命名沖突、 $.extend(); $.fn.extend(); // 第一種用法，擴展api接口 // 新增實例方法：$.fn.extend({ demo:function(){} }) // 新增工具方法：$.extend({ demo:function(){} }) // 第二種用法，對象的克隆、 // 淺層克隆：$.extend(obj1, obj2, obj3); // 深度克隆：$.extend(true, obj1, obj2, obj3); ``` ## :-: <a href="http://www.w3school.com.cn/jquery/ajax_ajax.asp">網絡請求</a> ``` // $.ajax() // 參數：Object類型 // 屬性：url、type、data、success、error $.ajax({ url: 'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person', type: 'GET', // 請求成功的處理函數(success) success: function(data) { console.log(data); console.log(this); }, // 請求失敗的處理函數(error) error: function(e) { console.log(e); // 狀態碼(status)、狀態文本(statusText) console.log(e.status, e.statusText); }, // 請求完成后的處理函數(無論成功失敗都會被觸發) complete: function() { console.log('complete'); }, // 改變函數上下文(this指向) context: $('.demo') }); // $.ajax() 返回的是一個延遲對象、 // 因此可以直接簡寫成 $.ajax().then( fn_1 , fn_2 ) // 這樣請求成功時觸發參數1(fn_1)，當失敗時觸發參數2(fn_2)； // then方法為回調的延遲對象，它等同于ajax對象內的success跟error屬性。 // 這樣的寫法可以優化代碼，提升代碼的閱讀性，更加規范，方便后期維護、防止回調地獄、 // $.Deferred() // 手動創建延遲對象、 (function() { // 創建延遲對象、 var df = $.Deferred(); $('div').click(function() { // 這里通過特定的方法調用設定好的回調函數， // 成功狀態：只能調用一次、 // df.resolve(this); // 失敗狀態：只能調用一次、 // df.reject(this); // 正在進行：可以多次調用、 df.notify(this); }); // 返回這個延遲對象，實現鏈式調用。 return df.promise(); }()).then(function(_this) { console.log(_this, '成功'); }, function(_this) { console.log(_this, '失敗'); }, function(_this) { console.log(_this, '正在進行'); }); // df.then是簡寫的形式，它可以容納以下三種狀態， // df.done( function(){} ); 成功狀態調用方法：df.resolve(); // df.fail( function(){} ); 失敗狀態調用方法：df.reject(); // df.progress( function(){} ); 正在進行調用方法：df.notify(); ``` ``` // 都可以獲取成員數、效果一樣 $('ol>li').length $('ol>li').size(); // .serialize() // 將form表單打包成數據返回str出來、 var data = $('form').serialize(); console.log(data); // wd=阿里&spt=1&id=123 // .serializeArray() // 將form表單打包成數據返回數組(Array)形式、 var data = $('form').serializeArray(); console.log(data); // [{name: "wd",value: "阿里云"}, {name: "spt",value: "1"}, {name: "id",value: "123"}, {name: "issp",value: "1"}] ```