時隔一年再次回顧《鋒利的jQuery》這本書很多方法依然經典,只是現在各種MVX框架比較火,所以平時用的不多難免遺忘,現將這些以博客形式記錄,方便日后復習查看。
1.jQuery對象和Dom對象互轉
jQuery=>Dom ([index]或者get(index))
var $btn = $("#btn"); //jQuery對象
var btn1 = $btn[0] //Dom對象
var btn2 = $btn.get(0) //Dom對象
Dom => jQuery
> var btn3 = document.getElementById("btn"); //Dom對象
> var $btn4 = $(btn3); //jQuery對象
2.jQuery選擇器完善的處理機制
eg:給id為“tt”的元素(實際不存在)設置字體顏色為紅色
> var tt = document.getElementById("tt");
tt.style.color="red"; //瀏覽器報錯 tt不存在
正確的寫法為:
if(document.getElementById("tt")){
document.getElementById("tt").style.color="red";
}
而jQuery的寫法為:
$("#tt").css("color","red");
注意:jQuery獲取的永遠是對象,不能用于判斷元素是否存在,即錯誤的判斷方法:
if($('#tt')){
//do something
}
正確的姿勢應該是:
if($('#tt').length>0){
//do something
}
或者
if($('#tt')[0]){
//do something
}
3.過濾器
3.1基本過濾器
> :not(select) 去除匹配的元素
:even(index) 匹配索引為偶的元素(索引從0開始)
:odd(index) 匹配索引為奇的元素(索引從0開始)
:gt(index) 匹配索引大于index的元素(索引從0開始)
:lt(index) 匹配索引小于index的元素(索引從0開始)
:header 匹配標題元素h1-h6
3.2 子元素過濾選擇器
> :nth-child(index/even/odd/2n/3n+2) 匹配父元素下index或者偶或者奇等元素,index從1開始
:first-child 同理
:last-child
:only-child
3.3 表單對象屬性過濾
> :input //選取所有input textarea button select元素
> :text //選取所有單行文本框
> :password //密碼
> :checkbox //復選框
> :radio //單選框
> :submit //提交按鈕
> :reset //重置按鈕
> :image //圖片
> :button //所有按鈕
> :file //上傳域
> :hidden //隱藏元素
4.jQuery Dom操作
4.1 detach()方法
detach()方法和remove()一樣從dom中去掉匹配元素,但是不會從jQuery中刪除,detach會把元素綁定的事件,數據等保留下來再次使用
4.2 clone()方法
clone()克隆Dom結構
clone(true) 克隆Dom結構及其元素上綁定的事件
4.3 wrap() wrapAll() wrapInner()
wrap()將所有匹配的元素分開包裹,
wrapAll將所有匹配的元素一次性包裹,
wrapInner將元素包裹在內層,匹配元素在外層
4.4 CSS-Dom常用的定位方法
offset() 相對視窗的偏移
position() 最近的一個帶有絕對或者相對定位的父元素的偏移量
scrollTop() scrollLeft() 滾動條滾過的距離