JQuery簡(jiǎn)介
- jQuery 是一個(gè) JavaScript 庫(kù)。
- jQuery 極大地簡(jiǎn)化了 JavaScript 編程。
- jQuery 很容易學(xué)習(xí)。
JQ庫(kù)類(lèi)型說(shuō)明
完全版jquery-1.4.js 用于測(cè)試和開(kāi)發(fā)（未壓縮，可讀代碼）
壓縮版jquery-1.4.min.js 用于實(shí)際的網(wǎng)站中，已被精簡(jiǎn)和壓縮
JQ引入
可以在線(xiàn)引入
也可以下載本地引入
頁(yè)面載入
$(document).ready(function(){});
可以簡(jiǎn)寫(xiě)：$(function(){});
與window.onload的區(qū)別
DOM對(duì)象轉(zhuǎn)換為Jquery對(duì)象
$(dom對(duì)象) ==》 jquery對(duì)象
jq選擇器
-
基本選擇器
image.png -
層次選擇器
image.png 過(guò)濾選擇器
過(guò)濾選擇器主要是通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選出需要的DOM元素击罪，過(guò)濾規(guī)則與CSS中的偽類(lèi)選擇器語(yǔ)法相同，即過(guò)濾選擇器都是以冒號(hào)(:)開(kāi)頭贪薪。-
過(guò)濾選擇器分類(lèi)：
1.基本過(guò)濾選擇器
image.png2.內(nèi)容過(guò)濾選擇器
image.png3.可見(jiàn)性過(guò)濾選擇器
image.png4.屬性過(guò)濾選擇器
image.png5.子元素過(guò)濾選擇器
image.png
image.png
6.表單對(duì)象屬性過(guò)濾選擇器
-
表單選擇器
image.png 特殊選擇器this
this是JavaScript中的關(guān)鍵字媳禁，指的是當(dāng)前的上下文對(duì)象。在js中this是動(dòng)態(tài)的画切，可以通過(guò)call(),apply()等方法改變指向竣稽。
在jquery中需要把this加工成jquery對(duì)象。
$this=$(this)
this表示當(dāng)前的上下文對(duì)象是一個(gè)html的DOM對(duì)象霍弹，可以調(diào)用html對(duì)象所擁有的屬性和方法毫别。$(this)代表的上下文對(duì)象是一個(gè)jquery的上下文對(duì)象，可以調(diào)用jquery的方法和屬性典格。
jQuery中的方法
show()
顯示隱藏的匹配元素岛宦，可帶整數(shù)參數(shù)表示時(shí)間， 單位是毫秒耍缴。hide()
隱藏顯示的匹配元素砾肺。可帶整數(shù)參數(shù)表示時(shí)間防嗡， 單位是毫秒变汪。css(name, value)
給匹配的元素設(shè)置csstext(string)
獲取或設(shè)置匹配元素的文本內(nèi)容， 不含html標(biāo)簽filter(expr)
刷選出與指定表達(dá)式匹配的元素集合本鸣，其中expr可以是多個(gè)選擇器的組合疫衩。addClass(class)
為匹配的元素增加一個(gè)類(lèi)樣式removeClass(class)
為匹配的元素移除一個(gè)類(lèi)樣式html()
獲取或設(shè)置匹配元素的內(nèi)容硅蹦，包含html標(biāo)簽siblings()
$(".abc").siblings()匹配得到class = abc的其它兄弟元素設(shè)置單條樣式
.css(“屬性名”荣德，”屬性值”)設(shè)置多條樣式
.css({“屬性名1”:”屬性值1”,”屬性名2”:”屬性值2”,……})獲取樣式值
.css(“屬性名”)增加類(lèi) 可增加/刪除多個(gè)類(lèi)
.addClass(“類(lèi)名1 類(lèi)名2 ……”) 多個(gè)類(lèi)名之間用空格隔開(kāi)
.removeClass(“”)
.toggleClass(“”)
.toggleClass(“類(lèi)名”,true/false) 用來(lái)判斷樣式類(lèi)添加還是移除的 布爾值操作元素中的內(nèi)容：
設(shè)置：
.html(“str”) 設(shè)置元素的里面的內(nèi)容 可用帶html標(biāo)簽 js中的innerHTML
.text(“str”) 設(shè)置元素的里面的內(nèi)容 可用不帶html標(biāo)簽 js中的innerText
.val(“str”) 設(shè)置表單的值 js中的value
.html(),.text()和.val()的差異總結(jié)：
1 .html(),.text(),.val()三種方法都是用來(lái)讀取選定元素的內(nèi)容闷煤；只不過(guò).html()是用來(lái)讀取元素的html內(nèi)容（包括html標(biāo)簽），.text()用來(lái)讀取元素的純文本內(nèi)容涮瞻，包括其后代元素鲤拿，.val()是用來(lái)讀取表單元素的"value"值。其中.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上
2.html()方法使用在多個(gè)元素上時(shí)署咽，只讀取第一個(gè)元素近顷；.val()方法和.html()相同，如果其應(yīng)用在多個(gè)元素上時(shí)宁否，只能讀取第一個(gè)表單元素的"value"值窒升，但是.text()和他們不一樣，如果.text()應(yīng)用在多個(gè)元素上時(shí)慕匠，將會(huì)讀取所有選中元素的文本內(nèi)容饱须。
3 .html(htmlString),.text(textString)和.val(value)三種方法都是用來(lái)替換選中元素的內(nèi)容，如果三個(gè)方法同時(shí)運(yùn)用在多個(gè)元素上時(shí)台谊，那么將會(huì)替換所有選中元素的內(nèi)容蓉媳。
4 .html(),.text(),.val()都可以使用回調(diào)函數(shù)的返回值來(lái)動(dòng)態(tài)的改變多個(gè)元素的內(nèi)容。
例如：
$('li').html(function(n){ return "被點(diǎn)擊的元素的索引值是"+n });
將會(huì)把所有l(wèi)i元素內(nèi)的內(nèi)容替換為返回值锅铅，并會(huì)把n值變成每個(gè)li對(duì)應(yīng)的索引值.
- show(speed,[callback]) / hide( speed,[callback] ) / toggle(speed,[callback])
參數(shù)：
speed： 設(shè)置顯示/隱藏時(shí)的速度值酪呻，可為fast，slow或毫秒值
callback：顯示或隱藏動(dòng)作完成后調(diào)用的函數(shù)
toggle()方法：該效果適用于通過(guò) jQuery 隱藏的元素盐须，或在 CSS 中聲明
display:none 的元素（但不適用于 visibility:hidden 的元素）
slideUp(speed,[callback] )
slideDown(speed,[callback] )
slideToggle()
fadeIn(speed,[callback] )
fadeOut(speed,[callback] )
fadeTo(speed,opacity,[callback]) //設(shè)置淡入淡出效果到一定的不透明度
fadeToggle()
filter() 方法將匹配元素集合縮減為匹配指定選擇器的元素玩荠。
例如：
$("ul li").filter(":contains('A1'), :contains('A2'), :contains('A3')").addClass("ABC");
