16-0920 day01
1. 什么是jQuery:
快速的，簡(jiǎn)潔的JavaScript庫
為什么使用JQuery:
1. DOM操作的終極簡(jiǎn)化:
核心DOM: 萬能，API繁瑣
HTML DOM: 簡(jiǎn)潔，不是萬能
jQuery:
終極簡(jiǎn)化:
①增刪改（內(nèi)容,屬性,樣式）查
②事件處理: 簡(jiǎn)化和兼容性
③動(dòng)畫操作:
④AJAX操作:
2. 屏蔽瀏覽器兼容性問題:
總結(jié): 終極簡(jiǎn)化——write less, do more
2. 如何使用:
2.1. 版本:
1.11.x: 兼容IE8
jquery-1.11.3.js 未壓縮版本-可讀性好，便于學(xué)習(xí)，但文件大，不便于網(wǎng)絡(luò)傳輸
jquery-1.11.3.min.js 壓縮版本-文件小，便于網(wǎng)絡(luò)傳輸，但是可讀性差，不便于學(xué)習(xí)——開發(fā)用
2.xx.x: 不在兼容IE8
2.2. 手冊(cè):
2.3. 編程步驟: 2步:
- 將jquery-1.11.3.js文件保存在當(dāng)前項(xiàng)目的文件夾下
- 在html頁面的body元素底部引入jquery-1.11.3.js文件(強(qiáng)調(diào): 在自定義腳本之前引入)
2.4. jQuery對(duì)象:
什么是: 封裝找到的DOM對(duì)象，并提供操作DOM對(duì)象的簡(jiǎn)化版的API，的類數(shù)組對(duì)象
鄙視題: DOM對(duì)象 vs jQuery對(duì)象的區(qū)別
DOM對(duì)象: 由W3C標(biāo)準(zhǔn)規(guī)定的，瀏覽器廠商已經(jīng)實(shí)現(xiàn)的，使用DOM API的標(biāo)準(zhǔn)對(duì)象(優(yōu): 萬能；缺: 繁瑣)
jQuery對(duì)象: 由jQuery.js函數(shù)庫定義的第三對(duì)象/API
DOM對(duì)象的API和jQuery對(duì)象的API不通用！
今后，只要使用jquery，都要先獲得jquery對(duì)象:
- 如何獲得jquery對(duì)象: 2種
- 先獲得DOM對(duì)象，再用$函數(shù)封裝到j(luò)Query對(duì)象
var $jQuery=$(DOM對(duì)象);
- 直接使用$函數(shù)查找到的DOM對(duì)象，被自動(dòng)封裝到一個(gè)jQuery對(duì)象中。
var $jQuery=$("selector");
- 強(qiáng)調(diào): 只有放入jQuery對(duì)象中的DOM對(duì)象，才能使用簡(jiǎn)化版API。
- 特殊: 萬一jQuery對(duì)象不支持某項(xiàng)功能:
從jQuery對(duì)象中取出DOM對(duì)象，使用原生DOM API
jQuery.get(i) 獲得i位置的DOM對(duì)象
3. 選擇器: jQuery支持幾乎所有CSS選擇器
提前:
綁定:
DOM: elem.addEventListener("事件名",fn);
jq: $("selector").事件名(fn);
修改樣式:
DOM: elem.style.css屬性名=值
jq: $("selector").css("css屬性名",值)
回顧選擇器:
1. 基本選擇器:
#id .class 元素 * 群組
2. 層次選擇器:
選擇器1 選擇器2
parent>child
前一個(gè)兄弟+后一個(gè)兄弟
前一個(gè)兄弟~之后所有兄弟
3. 過濾選擇器: 通過特定的過濾規(guī)則選出所需的DOM元素
包括: 基本過濾(新), 內(nèi)容過濾, 可見性過濾, 屬性過濾，子元素過濾， 表單過濾
3.1基本過濾: 也稱為位置過濾:
強(qiáng)調(diào): 位置: 指DOM元素在jQuery元素中的下標(biāo)位置
包含:
:first, :last,
:not(selector),
:even, :odd,
:eq(i)
:gt(i) :lt(i)
何時(shí): 只要選擇查詢結(jié)果中指定位置的元素時(shí)
vs first-child/last-child/nth-child(n)
何時(shí): 只要選擇指定父元素下的第幾個(gè)子元素時(shí)
3.2內(nèi)容過濾: （了解）
:contains(text) 比如: span:contains("購物車")
:empty 比如: span:empty 選擇內(nèi)容為空的span
:parent 比如: span:parent 選擇包含子內(nèi)容或元素的span ——是:empty的反義
:has(selector) 比如: div:has(.active) 選擇包含class為active的子元素的父元素div
3.3可見性過濾: （了解）
:visible 匹配所有可見的元素
:hidden 所有不可見元素
4種: css: display:none; visibility:hidden; opacity:0
html: type="hidden"
強(qiáng)調(diào): :hidden只能匹配 display:none; 和type="hidden"
3.4屬性過濾——其實(shí)就是css中的屬性選擇器
[屬性名] 匹配包含指定屬性的元素
[屬性名=值] 匹配指定屬性的值為指定值得元素
[屬性名!=值] 匹配指定屬性的值不是指定值得元素
[屬性名^=值] 匹配指定屬性的值以指定內(nèi)容開頭的元素
[屬性名$=值] 匹配指定屬性的值以指定內(nèi)容結(jié)尾的元素
[屬性名*=值] 匹配指定屬性的值包含指定內(nèi)容的元素
[屬性選擇器1][屬性選擇器2]... 匹配同時(shí)滿足屬性選擇器1，,2的元素
3.5子元素過濾:
包括: :first-child :last-child :nth-child(n) :only-child
選擇在父元素下作為指定為位置的子元素
位置相對(duì)于父元素而言。
vs 位置過濾: 選擇查詢結(jié)果集合中指定下標(biāo)位置的元素
和元素在其父元素下的位置無關(guān)
表單選擇器: 利用表單中元素標(biāo)簽和type屬性選擇表單中的元素
何時(shí):今后，只要選擇表單中的元素，都要用表單元素選擇器:
為什么: 代替DOM中的form.name
包括:
:input 選擇所有input textarea select button
vs input: 僅選擇input元素
:text 選擇type為text的元素
:password
:radio
:checkbox
:submit
:reset
:button
:file
:hidden
不僅選擇type="hidden"，還選擇display="none"
:image 選取所有圖形按鈕
3.5表單屬性過濾選擇器:
:enabled 選擇所有可用的元素
:disabled 選擇所有不可用的元素
:checked 選擇被選中的checkbox
:selected 選擇被選中的option
課堂練習(xí):
修改標(biāo)準(zhǔn)屬性: $("selector").attr("標(biāo)準(zhǔn)屬性名","值")
等效: getAttribute和setAttribute
所有這類方法，只要省掉第二個(gè)參數(shù)，就是讀取屬性值
***問題: attr只能獲取或設(shè)置元素開始標(biāo)簽中的attribute
無法獲取或設(shè)置不在開始標(biāo)簽中的property
解決: prop方法專門讀取內(nèi)存中對(duì)象的屬性
比如: checked屬性只能用prop讀取
