前端知識點總結——JQ

時間 2019-11-07

原文原文鏈接

前端知識點總結——JQ

1.什麼是jQuery:

jQuery: 第三方的極簡化的DOM操做的函數庫
第三方: 下載
極簡化: 是DOM操做的終極簡化: 4個方面:php

1. DOM: 增刪改查
2. 事件綁定:
3. 動畫效果:
4. Ajax

DOM操做: 學習jQuery仍是在學DOM，只不過API簡化了
函數庫: jQuery中都是函數，用函數來解決一切問題
爲何使用:css

DOM操做的終極簡化
解決了大部分瀏覽器兼容性問題
凡是jQuery讓用的，都沒有兼容性問題

2.如何使用:

下載: 版本:
1.x: 兼容舊瀏覽器 IE8html

1.x.js  未壓縮版  
  優: 包含完備的註釋，格式，變量名，可讀性好
  缺: 體積大，不便於傳輸
 什麼時候: 學習和開發階段
1.x.min.js  壓縮版
  優: 體積小，便於傳輸
  缺: 去掉註釋，格式，極簡化了變量名
      可讀性差
 什麼時候: 生產環境

2.x: 再也不兼容舊瀏覽器
3.x: 再也不兼容舊瀏覽器，提供了更多新特性:
鄙視: 3.x的新特性:前端

1. 全部代碼運行在嚴格模式下
2. 用for...of代替了forEach  $.each
3. 新動畫API: requestAnimationFrame()
4. 支持promise
5. ajax的API防備跨站點腳本(XSS)攻擊

引入網頁: 2種:jquery

引入服務器本地的js文件: <script src="js/jquery-1.x.js"
引入CDN網絡中共享的js文件:

原理:
引入jquery-1.x.js實際上是在全局添加了一種新類型jQuery
包括:
構造函數jQuery: 用於建立jQuery類型的子對象
原型對象jQuery.fn: 用於保存只有jQuery類型的子對象才能訪問的共有方法
如何使用jQuery簡化版API:
問題: DOM元素沒法使用jQuery簡化版API
解決: 要想使用jQuery簡化版API，必須先建立jQuery類型的子對象:
如何建立jQuery類型的子對象: 2種:json

經過查找DOM元素，將DOM元素保存到新建立的jQuery對象中:
var $jq=$("selector")
什麼是jQuery對象: 包含找到的DOM元素的類數組對象
將已經得到的DOM元素直接保存進新建立的jQuery對象中

jQuery API的通用特色: 3個bootstrap

自帶遍歷: 對jQuery對象總體調用一次API，等效於對內部每一個元素都調用一次API
一個函數兩用: 給新值，就修改；沒給新值，就讀取原值
每一個函數都返回正在操做的jq對象: 鏈式操做!

3.查找: 選擇器

基本選擇器: 同CSS
id 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種:api

之內容中的文本做爲條件查詢父元素
:contains(text) 內容包含指定文字的元素
以子元素的特徵做爲查詢條件，查詢父元素
:has(selector) 包含符合selector要求的子元素的父元素
空元素/非空元素:
:parent
:empty

可見性過濾: jQuery新增
:hidden 只能選擇兩種隱藏的元素跨域

type="hidden"     display:none

:visible
狀態過濾: 同CSS 四大狀態:
:enabled :disabled :checked :selected
表單元素過濾:
:input 選擇全部表單元素: input select textarea button
:[type] 每種type都對應一種選擇器

:text  :password  :file    :button  :submit ....

4.修改:

內容: 3種:
html代碼片斷: $(...).html([新內容]) .innerHTML
純文本內容: $(...).text([新內容]) .textContent
表單元素的值: $(...).val([新值]) .value
清空內容: $(...).empty();
屬性: 3種:
HTML標準屬性: $(...).attr("屬性名"[,"值"])

問題: 一次只能修改一個屬性的值:
解決: 同時修改多個屬性的值:
 $(...).attr({
   屬性名:值,
   屬性名:值,
      ... : ...
 })

狀態屬性: $(...).prop("屬性名"[,bool])
自定義擴展屬性: $(...).data("屬性名"[,"值"])
樣式:
修改: 內聯樣式:
獲取: 計算後的樣式:
都用.css: $(...).css("css屬性名"[,值])
問題: 單獨修改每一個css屬性，代碼繁瑣
解決: 用class批量修改樣式:
$(...).addClass("class ... ")
$(...).removeClass("class ...")
$(...).hasClass("class ...")

$(...).toggleClass("class ...")

按節點間關係查找:
2大類:
1. 父子:
  $(...).parent()
  $(...).children(["selector"])
  問題: 只能得到直接子元素
  解決: 在全部後代中查找
  $(...).find("selector")
  $(...).children().first();
  $(...).children().last();
2. 兄弟:
  $(...).prev/next()
  $(...).prevAll/nextAll(["selector"])
  $(...).siblings(["selector"])
添加,刪除,替換,克隆:
添加: 2步:
1. 建立新元素: var $elem=$("html代碼片斷")
2. 將新元素添加到DOM樹:
  末尾追加: $parent.append($elem) //return $parent
```
$elem.appendTo($parent) //return $elem
```
  開頭插入: $parent.prepend($elem) //return $parent
```
$elem.prependTo($parent) //return $elem
```
  指定元素前插入: $child.before($elem)
  指定元素後插入: $child.after($elem)

可簡化爲1步:
$("html代碼片斷").appendTo($parent)
$parent.append("html代碼片斷")

移除: $(...).remove()
替換: $(...).replaceWith(); //右替換左 //return 左

$(...).replaceAll(...); //左替換右 //return 左

克隆: $(...).clone();
淺克隆: 僅複製內容和樣式，不復制行爲

.clone() 默認是淺克隆

深克隆: 即複製內容和樣式，又複製行爲

.clone(true)

5.事件:

鄙視: jq中有幾種事件綁定方式，分別是什麼:

.bind("事件名",handler)
.unbind("事件名",handler)
3個重載:

.unbind("事件名",handler) 移除指定事件上的一個處理函數
 .unbind("事件名")  移除指定事件上的全部處理函數
 .unbind() 移除全部事件上的全部處理函數

.one("事件名",handler)
只能觸發一次，觸發後，自動解綁
.delegate("selector","事件名",handler)
其實就是利用冒泡的簡化版：
1. 將利用冒泡中的目標元素判斷提高到第一個參數，用選擇器做爲判斷條件
2. 將this從新指回了目標元素

鄙視: .delegate vs .bind

綁定位置不一樣:
.bind() 直接綁在目標元素(子元素)上
.delegate() 綁在父元素上
事件監聽的個數不一樣:
.bind() 致使事件監聽個數增多
.delegate() 始終只有一個監聽
.bind() 沒法讓動態生成的新元素自動得到事件處理函數
.delegate() 即便後來動態生成的新元素也可自動得到父元素上的事件處理函數

解綁: .undelegate()

.live/die() 廢棄
.on: 統一bind和delegate的用法
1. 代替bind: .on("事件名",handler)
2. 代替delegate: .on("事件名","選擇器",handler)

解綁: .off()

終極簡化: .事件名(handler)

6.頁面加載後執行: 2種:

DOMContentLoaded:
DOM內容(html,js)加載完成,就提早觸發
什麼時候: 操做不須要等待css和圖片時，首選DOMContentLoaded
jQuery: $(document).ready(function(){ ... })
簡化: $().ready(function(){...})
更簡化: $(function(){...})
```
ES6: $(()=>{ ... })
```
window.onload=function(){
//等待頁面全部內容(html,css,js,圖片)都加載完才能執行
}
什麼時候: 若是必須等待css和圖片加載完，才能執行的操做，必須放在window.onload中

鄙視: jQuery中$的原理: 4種重載

若是傳入選擇器字符串，則查找並建立jq對象
優化: speed up
若是選擇器只是一個id，則調用getElementById
若是選擇器只是一個標籤，則調用getElementsByTagName
若是選擇器只是一個class，則調用getElementsByClassName
若是選擇器複雜，才調querySelectorAll
若是傳入DOM元素對象，則封裝現有DOM元素爲jq對象
若是傳入html代碼片斷，就建立新元素:
若是傳入函數，就綁定DOM內容加載後執行

7.鼠標事件:

DOM: mouseover mouseout
進出子元素，也會反覆觸發父元素上的事件
jq: mouseenter mouseleave
進出子元素，再也不觸發父元素上的事件
簡化: 若是同時綁定mouseenter和mouseleave

可簡化爲.hover(enterHandler, leaveHandler)
 若是enterHandler和leaveHandler可統一爲一個處理函數: .hover(handler)

模擬觸發:
$(...).trigger("事件名") => $(...).事件名()

8.動畫:

簡單動畫: 3種:

顯示隱藏: .show(ms) .hide(ms) .toggle(ms)
不帶參數，默認: 瞬間顯示隱藏，不帶動畫
```
原理: display屬性實現的，不支持動畫
```
帶毫秒數參數: 會有動畫效果
上滑下滑: .slideUp(ms) .slideDown(ms) .slideToggle(ms)
淡入淡出: .fadeIn(ms) .fadeOut(ms) .fadeToggle(ms)

問題: 1. 效果是固定的，不便於維護

2. 用程序的定時器實現的動效，效率不如transition

萬能動畫:
$(...).animate({
css屬性:目標值,
css屬性:目標值,
},ms)
問題: 只支持單個數值的css屬性

不支持顏色和CSS3變換

動畫播放後自動執行: 動畫API的最後一個參數都是一個回調函數，在動畫播放完成後自動執行!
回調函數中的this，指正在播放動畫的當前DOM元素

9.排隊和併發:

併發: 多個css屬性同時變化
放在一個animate函數內的多個css屬性默認併發變化
排隊: 多個css屬性前後變化
對同一個元素，前後調用多個動畫API，都是排隊執行
原理: 全部動畫API起始並非馬上開始動畫，而僅是將當前動畫函數加入元素的動畫隊列中等待執行。

中止動畫: $(...).stop();
默認: 僅中止動畫隊列中，當前正在播放的一個動畫，隊列中後續動畫，依然執行！
如何中止動畫，並清空隊列: .stop(true)

選擇器: :animated 可選擇或判斷一個正在播放動畫的元素

10.類數組對象操做:

遍歷:
$(...).each(function(i,elem){
//this->當前elem
})
鄙視: $(...).each() vs $.each(數組/集合,fun)

查找:
var i=$(...).index(要找的DOM元素/jq對象)
簡化: 若是在一個父元素內查找子元素:

$(子元素).index();

11.爲jquery添加自定義方法:

添加在jQuery.fn中
強調: jQuery.fn.自定義方法=function(){
```
//this->未來調用該方法的jq對象
   }
```
調用時: $(...).自定義方法()

12.插件: 爲標準函數庫或框架添加功能的第三方庫

官方插件jQuery UI:
使用jQueryUi:
先引入jquery.js，由於jQuery UI是基於jQuery開發的
再引入jquery-ui.js
再編寫自定義腳本
包括:
交互: 自學
效果:
1. 重寫了三類簡單動畫API，添加了新的動效
2. 爲addClass/removeClass/toggleClass，也添加了動效
3. 重寫了animate方法，支持顏色動畫

部件:
什麼是部件: 具備完整樣式和行爲的小功能
如何使用: 4步:

1. 引入: jquery-ui.css
2. 按照部件約定，編寫html內容結構
3. 引入jquery.js和jquery-ui.js
4. 在自定義腳本中，找到插件的父元素，調用插件API

原理:

侵入性: 在開發者不知情的狀況下，自動添加class和行爲
優: 簡單!
缺: 不可維護!

jQuery UI vs bootstrap
jQuery UI 傻瓜式，侵入式
優: 簡單缺: 不可維護
bootstrap 少許手動添加樣式和行爲(自定義擴展屬性)
缺: 相比jQuery UI，稍微麻煩
優: 可定製!

13.第三方插件:

文件上傳:
富文本編輯器:
masonry: 彩磚牆/瀑布流

14.自定義插件:

什麼時候: 只要但願複用一塊功能和樣式時，都要封裝爲插件
如何:
前提: 必須已經用原生的html,css,jss實現了插件的功能
2種封裝插件的風格:
jQuery侵入式:

將插件所需的css提取出來，保存在單獨的css文件中
定義插件的js文件:
先檢查是否提早引入了jQuery
定義插件函數，保存在jQuery的原型對象jQuery.fn中
```
侵入: 根據插件須要，爲子元素自動添加class
      爲子元素綁定事件處理函數
```
使用插件:
引入插件的css文件
在body中按插件的規定，編寫html內容
引入jquery.js和插件的js文件
在自定義腳本中，查找要應用插件的父元素，調用插件函數

Bootstrap DIY式:

將css拷貝到獨立的css文件中
編寫js:
先驗證是否提早加載了jQuery
查找自定義擴展屬性，爲其綁定事件
使用插件:
引入插件的css
按照插件的HTML格式要求，編寫內容
爲插件的HTML元素手動添加class
爲觸發事件的元素添加指定的自定義擴展屬性

15.jQuery的ajax API

$.ajax({
type:"get/post",
url:"xxx",
data:"rawData"/{ 變量名:值, ...}
dataType:"json",
beforeSend(){

//在發送以前觸發

}
completed(){

//只要請求完成，不管成功仍是失敗，都觸發

}
success(data){

//請求成功觸發

}
error(){

//發生錯誤時觸發

}
}).then(data=>{
... ...
}).catch(err=>{ ... })
簡寫:

專門發送get請求

$.get(url,data,dataType).then(data=>{ ... })

專門發送get請求，接收JSON響應，並自動轉爲js對象

$.getJSON(url,data).then(data=>{ ... })

專門發送get請求，接收js語句響應，並執行

$.getScript(url,data)

專門發送get請求，獲取一段html代碼片斷的響應，並自動填充到前面的父元素中

$(父元素).load("xx.php/xx.html")
強調: 不支持then!

專門簡化post請求的:
$.post(url,data,dataType).then(data=>{ ... })

16.跨域請求:

跨域:
從http://store.company.com/dir/...

容許跨域請求: link, img, script
不容許跨域: xhr對象 (ajax請求)
變通: script 須要服務器返回一段可執行的js語句

服務器應該返回包含數據的一條可執行的js語句

如何實現:
客戶端實現: JSONP (填充式json)

在客戶端定義處理函數
在按鈕單擊事件中，動態建立script元素，src設置爲服務端地址，並攜帶請求參數callback=函數名
在服務器端，接收請求參數中的函數名，將函數名和要返回的數據，拼接爲一條可執行的js語句
客戶端script，請求服務端php，得到可執行語句，自動調用提早定義好的函數處理數據
在客戶端處理函數結尾，要動態刪除script

起始jQuery的ajax api均可用, 只不過，dataType必須都寫成jsonp，原理同上。

服務端: header("Access-Control-Allow-Origin:*");
容許客戶端使用xhr對象跨域請求！

結語：以爲總結的還能夠的話，點下贊咯，大家的鼓勵是我前進的動力，謝謝各位老鐵們！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。