作者：燁竹

jQuery官網: http://jquery.com/

$(選擇器),可以通過各種途徑捕獲DOM對象

頁面就緒事件:
當頁面就緒(html元素)時,觸發(fā)的事件蟋字。$(document).ready(function(){})比window.onload更快觸發(fā),避免用戶等待資源加載.

頁面就緒事件
語法1:
        $(document).ready(function(){
            //頁面就緒時,執(zhí)行的代碼
  })
    語法2：
        $().ready(function(){
            //頁面就緒時,執(zhí)行的代碼
  })
    語法3：
        $(function(){
            //頁面就緒時,執(zhí)行的代碼
   })

選擇器

基本選擇器(4種)
1.通過ID捕獲 #id
2.通過class捕獲 .class
3.通過標簽名捕獲 tagname
4.分組選擇器: 選擇器1,選擇器2,選擇器3…

層級選擇器(4種)
層級也就是包含關系 父元素包含子元素
后代選擇器 空格 A空格B 表示匹配A后代中的B元素
子元素選擇器 > A>B 表示匹配A的子元素B
相鄰選擇器 + A+B 表示緊跟A元素的同級元素B
弟選擇器 ~ A~B匹配A的同級兄弟(但是在A之前的不能匹配)

簡單選擇器(8種)
把一些相對復雜的匹配邏輯,大幅度簡化
匹配第一個元素 :first
匹配最后一個元素 :last
匹配索引(從0開始)為偶數的元素 :even
匹配索引(從0開始)為奇數的元素 :odd
匹配特定索引 :eq(索引) equal
匹配索引大于某值 :gt(索引) greater than
匹配索引小于某值 :lt(索引) little than
淘汰某個元素 :not(選擇器) 不選中not中指定的元素

內容選擇器(4種)
根據內容捕獲dom對象
匹配是否包含某種文本內容 :contains(文本內容)
匹配含有特定子元素的父元素 :has(選擇器)
匹配空元素 :empty
匹配非空元素 :parent

可見性選擇器(2種)
根據元素是否可見進行捕獲
:hidden 匹配 display:none 和 type=”hidden” 等不可見的元素
:visible 匹配可見的元素

子元素選擇器(4種)
長子 :first-child
末子 :last-child
特定子元素 :nth-child(序號/even/odd) 序號從1開始
獨生子 :only-child

表單元素選擇器(10種)
:input 匹配所有表單元素(textarea和select)
:button 匹配type=”button”的元素
:checkbox 匹配type=”checkbox”的元素
:file 匹配type=”file”的元素
:image 匹配type=”image”的元素
:password 匹配type=”password”的元素
:reset 匹配type=”reset”的元素
:radio 匹配type=”radio”的元素
:submit 匹配type=”submit”的元素
:text 匹配type=”text”的元素
區(qū)分:
$(“input”) 捕獲所有input標簽
$(“:input”) 捕獲包括textarea和select在內的表單元素

表單屬性選擇器(4種)
:disabled 捕獲被禁用的表單元素
:enabled 捕獲未被禁用的表單元素
:selected 捕獲下拉選框中被選中的選項
:checked 捕獲單選框或復選框被勾選的選項

屬性選擇器(7種)
根據屬性的情況進行匹配
[attr] 匹配含有某個屬性的元素 $(“input[name]”)
[attr=value] 匹配含有某個屬性,并且屬性等于某個值的元素
[attr!=value] 匹配含有某個屬性,并且屬性不等于某個值的元素
[attr^=value] 匹配attr屬性值以value開始的元素
[attr$=value] 匹配attr屬性值以value結束的元素
[attr*=value] 匹配attr屬性值包含value的元素
[attr][attr][attr] 可以同時建立多個屬性選擇器表達式

jQuery對象與DOM對象
認清DOM對象

認清jQuery對象

jQuery對象轉換為DOM對象
由于jQuery對象是DOM對象的集合,加索引訪問,就能得到DOM對象

DOM對象轉換為jQuery對象
可以直接把DOM對象傳參進萬能方法$(dom對象)中,就可以得到jQuery對象

image.png

this的技巧

屬性操作

標簽屬性操作(3種)
標簽屬性指的是html標簽屬性 id name src
attr(name); attribute屬性 讀取名為name的屬性值
attr(name,value); 設置name屬性 值為value 只能設置一個值
attr({參數對象}); 批量設置屬性值

元素內容操作(6種)
一個元素的內容有三種:
普通元素的文本內容: text()
text(); 讀取文本內容
text(‘文本’); 寫入文本內容
普通元素的HTML內容: html()
html(); 讀取html內容
html(‘文本’); 寫入html內容
表單元素的value值: val()
val(); 讀取填寫的value值
val(‘文本’); 寫入填寫的value值

坐標屬性操作(2種)
樣式left和top屬性的改寫

offset(); 不給參數,讀取當前元素的坐標(返回一個含有l(wèi)eft和top的對象)
offset({
    left:設定的值,
    top:設定的值
}); 給參數,設置當前元素的坐標屬性 

尺寸屬性操作(4種)
尺寸屬性有兩種 width和height
width(); 不給參數,讀取當前元素的寬度
width(設置的值); 給參數,設置元素的寬度
height(); 不給參數,讀取當前元素的高度
height(設置的值); 給參數,設置元素的高度

樣式屬性操作(3種)
樣式屬性指的是css屬性
css(name); 給一個參數,就是讀取name這條樣式聲明的值
css(name,value); 給兩個參數,就是設置name這條聲明值為value
css({參數對象}); 通過參數對象,一次調用,批量設置

類屬性操作(4種)
類屬性就是指class屬性
removeClass(類名); 移除某個類屬性的值
hasClass(類名); 判斷當前元素是否具有一個類屬性,true false
addClass(類名); 為當前元素添加一個類屬性
toggleClass(類名); 切換類樣式

DOM操作

原生JS進行DOM增刪改查,手段比較單一
增: document.createElement
再把新元素追加到指定位置
父元素.appendChild(子元素)
父元素.insertBefore(新子元素,舊子元素)//和字符串的replace不同
str.replace(舊字符串,新字符串)
刪:父元素.removeChild(子元素)
改:父元素.replaceChild(新子元素,舊子元素)
查:4個方法 $()

內部插入節(jié)點(4種)
A.append(B); A和B都是jQuery對象 A追加B 把B追擊到A內部
A.appendTo(B); A追加到B 把A放到B的內部 可以用$(‘完整新標簽’)創(chuàng)建新節(jié)點
A.prepend(B); 把B節(jié)點追加到A節(jié)點的頭部
A.prependTo(B); 把A節(jié)點追擊到B節(jié)點的頭部

外部插入節(jié)點(4種)
A.after(B); 把B元素插入到A元素的后面
A.before(B); 把B元素插入到A元素的前面
A. insertAfter(B); 把A元素放到B元素的后面
A. insertBefore(B); 把A元素放到B元素的前面

刪除節(jié)點(2種)
刪除一個元素 刪自身 A.remove();
清空一個元素 刪內容 A.empty();

克隆節(jié)點(1種)
A.clone(); 該方法有返回值,是當前對象的副本(與本體不同) 默認不復制事件

A.clone(true); 復制DOM節(jié)點,并且復制事件
注意事項:原生JS綁定事件不會被復制

替換節(jié)點(2種)
A.replaceAll(B); 用A替換所有B
A.replaceWith(B); 用B替換所有A

捕獲A元素,作為整體肢娘。依次替換B集合中的節(jié)點.

包裹節(jié)點(4種)
A.wrap(B); 用B依次包裹A節(jié)點(包裹多次)
A.wrapAll(B); 用B包裹所有A節(jié)點(包裹一次)
A.unwrap(); 拆包 移除包裹著A元素的父元素
A.wrapInner(B); 用B元素包裹A的內容 A包裹內容

查找節(jié)點(8種)
由于$()方法獲取的是jQuery對象 包含很多DOM對象
$(選擇器).查詢方法() 目的是在jQuery對象中進一步篩選或匹配
A.eq(index); 匹配索引
A.not(B); 從A集合中去掉B集合元素

A.next(); 尋找緊跟著A的弟元素 $(“span+p”)
A.prev(); 尋找在A之前的兄元素
A.siblings(); 尋找所有與A平級的兄弟 $(“span~p”)弟選擇器
A.parent(); 尋找A的父節(jié)點
A.children(標簽名); 在匹配A的子元素
A.find(標簽名); 匹配A的某個后代元素
可以用于快速檢索xml數據
<root>。。风范。</root> $(xml) 把xml數據轉換成jQuery對象
$(xml).find(‘province’);

遍歷節(jié)點(1種)
jQuery對象作為一個集合,有專門的遍歷方法each
A. each(); 依次遍歷A集合中的元素,執(zhí)行一些代碼

  A.each(function(){
  //遍歷時要執(zhí)行的操作
  });
  A.each(function(index,obj){
  //遍歷時要執(zhí)行的操作
  //index代表正在遍歷的索引
  //obj代表正在遍歷的對象
  }); 

事件編程

jQuery事件類型
click
focus
blur
mouseover
mouseout
mousedown
mouseup
mousemove
keydown
keyup
keypress
change
submit
reset
load
unload
jQuery事件類型特征 不帶on
有一些jQuery中特有的事件類型
ready:頁面就緒事件
dblclick:double的縮寫dbl ,雙擊事件
hover: hover這個事件在鼠標進入時觸發(fā)一次,鼠標離開時又觸發(fā)一次
原生JS綁定: 事件主體dom.事件類型屬性 = 事件處理函數
jQuery綁定: 事件主體jq對象.事件類型方法(事件處理函數);

bind/unbind事件綁定卸載

A.bind(type[,data],callback);
    type:事件類型 字符串 不帶on  ‘click’
    [data]:可以傳入實參
    callback:事件處理程序

通過jQuery事件綁定,在事件觸發(fā)時,系統會自動傳入一個封裝過的event事件對象
事件對象中包含很多有用的屬性和方法:

jQuery底層已經封裝好了事件監(jiān)聽

A.unbind(type); 卸載A元素上所有類型為type的事件

one一次性事件綁定
一次性事件 只觸發(fā)一次的事件
比如:在表單中,用戶頁面加載時,為表單文本域里寫入一些提示信息
在用戶聚焦到文本域時,清空內部的所有值
這個清空功能,應該只觸發(fā)一次国拇。否則,會影響后續(xù)用戶對填寫的修改。

A.one(type[,data],callback);
    type:事件類型 字符串 不帶on  ‘click’
    [data]:可以傳入實參
    callback:事件處理程序

trigger手動觸發(fā)事件
原生JS綁定事件 dom.onclick = function(){}
//表單驗證時,在失去焦點時,檢查當前數據是否正確
input.onblur=function(){
//檢查正則或邏輯
}
//用戶可能在不觸發(fā)失去焦點事件的情況下,點擊提交表單
input.onblur();//手動調用
jQuery綁定事件:
$().blur(function(){
})
A. trigger(type); 手動觸發(fā)A元素綁定的類型為type的事件

event事件對象
event事件對象在原生JS中有兼容性問題:
W3C: dom.onclick = function(event){
}
IE: window.event
在jQuery中,event底層已經處理好了兼容性問題,統一按照自動傳參的形式,傳遞給事件處理程序

阻止事件冒泡
在原生JS中,事件冒泡有兼容性問題
jQuery底層已經封裝處理過了,統一 event.stopPropagation();

阻止默認行為
在原生JS中,存在兼容性問題
jQuery底層統一封裝處理了,方法 event.preventDefault();

jQuery對象高級操作

批量操作
對一個jQuery對象的操作,是對該jQuery集合中所有dom元素的操作

連貫操作
jQuery對象支持很多方法,大部分的方法,其返回值,依然是jQuery對象

image.png

存儲數據

jQuery中可以為jQuery對象存儲數據
存入 A.data(‘數據名’,‘數據值’); 存儲數據
讀取 A.data(‘數據名’); 讀取數據

插件拓展機制
jQuery功能固然強大,但是依然有限秘豹。如果有些需求,是jQuery中不具備的,允許我們人為添加額外功能。
jQuery.fn.extend({額外方法對象}); 為jQuery添加額外方法

each原理解析
A.each(function(){
//遍歷時執(zhí)行的代碼
});
each遍歷的特征:
1昌粤、 在回調函數中,this代表正在遍歷的dom對象

2既绕、 在遍歷時,回調函數會接收到兩個實參,第1個是正在遍歷的索引。第2個是正在遍歷的dom對象涮坐。
3凄贩、 可以在回調函數中,執(zhí)行一個return false,讓遍歷停止
利用插件拓展機制,模擬封裝遍歷函數,目的:了解each內部原理

動畫編程

動畫的概念
動畫,會動的畫。動畫應該由很多連續(xù)的,漸變的靜態(tài)的畫組成.
網頁上的動畫,只能有網頁元素來呈現,實際上應該分為以下三個方面:
尺寸變化袱讹、位置變化疲扎、樣式變化

以上代碼,勉強稱為動畫,但是不具備舒緩漸變的特質



自定義動畫
A.animate({參數對象}[,speed][,callback]);
網頁元素在動畫開始前,有初始狀態(tài)
網頁元素在動畫結束后,有結束狀態(tài)
參數對象就是在描述結束狀態(tài)的樣式
animate能夠讓網頁元素從初始狀態(tài),漸變到結束狀態(tài)

[,speed]可以以兩種形式設置動畫速度:
字符串: slow normal fast
毫秒數: 1000 5000 …
[,callback]在動畫執(zhí)行完畢時,調用的函數

隱藏/顯示
show([,speed][,callback]); 顯示
hide([,speed][,callback]); 隱藏
toggle([,speed][,callback]); 切換

下拉/上滑
slideDown([,speed][,callback]); 下拉
slideUp([,speed][,callback]); 上滑
slideToggle([,speed][,callback]); 切換

淡入/淡出
fadeIn([,speed][,callback]) 淡入(入場) 從透明逐漸變得不透明
fadeout([,speed][,callback]) 淡出(出場) 從不透明逐漸變得完全透明
fadeTo(speed,opacity) 淡化 把透明度變化到某種程度
opacity 樣式 設置透明度 0~1之間的小數

注意:如果執(zhí)行過淡化的動畫,設置過某個透明度。那么后續(xù)的淡入,無法恢復到完全不透明的狀態(tài),只能恢復到曾經設置的透明度

自制動畫插件
制作一個旋轉效果

由于animate的局限性,所以需要我們自己封裝一些強化插件

利用更高級的代碼技巧實現this的引用問題:

Ajax編程

ajax方法
$.ajax({參數對象});
該方法支持多達21種參數,常用的有5~9種
async : 是否異步 默認是
cache : 是否緩存 主要用于解決get緩存問題
content-type : 請求數據類型 post請求必要請求頭
complete : 完成 響應完成時觸發(fā)的事件 readyState==4
data : 請求數據 格式 a=10&b=20
datatype：期望的響應數據類型　text xml json jsonp
success : 成功 響應成功時觸發(fā)的事件 readyState==4&&status==200
type : 請求類型 get或post
url : 請求地址

ajax方法可設置的參數很多,可以作很詳細的設置,但是設置很麻煩.
如果進行常規(guī)通信,應該使用后面的get和post方法捷雕。
如果想要進行特別的通信,可以使用ajax方法進行專門定制椒丧。

get請求方法
$.get(請求地址,請求數據,回調函數,響應類型);

IE老版本依然存在緩存問題:

如何解決3種思路 4種方法:
1、 加隨機數
2救巷、 加時間戳
3壶熏、 設置請求頭 讓緩存強制過期
4、 設置響應頭 禁用緩存

post請求方法
$.post(請求地址,請求數據,回調函數,響應類型);

處理json數據
如果第4個參數傳入的json,期望響應數據格式是json,那么msg接收到的就是一個json數據對象,可以直接引用其屬性.

處理xml數據
如果第4個參數傳入xml,期望響應數據格式是xml,msg接收到的是一個xml文檔對象

可以用jQuery萬能方法,把文檔對象包裹起來,轉換成jQuery對象,可以使用jQuery相關方法浦译。find和children,根據標簽名尋找數據

處理跨域請求
跨域的手段有3種:
1久橙、 php代理跨域
2俄占、 jsonp 利用同源策略漏洞 img script src屬性不受同源策略限制
3、 cors 設置響應頭
回顧jsonp跨域的細節(jié):
1淆衷、 jQuery底層會給匿名回調函數起隨機函數名
2缸榄、 默認情況下傳遞函數名的get參數名 callback

3、 返回的響應:接收到回調函數的隨機函數名 調用,并傳參

4祝拯、 可以在匿名回調函數中,直接使用傳參數據

如果使用jsonp技術,datatype參數(第4個參數)被占用了.如果在跨域時,還需要使用xml和json數據怎么辦呢?

jsonp形式的響應類型是普通文本,所以在接收到數據后,還需要手動轉換一下

xml格式數據正好是完整的標簽,只要用萬能方法$()包裹,就變成創(chuàng)建jQuery對象.


load載入方法
load(請求地址);方法底層也是異步通信
發(fā)起一個異步請求,并且把響應內容填充到選中元素的文本內容中

其他額外插件(jQuery UI庫)

jQuery UI draggable

可拖拽的 可以讓網頁元素被自由拖拽


jQuery UI sortable
sortable自動排序
sortable 是基于draggable實現的
以項目列表為例:

connectWith 連接多個ul元素,允許互換項目成員
update 項目排序位置發(fā)生改變時,觸發(fā)的事件