1. 外掛程式: 也稱元件
什麼是: 擁有專屬的html,css和js的獨立頁面區域
為什麼: 重用!
何時: 只要乙個功能/區域可能被反覆使用時
如何:
1. 官方外掛程式:jquery ui
依賴於jquery, 必須先引入jquery,再引入jquery ui
如何:
1. 引入jquery ui的css
2. 按元件的要求,自行編寫html結構和內容
3. 引入jquery.js, 再引入jquery ui.js
4. 查詢外掛程式的父元素,呼叫jquery ui的外掛程式函式
$(外掛程式的父元素).外掛程式函式()
侵入性: 外掛程式根據自己的需要,自動新增樣式類或自定義擴充套件屬性
2. 第三方外掛程式:
3. 自定義外掛程式:
定義:
前提: 已經用html,css,js實現了外掛程式的效果和功能
1. 將外掛程式的css提取出來,儲存在乙個獨立的css檔案
要求: 為了避免和其他外掛程式存在相同的樣式類發生衝突,必須保證每個樣式類都要以統一的外掛程式類名作為字首!
2. 定義外掛程式的js: 向jquery的原型物件中新增自定義外掛程式函式
jquery.fn.外掛程式函式=function()//呼叫時: $(父元素).外掛程式函式();
使用外掛程式: 同使用jqueryui的做法
1. 引入外掛程式的css
2. 按照外掛程式要求編寫html
3. 引入jquery.js和外掛程式.js
4. 查詢外掛程式父元素,呼叫外掛程式函式
2. ajax:
$.ajax(,
datatype:"json", //可自動將伺服器返回的json字串轉為物件
success:function(res)
})//jquery 3.x 支援promise
.then(function(res))
3. 跨域:
什麼是: 乙個網域名稱下網頁,向另乙個網域名稱下傳送請求,請求另乙個網域名稱下的資源
比如: 現在在http://localhost/index.html下
href=""
問題: ajax的xhr物件,禁止傳送跨域請求
包括:
1. 一級網域名稱不同: www.a.com -> www.b.com
2. 二級網域名稱不同: oa.tedu.com -> hr.tedu.com
3. 埠不同: localhost:5500 -> localhost:3000
||4. 協議不同: http:localhost -> https:localhost
80 443
5. 即使同一臺機器: 網域名稱 -> ip
localhost 127.0.0.1
如何傳送非同步跨域請求:
1. jsonp: json with padding 填充式json
問題1: ajax不能傳送跨域請求
解決1: 請元素幫助傳送請求
問題2: 傳送請求,必須返回一條可執行的js語句
解決2: 修改服務端res.write(),其中,將要返回的資料,填充進一條可執行的js語句中,一起返回。
問題3: 服務端返回的js語句是寫死的,眾口難調
解決3: 在客戶端定義乙個處理函式
function show(res)
服務端返回一條函式呼叫語句,函式名必須和客戶端定義的函式名保持一致:
res.write(`show('$')`)
返回: show('晴 -10~-2 from dong')
在客戶端執行時:
呼叫show函式:
引數res自動得到了'晴 -10~-2 from dong'
實現了: 客戶端操作與服務端的分離
問題4: 服務端將函式名規定死,也是眾口難調
解決4: 客戶端傳送:
服務端:
先獲得req中callback變數中的函式名
再將函式名拼接到res.write()中,代替寫死的函式名
實現了: 處理邏輯和函式名與服務端無關
問題5: 在客戶端只寫死一次,僅能在首次載入頁面時執行一次,無法反**送請求
解決5: 動態新增元素
在單擊事件中:
問題6: 新增的無法自動刪除,造成積壓
解決6: 在自定義的**函式結尾,查詢最後乙個script,刪除。
其實: $.ajax可自動實現jsonp效果:
$.ajax(
})原理: 同以上6步:
1. 動態建立script元素傳送請求
2. 自動為success匿名函式定義隨機函式名拼接到url?callback=隨機函式
3. success函式執行後,自動刪除script元素
強調:jsonp單靠客戶端無法實現,必須服務端負責拼接函式名和要返回的資料。所以必須客戶端服務端同時修改才可支援。
jquery的form外掛程式上傳檔案ajax驗證
最近需要寫乙個上傳檔案後的ajax驗證,找了半天用jquery的form外掛程式結合ajax寫了出來。看來jquery還是很強大的,以後的好好學習一下。首先要引入jquery和form外掛程式,注意順序一定要先jquery,然後再form 然後是乙個form表單,上傳檔案的form表單 最後是乙個j...
JQuery的跨域方法
因發現有不少博友發園內簡訊問及js的跨域問題,我想很多程式設計師的腦海裡面還認為js是不能跨域的,其實這是乙個錯誤的觀點 有很多人在網上找其解 決方法,教其用iframe去解決的文章很多,真有那麼複雜嗎?其實很簡單的,如果你用jquery,乙個getjson方法就搞定了,而且是一行 搞 定。下面開始...
jquery跨域問題
js中函式請求外部系統後台方法時產生跨域問題 不在同一ip,不在同一埠,不用同一協議,滿足其一構成跨域 jquery get 能輕鬆解決跨域問題,post不能跨域 function test 第二種形式 需要加callback引數 伺服器端 public void test this.respons...