「鋭いjQuery」復習回顧-jQueryセレクタ&DOM操作
2441 ワード
1年ぶりに「鋭いjQuery」という本を振り返るには多くの方法が古典的だが、現在は各種MVXのフレームワークが人気があるため、普段はあまり使われていないので忘れられない.
1.jQueryオブジェクトとDomオブジェクトの相互回転
2.jQueryセレクタの完全な処理メカニズム
3.フィルター
3.1基本フィルタ
3.2サブエレメントフィルタセレクタ
3.3フォームオブジェクト属性フィルタ
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()スクロールバーが転がる距離
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()スクロールバーが転がる距離