前端學習筆記之jQuery選擇器一

一 jQuery基本概念

　　1.什麼是：第三方，快速，簡潔的javascript函數庫

　　2.爲何：

　　　　　（1）DOM操做的終極簡化：

　　　　　　　　學jquery仍是在學DOM，只不過API更簡單

　　　　　　　　核心DOM：萬能,API太繁瑣

　　　　　　　　HTML DOM：簡潔，不是萬能

　　　　　　jQuery簡化了：

　　　　　　1.DOM四大操做：查找，修改，刪除，添加

　　　　　　2.事件處理

　　　　　　3.動畫操做：

　　　　　　4.Ajax操做：

　　　　　（2）屏蔽瀏覽器兼容性問題：

　　　　　　凡是jQuery讓使用，都沒有兼容性問題

　　3.如何：

　　　　第三方：不是瀏覽器內置的，也不是開發人員本身編寫

　　　　由其它第三方組織或我的編寫的

　　　下載:jQuery.com

　　　　　　版本：1.x  兼容舊瀏覽器

　　　　　　　　jquery-1.x.js 爲壓縮版本  可讀寫好，體積大

　　　　　　　　　　　　----學習

　　　　　　　　jQuery-1.x.min.js 壓縮版本體積小，可讀性差

　　　　　　　　　　　　-----生產環境

　　　CDN網絡：內容分發網絡

　　　　共享的資源在網絡中多臺服務器上都有副本

　　　　客戶端請求資源時，CDN網絡會智能選擇離客戶端最近，網絡最近的服務器下載資源。

　　　爲何：就近快速得到資源

　　　什麼時候:只要公共的/通用的庫/框架到從CDN網絡中調用

　　　script src="http://CDN地址"

　　使用jQuery以前，必須先引入jQuery.js文件：

二  jQuery對象：

　1.什麼是：用jQuery工廠函數包裝jQuery簡化版API以前，都有將DOM對象包裝爲jQuery對象

　2.什麼時候：只要但願使用jquery簡化版API以前，都要將DOM對象包裝爲jquery對象

　3.如何：

　　　　(1).將現有DOM對象包裝爲jQuery對象

　　　　　　var $xxx = jQuery(DOM對象)

　　　　(2)什麼時候：如何已經得到了一個DOM對象，想用簡化版API。好比：this,  e.target,轉化爲jQuery對象

　　　　　　var $this=jQuery(this);

　　　　　　var $target = jQuery(e.target);

   4.直接用jquery工廠函數查找：

　　var $xxx= jquery("選擇器")

　　　什麼時候：絕對多數狀況，在未得到任何元素中，首選用jquery工廠函數直接查找元素。

　　引入jquery，js文件時：3件事：

　　　　（1）向window中添加了一個jquery工廠函數，用於建立Jquery類型的對象

　　　　（2）爲jquery工廠函數添加了一個原型對象

　　　　　　在jquery工廠函數的原型對象中封裝了全部簡化版API。

　　　　　　每次使用jquery工廠函數得到的jquery結果中對象繼承自jquery原型對象，可直接使用原型對象中保存的簡化版API

　　　　（3）向window中添加全局變量$，引用jquery工廠函數。——全部jquery均可用$代替。

問題：若是選擇器查找到多個元素，如何保存

　　其實:jquery對象是一個類數組對象

　　　　找到的每一個DOM對象都是類數組對象中的一個元素

　　　　且 Jqeury簡化版API都自帶forEach效果

　　　　只須要調用一次，便可自動應用到每一個DOM對象上

小知識：

　　　　chrome控制檯中也能夠使用$("選擇器")查找元素：

　　　　chrome控制檯也提供了$函數相似於jquery的$,但無需引入jquery也能夠使用。

　　　　如何；只查找一個:$("選擇器")至關於jquerySelector

　　　　　　　找多個:$$("選擇器")至關於querySelectorAll

一.查找

1.選擇器：css  jquery新增

　　基本:5個  同css

　　　#id  elemenet .class  *  selector1,selector2,...

　　層級:4個  通css

　　parent child  parent>son

　　prev + next  prev~siblings

實例：1.事件綁定:$(...)事件名(function(){...})

　　　2.修改css樣式：$（...）.css("css屬性名"，"值")

　　　　強調：對$(...)調用一次API,至關於自動對$(...)找到的每一個DOM元素分別調用API——自帶forEach

 

按選擇器查找：過濾選擇器

1.基本過濾 ：位置過濾--------jquery獨有， css沒有

　　什麼是：根據元素在查找結果集合中的下標位置選擇元素

　　強調：1.將全部元素查找到集合中 再按照下標過濾

　　　　　2.下標從0開始

               3.和元素在父元素中的相對位置無關

　　什麼時候使用：只要但願根據元素在結果集合中的位置查找元素

　　如何使用：

　　　　包括：

　　　　（1） elem(s):first/last  獲取結果集合中第一個/最後一個元素

　　　　（2） elem(s):even/odd  獲取結果結合中偶數/奇數位置的元素

　　　　（3） elem(s):lt/gt/eq(i)  獲取結果集合中小於/大於/等於i位置的元素

　　基本過濾中特殊： animated 選擇正在播放動畫的元素

　　　　（4） elem(s):animated

　　　　（5） elem(s):not(selector) 否認僞類，同css

　　練習過程當中的問題：

　　　　　一個 .css 只能設置一個css屬性

　　　　　解決： $(...). css({

　　　　　　　　css屬性 ：值，

　　　　　　　　     ...   :  ...

　　　　　});　

　　　　　強調：1.css屬性必須去橫線變駝峯

　　　　　強烈建議，只要在js中使用css屬性，都去橫線變駝峯

　　　　　　　　2.若是屬性值爲數字，可不加引號，且可省略單位

2.子元素過濾：同css

　　什麼是：根據元素在其父元素中的相對位置選擇

　　強調：1.序號從1開始

　　　　　2.序號相對於父元素內部編號

　　什麼時候：只要根據元素在其父元素中的位置選擇

　　如何： 包括：

　　　　　　（1）:first/last-child 獲取做爲其父元素下一個第一個子元素的全部元素

　　　　　　（2）:nth-child(n|2n|2n+1|eveb|odd)

　　　　　　（3）:only-child  獲取做爲獨生子女的子元素

3.內容過濾：根據元素的內容查找

　　：contains(tetx)   查找內容中包含tetx的元素

　　　　　好比：span:contains("購物車")

　　　　　強調：只能是文字中包含text的，若是是標籤中包含，則不選擇

　　　　　（1）：empty 查找內容爲空的元素

　　　　　（2）：parent 查找內容不爲空的元素   -> :not(:empty)

　　　　　　　　強調：只要包含內容(子元素或文本)就選擇

　　　　　　（3）：has(selector) 選擇包含符合selector要求的子元素的父元素

　　　　　　　　　　好比：li:has(.active) 選擇包含class爲active的子元素的父元素li

4.可見性過濾：

　　　　　　：hidden ：選擇全部不可見的元素

　　　　　　讓網頁不可見：4種：

　　　　　　　　display:none,

　　　　　　　　visibility:hidden,

　　　　　　　　opactiy:0

　　　　　　　　type="hidden"

　　　　　　可是：

　　　　　　　　：hidden只能選擇display :none 的type ="hidden"的

　　　　　　　　：visible :選擇全部可見的元素

5.屬性過濾：同css的屬性選擇器

　　　　什麼是：按照任意屬性的任意值選擇元素

　　　　什麼時候：只要按除id，元素，class以外的其餘屬性做爲條件查找時，甚至模糊查找時

　　　　如何：

　　　　　　[屬性名]  選擇包含指定屬性的元素

　　　　　　[屬性名 = 值]  選擇屬性的值等於指定值的元素

　　　　　　[屬性名 ^=值]  選擇屬性值以指定值開頭的元素

　　　　　　[屬性名$= 值]  選擇屬性值以指定值結尾的元素

　　　　　　[屬性名 *=值] 選擇屬性值包含指定值的元素

　　　　　　[屬性名 != 值] 選擇屬性值不等於指定值的元素

　　　　　　　　其實：：not([屬性名 !=值])

　　　　　　　　強調：即選擇包含title屬性，但值不符合

　　　　　　　　也選擇不包含title屬性的

　　　　　　特殊：且

　　　　　　　　[屬性選擇器1][屬性選擇器2]...

　　　　　　表單元素過濾：

　　　　　　什麼是:利用表單元素的標籤名和type屬性值選擇表單中元素

　　　　　　什麼時候：只要查找表單中的表單元素時

　　　　　　如何；包含：

　　　　（1）：input 選擇全部表單元素:inout selecttextarea button 

　　　　　　每種type都對應一個選擇器：

　　　　（2）：text：password :radio  :checkb  ox:submit:reset

　　　　　　:file  :button  :hidden :iamge

6.狀態過濾：

　　　　什麼是：選擇處於三大狀態之一的元素

　　　　什麼時候：只要根據元素的狀態選擇元素

　　　　如何：包含

　　　　（1）：disabled  

　　　　（2）：checked  

　　　　（3）:selected

　　　　　練習：問題 1:.css智能修改css屬性

　　　　　　　　　　　解決：.attr("屬性名"，"新值")

　　　　　　　　　　　可修改標準屬性

　　　　　　　　　　　.attr("屬性名")  獲取屬性值

　　　　　　總結：jquery API第二大特色：

　　　　　　　　一個函數兩用：沒提供新值，就讀取屬性現有的值

　　　　　　　　　　　　　　　提供了新值，就修改屬性爲新值

　　　　　　　　問題:2 attr 沒法訪問三大狀態屬性

　　　　　　　　解決：pop()專門操做三大狀態屬性

　　　　　　總結：

　　　　　　何時用選擇器查找

　　　　　　沒有任何元素，執行首次查找時