【學習筆記】鋒利的jQuery（一）選取器

標籤：style   blog   color   io   ar   strong   div   sp   cti   

一、要點闡述

1，jQuery建立於2006年1月的一個開源項目，強調理念是“write less,do more”，壓縮後大小30KB左右。、

2，jQuery裡的方法都被設計程自動操作對象集合，而非單獨的對象。

3，jq對象是jq對DOM對象進行封裝後產生的對象，是一個類似數組的對象，可用[0]或get(0)方法轉成DOM對象。

二、jQuery和其他js庫的衝突解決

//jq庫在其他庫之前置入時需調用noConflict()方式1(jQuery代替$)：jQuery.noConflict();  //把$的控制權交給其他庫。jQuery(function(){...});方式2($xhh代替$)：var $xhh = jQuery.noConflict();$xhh(function(){...});方式3(仍用$)：jQuery.noConflict();jQuery(function($){...});方式4(仍用$)：jQuery.noConflict();(function($){    $(function(){...});}){jQuery};//jq庫在其他庫之後匯入，用jQuery代替$jQuery(function(){...});

三、jQuery選取器

1，基本選取器和層次選取器

//基本選取器$("#id")$(".classname")$("p")$("*")  //選取所有$("#id,.classname,p") //選取多個//層次選取器$("div span")  //div的所有span後代$("div>span")  //div的子項目span$("div+span")  //等同於$("div").next("span")$("div~span")  //等同於$("div").nextAll("span")，注意區分.siblings()

2，過濾選取器

//基本過濾:first/:last  //等同於:eq(0)/:eq(len-1):not(selector)/:has(selector):even/:odd  :eq(index)/:gt(index)/:lt(index) //index從0開始//子項目過濾:nth-child(index/even/odd):first-child/:last-child:only-child   //選取其唯一的子項目//內容過濾:contains("xxx")  //包含有“xxx”的常值內容的元素:empty/:parent   //包括子項目的、不包括子項目的//表現形式過濾:header   //h1,h2,h3...標籤:animated :focus     //當前擷取焦點的元素:hidden   //包括<input type="hidden">,"display:none","visibility:hidden":visible    //屬性過濾div[id] div[class=classname]div[class!=classname]div[title^=value]       //屬性以value開始的divdiv[title$=value]       //屬性以value結束的divdiv[title*=value]       //屬性中含有value的divdiv[attribute1][attribute2]...  //多個屬性過濾

3，表單選取器和對應的過濾

表單選取器:input  //所有表單的元素，包括input,select,button...//選擇對應type屬性的表單元素:text:password:radio:checkbox:submit:image:reset:button:file:hidden  //比較特殊，選擇的是包括表單外的所有隱藏元素表單過濾:enabled/:disabled:checked:selected

4，jq常用的選擇方法

filter(selector)  //對本身進行篩選find(selector)   //在後代中篩選

 

【學習筆記】鋒利的jQuery（一）選取器