Dom物件和jQuery包裝集的基本概念

2021-05-18 05:09:30 字數 3556 閱讀 4256

1、選擇器區別「dom物件」還是「jquery包裝集」:

var v=document.getelementbyid(「header」);       //dom

var vs=document.getelementbytagname(「div」); //dom

var jqobj=$(「#header」);            //jquery包裝集

var jqobj=jquery(「#header」);    //jquery包裝集,為防止與其它js框架的$衝突,不嫌麻煩可多寫幾個字

2、dom物件轉jquery包裝集:

var domdiv=document.getelementbyid(「header」);  //domdiv是個dom元素

var domtojqueryobj=$(domdiv);  //domtojqueryobj是乙個jquery包裝集,從domdiv中轉來

3、jquery包裝集轉dom物件:

jquery包裝集是乙個集合,通過索引器訪問其中第乙個元素。通過索引器返回的不再是jquery包裝集,而是乙個dom物件。

var domdiv=jquery(「#header」)[0];

alert(domdiv.innerhtml); 

//再轉回jquery包裝集進行操作:

//$("#testdiv").each(function() )

$(domdiv).html(「hello」);//設定

4、基礎選擇器:

$(「#id」),元素id,

$(「.class」),元素css類名

$(「span」),元素名稱,即html標記名稱

$(「*」),選擇頁面所有元素,

$(「#id,.class,span」),選擇多個,選擇器用逗號分開

5、其它複雜選擇器和過濾器:

5.1、層次選擇:

(1)、祖先子孫選擇,$(「.class span」),空格號,

(2)、父子直接節點擊擇,$(「.mylist>li」),即類名為mylist的元素下的直接子節點li,大於號,

(3)、同級別元素後面的next元素,$(「#dttitle+dd」),加號,

(4)、prev後面的過濾元素,$(「#somediv~[title]」),somediv後面所有帶有title屬性的元素,波浪號

5.2、基本過濾器:

(1)、$(「tr:first」),查詢**的第一行

(2)、$(「tr:last」)

(3)、$(「input:not(:checked)」),所有未選中的input元素

(4)、$(「tr:even」),奇數行

(5)、$(「tr:odd」),偶數行

(6)、$(「tr:eq(1)」),給定索引值元素,從0開始,本例為第2行

(7)、$(「tr:gt(1)」),大於索引值的元素

(8)、$(「tr:lt(2)」),小於索引值的元素

(9)、$(「:header」),選擇h1,h2~h6一類的header標籤,$(「:header」).css(「color」,」#ccc」)

(10)、$(「:animated」),正在執行動畫的元素,

$(「#run」).click(function(),1000);

});5.3、內容過濾器

$(「div:contains(『包含文字』)」)

$(「td:empty」)

$(「div:has(『p』)」).addclass(「red」);包含p元素的div元素

$(「td:parent」),包含子元素或文字的元素,與empty有點相反的感覺(我自己加的)

5.4、可見性過濾器

$(「tr:hidden」),不可見

$(「tr:visible」),可見元素

5.5、屬性過濾器,中括號

$(「div[id]」),含有id屬性的div元素

$(「input[type=』checkbox』]」).attr(「checked」,true),

$(「input[type!=』checkbox』]」).attr(「checked」,true),

$(「input[name^=』news』]」),屬性名name以news開頭,與正規表示式的開頭一樣

$(「input[name$=』letter』]」),屬性名name以letter結束,與正規表示式的結束一樣

$(「input[name*=』girl』]」),屬性名name包含girl

復合屬性選擇器:$(「input[id][name$=』boy』]」),包含id屬性並且name以boy結束的input標記

5.6、子元素過濾器

$(「ul li:nth-child(2)」),在每個 ul 查詢第 2 個li;

$(「ul li:first-child」),在每個 ul 中查詢第乙個 li;

$(「ul li:last-child」),在每個 ul 中查詢最後乙個 li;

$(「ul li:only-child」),在 ul 中查詢是唯一子元素的 li;

5.7、表單選擇器

$(「:input」),所有input元素,有input,textarea,select,button

$(「:text」),所有文字框

$(「:password」),所有密碼框

$(「:radio」),所有單選按鈕

$(「:checkbox」),所有核取方塊

$(「:submit」),所有提交按鈕

$(「:image」),所有影象域

$(「:reset」),所有重置按鈕

$(「:button」),所有按鈕

$(「:file」),所有檔案域

5.8、表單過濾器

$(「input:enabled」),可用

$(「input:disabled」),不可用

$(「input:checked」),核取方塊和單選框,不包括select中的option

$(「input:selected」),所有選中的option元素,$(「select option:selected」)

jQuery物件和DOM物件

jquery 物件就是 通過 jquery 包裝 dom 物件後產生的物件或者 選擇器 產生的物件 jquery 物件是 jquery 獨有的.如果乙個物件是 jquery 物件,那麼它就可以使用 jquery 裡的方法 persontab html jquery 物件無法使用 dom 物件的任何方...

dom物件和jquery物件

剛開始學習 jquery 可能一時會分不清楚哪些是jquery物件,哪些是dom物件。至於dom物件不多解釋,我們接觸的太多了,下面重點介紹一下jquery,以及兩者相互間的轉換。什麼是jquery物件?就是通過jquery包裝dom物件後產生的物件。jquery物件是jquery獨有的,其可以使用...

Dom物件和JQuery物件

剛開始學習 jquery 可能一時會分不清楚哪些是jquery物件,哪些是dom物件。至於dom物件不多解釋,我們接觸的太多了,下面重點介紹一下jquery,以及兩者相互間的轉換。什麼是jquery物件?就是通過jquery包裝dom物件後產生的物件。jquery物件是jquery獨有的,其可以使用...