1.什麼是jQuery:
jQuery:第三方的極簡化的DOM操作的函數庫第三方:下載極簡化:是DOM操作的終極簡化:4個方面:
DOM操作:學習jQuery還是在學DOM，只不過API簡化了函數庫:jQuery中都是函數，用函數來解決一切問題為什麼使用:
- DOM操作的終極簡化
- 解決了大部分瀏覽器兼容性問題凡是jQuery讓用的，都沒有兼容性問題
2.如何使用:
下載:版本:
1.x:兼容舊瀏覽器IE8
2.x:不再兼容舊瀏覽器
3.x:不再兼容舊瀏覽器，提供了更多新特性:
鄙視:3.x的新特性:
引入網頁:2種:
- 引入服務器本地的js文件:<script><li>引入CDN網絡中共享的js文件:</li></ol><p><scriptclass="lazy" data-original=“http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js”</p><p>原理:引入jquery-1.x.js其實是在全局添加了一種新類型jQuery包括:構造函數jQuery:用於創建jQuery類型的子對象原型對象jQuery.fn:用於保存只有jQuery類型的子對象才能訪問的共有方法如何使用jQuery簡化版API:問題:DOM元素無法使用jQuery簡化版API解決:要想使用jQuery簡化版API，必須先創建jQuery類型的子對象:如何創建jQuery類型的子對象:2種:</p><ol><li>通過查找DOM元素，將DOM元素保存到新創建的jQuery對象中:var $jq=$(“selector”) 什麼是jQuery對象:包含找到的DOM元素的類數組對象</li><li>將已經獲得的DOM元素直接保存進新創建的jQuery對象中</li></ol><p>jQueryAPI的通用特點:3個</p><ol><li>自帶遍歷:對jQuery對象整體調用一次API，等效於對內部每個元素都調用一次API</li><li>一個函數兩用:給新值，就修改；沒給新值，就讀取原值</li><li>每個函數都返回正在操作的jq對象:鏈式操作!</li></ol><p><strong>3.查找:選擇器</strong></p><p>基本選擇器:同CSSid class element * , 層次選擇器:同CSS空格>+ ~ 子元素過濾選擇器:同CSS在各自父元素內，分別排序，從1開始:first-child:last-child :only-child :nth-child(2n/2n+1/odd/even/i)基本過濾選擇器(位置過濾選擇器):jQuery新增將所有符合條件的元素，保存在一個統一的集合中，在集合內統一編號。從0開始:first/last:gt/lt/eq(i) :even/odd 屬性過濾選擇器:同CSS內容過濾:jQuery新增4種:</p><ol><li>以內容中的文本作為條件查詢父元素:contains(text)內容包含指定文字的元素</li><li>以子元素的特徵作為查詢條件，查詢父元素:has(selector)包含符合selector要求的子元素的父元素</li><li>空元素/非空元素::parent :empty</li></ol><p>可見性過濾:jQuery新增:hidden只能選擇兩種隱藏的元素</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/e0db6681842c4b4399a202f5e9d0d081" img_width="968" img_height="50" alt="前端知識點總結——JQ" inline="0"></div><p>:visible</p><p>狀態過濾:同CSS四大狀態:</p><p>:enabled:disabled :checked :selected</p><p>表單元素過濾:</p><p>:input選擇所有表單元素:input select textarea button</p><p>:[type]每種type都對應一種選擇器</p><div class="pgc-img"><img class="lazy" data-original="http://p9.pstatp.com/large/pgc-image/5feda398fb5848bcbd4ac5a03fd851de" img_width="871" img_height="48" alt="前端知識點總結——JQ" inline="0"></div><p><strong>4.修改:</strong></p><p>內容:3種:html代碼片段:$(…).html([新內容]).innerHTML 純文本內容:$(…).text([新內容]).textContent 表單元素的值:$(…).val([新值]).value 清空內容:$(…).empty(); 屬性:3種:HTML標準屬性:$(…).attr(“屬性名”[,“值”])</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/e50024751acc407fa860f78c15fa595d" img_width="890" img_height="216" alt="前端知識點總結——JQ" inline="0"></div><p>狀態屬性:$(…).prop(“屬性名”[,bool])自定義擴展屬性:$(…).data(“屬性名”[,“值”])樣式:修改:內聯樣式:獲取:計算後的樣式:都用.css:$(…).css(“css屬性名”[,值])問題:單獨修改每個css屬性，代碼繁瑣解決:用class批量修改樣式:$(…).addClass("class … ") $(…).removeClass(“class…”) $(…).hasClass(“class …”)</p><p>$(…).toggleClass(“class…”)</p><ol><li>按節點間關係查找:</li></ol><p>2大類:</p><ul><li>父子:$(…).parent() $(…).children([“selector”]) 問題:只能獲得直接子元素解決:在所有後代中查找$(…).find(“selector”)$(…).children().first(); $(…).children().last();</li><li>兄弟:$(…).prev/next() $(…).prevAll/nextAll([“selector”])$(…).siblings([“selector”])</li></ul><ol><li>添加,刪除,替換,克隆:</li></ol><p>添加:2步:</p><ul><li>創建新元素:var $elem=$(“html代碼片段”)</li><li>將新元素添加到DOM樹:</li></ul><p>末尾追加:$parent.append($elem) //return $parent</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/ab5c93ec85a04e6a8964c0170d8aafa0" img_width="882" img_height="53" alt="前端知識點總結——JQ" inline="0"></div><p>開頭插入:$parent.prepend($elem) //return $parent</p><div class="pgc-img"><img class="lazy" data-original="http://p3.pstatp.com/large/pgc-image/82fade8975ca4b0aa679e9db97845fe9" img_width="886" img_height="56" alt="前端知識點總結——JQ" inline="0"></div><p>指定元素前插入:$child.before($elem)</p><p>指定元素後插入:$child.after($elem)</p><p>可簡化為1步:</p><p>$(“html代碼片段”).appendTo($parent)</p><p>$parent.append(“html代碼片段”)</p><p>移除:$(…).remove()</p><p>替換:$(…).replaceWith(); //右替換左//return左</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/ad93beb4c7234b91b15c20c9f7f76e17" img_width="953" img_height="59" alt="前端知識點總結——JQ" inline="0"></div><p>克隆:$(…).clone();</p><p>淺克隆:僅複製內容和樣式，不復制行為</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/612f77f9815a41dea7b888d8659ac6c5" img_width="921" img_height="62" alt="前端知識點總結——JQ" inline="0"></div><p>深克隆:即複製內容和樣式，又複製行為</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/8e7cfad5c0a14ca8b6c7b00ed1ae2738" img_width="990" img_height="56" alt="前端知識點總結——JQ" inline="0"></div><p><strong>5.事件:</strong></p><p>鄙視:jq中有幾種事件綁定方式，分別是什麼:</p><ol><li>.bind(“事件名”,handler)</li></ol><p>.unbind(“事件名”,handler)</p><p>3個重載:</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/4701b4fadcf44b3a89cebed35da0ad1f" img_width="947" img_height="110" alt="前端知識點總結——JQ" inline="0"></div><ol><li>.one(“事件名”,handler)</li></ol><p>只能觸發一次，觸發後，自動解綁</p><ol><li>.delegate(“selector”,“事件名”,handler)</li></ol><p>其實就是利用冒泡的簡化版：</p><ul><li>將利用冒泡中的目標元素判斷提升到第一個參數，用選擇器作為判斷條件</li><li>將this重新指回了目標元素</li></ul><p>鄙視:.delegate vs .bind</p><ul><li>綁定位置不同:.bind() 直接綁在目標元素(子元素)上.delegate()綁在父元素上</li><li>事件監聽的個數不同:.bind() 導致事件監聽個數增多.delegate()始終只有一個監聽</li><li>.bind()無法讓動態生成的新元素自動獲得事件處理函數.delegate()即使後來動態生成的新元素也可自動獲得父元素上的事件處理函數</li></ul><p>解綁:.undelegate()</p><ul><li>.live/die()廢棄</li><li>.on:統一bind和delegate的用法</li><li>代替bind:.on(“事件名”,handler)</li><li>代替delegate:.on(“事件名”,“選擇器”,handler)</li></ul><p>解綁:.off()</p><p>終極簡化:.事件名(handler)</p><p><strong>6.頁面加載後執行:2種:</strong></p><p>1.DOMContentLoaded:</p><p>DOM內容(html,js)加載完成,就提前觸發</p><p>何時:操作不需要等待css和圖片時，首選DOMContentLoaded</p><p>jQuery:$(document).ready(function(){ … })</p><p>簡化:$().ready(function(){…})</p><p>更簡化:$(function(){…})</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/dceeb4ab05a441088a851930ef5f0b76" img_width="871" img_height="55" alt="前端知識點總結——JQ" inline="0"></div><p>2.window.onload=function(){</p><p>//等待頁面所有內容(html,css,js,圖片)都加載完才能執行</p><p>}</p><p>何時:如果必須等待css和圖片加載完，才能執行的操作，必須放在window.onload中</p><p>鄙視:jQuery中$的原理:4種重載</p><ul><li>如果傳入選擇器字符串，則查找並創建jq對象優化:speed up 如果選擇器只是一個id，則調用getElementById如果選擇器只是一個標籤，則調用getElementsByTagName如果選擇器只是一個class，則調用getElementsByClassName如果選擇器複雜，才調querySelectorAll</li><li>如果傳入DOM元素對象，則封裝現有DOM元素為jq對象</li><li>如果傳入html代碼片段，就創建新元素:</li><li>如果傳入函數，就綁定DOM內容加載後執行</li></ul><p><strong>7.鼠標事件:</strong></p><p>DOM:mouseover mouseout</p><p>進出子元素，也會反覆觸發父元素上的事件</p><p>jq:mouseenter mouseleave</p><p>進出子元素，不再觸發父元素上的事件</p><p>簡化:如果同時綁定mouseenter和mouseleave</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/ec36b41daed346b198cd57afda36687d" img_width="966" img_height="79" alt="前端知識點總結——JQ" inline="0"></div><p>模擬觸發:$(…).trigger(“事件名”)=> $(…).事件名()</p><p><strong>8.動畫:</strong></p><p>簡單動畫:3種:</p><ul><li>顯示隱藏:.show(ms) .hide(ms) .toggle(ms)</li></ul><p>不帶參數，默認:瞬間顯示隱藏，不帶動畫</p><p>原理:display屬性實現的，不支持動畫</p><p>帶毫秒數參數:會有動畫效果</p><ul><li>上滑下滑:.slideUp(ms) .slideDown(ms) .slideToggle(ms)</li><li>淡入淡出:.fadeIn(ms) .fadeOut(ms) .fadeToggle(ms)</li></ul><p>問題:1. 效果是固定的，不便於維護</p><p>2\.用程序的定時器實現的動效，效率不如transition</p><p>萬能動畫:</p><p>$(…).animate({</p><p>css屬性:目標值,</p><p>css屬性:目標值,</p><p>},ms)</p><p>問題:只支持單個數值的css屬性</p><p>不支持顏色和CSS3變換</p><p>動畫播放後自動執行:動畫API的最後一個參數都是一個回調函數，在動畫播放完成後自動執行!回調函數中的this，指正在播放動畫的當前DOM元素</p><p><strong>9.排隊和併發:</strong></p><ul><li>併發:多個css屬性同時變化放在一個animate函數內的多個css屬性默認併發變</li><li>排隊:多個css屬性先後變化對同一個元素，先後調用多個動畫API，都是排隊執行原理:所有動畫API起始並不是立刻開始動畫，而僅是將當前動畫函數加入元素的動畫隊列中等待執行。</li></ul><p>停止動畫:$(…).stop();</p><p>默認:僅停止動畫隊列中，當前正在播放的一個動畫，隊列中後續動畫，依然執行！</p><p>如何停止動畫，並清空隊列:.stop(true)</p><p>選擇器::animated 可選擇或判斷一個正在播放動畫的元素</p><p><strong>10.類數組對象操作:</strong></p><p>遍歷:</p><p>$(…).each(function(i,elem){</p><p>//this->當前elem</p><p>})</p><p>鄙視:$(…).each() vs $.each(數組/集合,fun)</p><p>查找:</p><p>vari=$(…).index(要找的DOM元素/jq對象)</p><p>簡化:如果在一個父元素內查找子元素:</p><p>$(子元素).index();</p><p><strong>11.為jquery添加自定義方法:</strong></p><ul><li>添加在jQuery.fn中</li></ul><p>強調:jQuery.fn.自定義方法=function(){</p><div class="pgc-img"><img class="lazy" data-original="http://p3.pstatp.com/large/pgc-image/85cc17a4e4094e3388c4e6235e48b7d7" img_width="751" img_height="72" alt="前端知識點總結——JQ" inline="0"></div><ul><li>調用時:$(…).自定義方法()</li></ul><p><strong>12.插件:為標準函數庫或框架添加功能的第三方庫</strong></p><ul><li>官方插件jQueryUI:</li></ul><p>使用jQueryUi:</p><p>先引入jquery.js，</p><p>因為jQueryUI是基於jQuery開發的</p><p>再引入jquery-ui.js</p><p>再編寫自定義腳本</p><p>包括:</p><p>交互:自學</p><p>效果:</p><ul><li>重寫了三類簡單動畫API，添加了新的動效</li><li>為addClass/removeClass/toggleClass，也添加了動效</li><li>重寫了animate方法，支持顏色動畫</li></ul><p>部件:什麼是部件:具有完整樣式和行為的小功能如何使用:4步:</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/56863ceb7b44429c9e0a46fcf02c4e28" img_width="843" img_height="133" alt="前端知識點總結——JQ" inline="0"></div><p>原理:</p><div class="pgc-img"><img class="lazy" data-original="http://p3.pstatp.com/large/pgc-image/33bd78b99c92491098fa85e4ec438a3c" img_width="930" img_height="99" alt="前端知識點總結——JQ" inline="0"></div><p>jQueryUI vs bootstrap</p><p>jQueryUI 傻瓜式，侵入式</p><p>優:簡單缺:不可維護</p><p>bootstrap少量手動添加樣式和行為(自定義擴展屬性)</p><p>缺:相比jQueryUI，稍微麻煩</p><p>優:可定製!</p><p><strong>13.第三方插件:</strong></p><p>文件上傳:</p><p>富文本編輯器:</p><p>masonry:彩磚牆/瀑布流</p><p><strong>14.自定義插件:</strong></p><p>何時:只要希望複用一塊功能和樣式時，都要封裝為插件</p><p>如何:</p><p>前提:必須已經用原生的html,css,jss實現了插件的功能</p><p>2種封裝插件的風格:jQuery侵入式:</p><ul><li>將插件所需的css提取出來，保存在單獨的css文件中</li><li>定義插件的js文件:</li></ul><p>先檢查是否提前引入了jQuery</p><p>定義插件函數，保存在jQuery的原型對象jQuery.fn中</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/54f838b841df4397a791f8c458d61e64" img_width="760" img_height="83" alt="前端知識點總結——JQ" inline="0"></div><ul><li>使用插件:</li></ul><p>引入插件的css文件</p><p>在body中按插件的規定，編寫html內容</p><p>引入jquery.js和插件的js文件</p><p>在自定義腳本中，查找要應用插件的父元素，調用插件函數</p><p>BootstrapDIY式:</p><ul><li>將css拷貝到獨立的css文件中</li><li>編寫js:先驗證是否提前加載了jQuery查找自定義擴展屬性，為其綁定事件</li><li>使用插件:引入插件的css按照插件的HTML格式要求，編寫內容為插件的HTML元素手動添加class為觸發事件的元素添加指定的自定義擴展屬性</li></ul><p><strong>15.jQuery的ajaxAPI</strong></p><p>$.ajax({</p><p>type:“get/post”,</p><p>url:“xxx”,</p><p>data:“rawData”/{變量名:值,…}</p><p>dataType:“json”,</p><p>beforeSend(){</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/591f44d90adf469ab018c3403a436d3b" img_width="835" img_height="58" alt="前端知識點總結——JQ" inline="0"></div><p>}</p><p>completed(){</p><p>//只要請求完成，無論成功還是失敗，都觸發</p><p>}</p><p>success(data){</p><p>//請求成功觸發</p><p>}</p><p>error(){</p><p>//發生錯誤時觸發</p><p>}}).then(data=>{ … … }).catch(err=>{ … }) 簡寫:</p><ul><li>專門發送get請求</li></ul><p>$.get(url,data,dataType).then(data=>{… })</p><ul><li>專門發送get請求，接收JSON響應，並自動轉為js對象</li></ul><p>$.getJSON(url,data).then(data=>{… })</p><ul><li>專門發送get請求，接收js語句響應，並執行</li></ul><p>$.getScript(url,data)</p><ul><li>專門發送get請求，獲取一段html代碼片段的響應，並自動填充到前面的父元素中</li></ul><p>$(父元素).load(“xx.php/xx.html”)強調:不支持then!</p><p>專門簡化post請求的:$.post(url,data,dataType).then(data=>{ … })</p><p><strong>16.跨域請求:</strong></p><p>允許跨域請求:link, img,>
分享到:
閱讀更多 渡一教育web前端開發 的文章
