Jquery基礎第一天：jQuery對象 選擇器的使用

1. 什麼是:

jQuery是一個快速的，簡潔的javascript庫。

為什麼: 2個原因:

1. 對DOM的終極簡化:

核心DOM: 萬能，繁瑣

HTML DOM: 簡單，不是萬能

jquery: 4個方面提供了極簡化的操作

1. 查找和操作元素(增，刪，改，查)

2. 事件處理

3. 動畫效果

4. AJAX操作

2. 屏蔽了99%的瀏覽器兼容性問題

只要jquery允許使用的，都是沒有兼容性問題。

何時: 今後，絕大多數公司和前端框架都是利用jquery開發的。

口號: write less, do more

2. 如何使用:

版本:

1. 1.x: 特點: 兼容IE8

2個文件:

1. jquery-1.11.3.js: 未經壓縮的可讀性良好的js

2. jquery-1.11.3.min.js: 經過代碼壓縮的最小的js

去掉了所有註釋，空白字符，換行。。。

2. 2.x: 特點: 不再兼容IE8

環境準備:

1. zen coding(ZC)->勾選Tab to expend和use emmit

標籤名+Tab: 不全單個標籤的屬性和結束標籤

標籤名*n+Tab: 同時生成n個標籤，並不全屬性和結束標籤

標籤名#id值+Tab: 自動生成id屬性

標籤名.class值+Tab: 自動生成class屬性

標籤名[屬性名="值"]+Tab

標籤名#id值.class值+Tab: 自動生成id屬性和class屬性

父標籤>子標籤+Tab: 自動生成父元素和子元素

兄弟標籤+下一個兄弟標籤+Tab: 自動生成多個平級的兄弟

()可提高優先級+Tab！

2. 隨機生成一段假文: lorem+Tab

3. 常用快捷鍵:

Tools->preference->tools->key board->Edit

delete line: ctrl+d

duplicate line: ctrl+alt+↓

move up/donw : alt+↑/↓

line comment/uncomment: ctrl+/ ， ctrl+alt+/

如何使用jquery:

1. 引入jquery.js: <script src="jquery-1.11.3.js"></script>

強調: 必須在自定義script之前，先引入jquery.js

2. ***jQuery對象:

什麼是: 封裝一個/一組DOM元素，並提供對DOM元素執行操作的簡化版API 的類數組對象。

為什麼: 普通DOM對象無法使用jquery中簡化版API

只有jQuery對象才能使用！

何時: 只要調用任何jqueryAPI之前必須先獲得jQuery對象:

如何: 2種:

1. 先用DOMAPI獲得DOM對象，再用jQuery工廠函數生成一個jQuery對象

var $jQuery對象=jQuery(DOM對象)

jQuery/$函數也稱為工廠函數

2. 直接用jquery簡化版API查找，自動獲得的就是jQuery對象。

其實, jQuery可簡寫為$

萬一jquery不支持了，希望使用DOM原生API:

從jquery對象中取出DOM 對象:

var dom對象=$jq對象.get(i)

鄙視: DOM對象 vs jq對象

DOM對象: 由W3C的DOM標準規定的，瀏覽器廠商負責實現的現成對象。

使用DOM API —— 萬能，繁瑣

jq對象: 由第三方jquery.js庫定義的，並提供了簡化操作DOM的API的 類數組對象

使用jQuery API——終極簡化, 解決瀏覽器兼容性問題

兩套API無法通用！

3. ***選擇器:

今後，都是先找元素，再調用jqueryAPI操作元素

只要用jquery找元素，都用選擇器！

用jquery查找元素，返回的直接就是jquery對象，無需再封裝

如何: var $jq對象=$("選擇器")

基本選擇器: 5個: #id .class elem * 選擇器1,選擇器2,...

層級選擇器: 4個: 選擇器1 選擇器2 > + ~

練習: jQuery事件綁定: $("selector").事件名(function(){...})

訪問元素的css樣式:

$("selector").css("css屬性名")

讀取選中元素的css屬性

$("selector").css("css屬性名",值)

修改選中元素的css屬性為"值"

強調: jquery多數簡化版API都自帶forEach功能:

$("selector").css("css屬性名",值)

相當於對找到的每個元素都執行css操作！

$("selector").事件名(function(){...})

相當於對找到的每個元素都綁定事件！

過濾選擇器: 通過特定的過濾規則篩選出所需的DOM元素

包含: 基本過濾(位置過濾), 內容過濾, 可見性過濾,

屬性過濾, 子元素過濾和表單過濾

***基本過濾: 位置過濾。根據元素在查找結果中的位置來選擇

何時: 只要選擇特定位置的元素時，都用基本過濾選擇器

強調: 和css中的:first-child...偽類完全不一樣！

包括:

:first 選擇查找結果中排在第一個位置的元素

不考慮元素在父元素下的位置，僅考慮在jquery對象中的下標位置。

vs :first-child 作為父元素下第一個子元素的元素

:last 選擇查找結果中排在最後位置的一個元素

vs :last-child 作為父元素下最後一個子元素的元素

:even/odd: 選擇查找結果中排在偶數或奇數位置的元素

下標從0開始:

vs :nth-child(even): 下標從1開始

作為父元素下偶數位置的子元素

:eq(i): 選擇查找結果中i位置的一個元素，i從0開始

vs :nth-child(i): 下標從1開始

作為父元素下第i個子元素

:gt(i): 選擇查找結果中i位置之後的所有元素

:lt(i): 選擇查找結果中i位置之前的所有元素