前端知識點總結 jQuery（下）

1. 排隊和併發

1.併發: 多個css屬性同時變化

放在乙個animate函式內的多個css屬性預設併發變化

2.排隊: 多個css屬性先後變化

對同乙個元素，先後呼叫多個動畫api，都是排隊執行

原理: 所有動畫api起始並不是立刻開始動畫，而僅是將當前動畫函式加入元素的動畫佇列中等待執行。

2. 類陣列物件操作

$(...).each(function(i,elem))

鄙視: $(...).each() vs $.each(陣列/集合,fun)

查詢

var i=$(...).index(要找的dom元素/jq物件)

簡化: 如果在乙個父元素內查詢子元素:

$(子元素).index();

1.新增在jquery.fn中

強調: jquery.fn.自定義方法=function()2.呼叫時: $(...).自定義方法()

4. 外掛程式: 為標準函式庫或框架新增功能的第三方庫

官方外掛程式jquery ui

使用jqueryui:

先引入jquery.js，因為jquery ui是基於jquery開發的

再引入jquery-ui.js

再編寫自定義指令碼

包括: 

互動: 自學

效果:a. 重寫了三類簡單動畫api，新增了新的動效

b. 為addclass/removeclass/toggleclass，也新增了動效

c. 重寫了animate方法，支援顏色動畫

部件

什麼是部件: 具有完整樣式和行為的小功能

如何使用: 

1. 引入: jquery-ui.css

2. 按照部件約定，編寫html內容結構
3. 引入jquery.js和jquery-ui.js
4. 在自定義指令碼中，找到外掛程式的父元素，呼叫外掛程式api

侵入性: 在開發者不知情的情況下，自動新增class和行為

優點: 簡單
缺點: 不可維護

jquery ui 傻瓜式，侵入式

優點: 簡單 

缺點: 不可維護

bootstrap 少量手動新增樣式和行為(自定義擴充套件屬性)

缺點: 相比jquery ui，稍微麻煩

優點: 可定製

5. 第三方外掛程式

檔案上傳

富文字編輯器

masonry: 彩磚牆/瀑布流

6. 自定義外掛程式

何時: 只要希望復用一塊功能和樣式時，都要封裝為外掛程式

前提: 必須已經用原生的html,css,jss實現了外掛程式的功能

2種封裝外掛程式的風格: 

jquery侵入式——

1. 將外掛程式所需的css提取出來，儲存在單獨的css檔案中

2. 定義外掛程式的js檔案: 

先檢查是否提前引入了jquery

定義外掛程式函式，儲存在jquery的原型物件jquery.fn中

侵入: 根據外掛程式需要，為子元素自動新增class

為子元素繫結事件處理函式

3. 使用外掛程式: 

引入外掛程式的css檔案

在body中按外掛程式的規定，編寫html內容

引入jquery.js和外掛程式的js檔案

在自定義指令碼中，查詢要應用外掛程式的父元素，呼叫外掛程式函式

bootstrap diy式——

1. 將css拷貝到獨立的css檔案中

2. 編寫js:

先驗證是否提前載入了jquery

查詢自定義擴充套件屬性，為其繫結事件

3. 使用外掛程式:

引入外掛程式的css

按照外掛程式的html格式要求，編寫內容

為外掛程式的html元素手動新增class

為觸發事件的元素新增指定的自定義擴充套件屬性

7. jquery的ajax api

$.ajax(

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=>)

8. 跨域請求

跨域: 

從允許跨域請求: link, img, script

不允許跨域: xhr物件 (ajax請求)

變通: script 需要伺服器返回一段可執行的js語句

伺服器應該返回包含資料的一條可執行的js語句

客戶端實現: jsonp (填充式json)

1. 在客戶端定義處理函式

2. 在按鈕單擊事件中，動態建立script元素，src設定為服務端位址，並攜帶請求引數callback=函式名

3. 在伺服器端，接收請求引數中的函式名，將函式名和要返回的資料，拼接為一條可執行的js語句

4. 客戶端script，請求服務端php，獲得可執行語句，自動呼叫提前定義好的函式處理資料

5. 在客戶端處理函式結尾，要動態刪除script

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

服務端: header("access-control-allow-origin:*");

允許客戶端使用xhr物件跨域請求！

前端 jquery知識點

div取值 var value id html div賦值 id html value span取值 var value id text span賦值 id text value 表單取值 var value id value 表單賦值 id value value 隱藏 id hide 顯示 id...

jQuery知識點總結

一 元素的增刪改查 1 增加 b prepend 和 prependto 區別 後邊的加到前邊的裡邊 前置插入 c after 和 before 區別 後邊的插入到前邊的之後 後邊的插入到前邊的之前 2 刪除 a remove empty 和 detach 方法的區別 remove 移除 empty...

jQuery知識點總結（三）

jquery繫結事件 title click function else content slideup 1000 先學習四個動畫函式 show 時間 即改變透明度，高度 寬度 hide 時間 即改變透明度，高度 寬度 slidedown 時間 只改變元素的高度 slideup 時間 只改變元素的高...