方法的實(shí)質(zhì)就是Function的實(shí)例(對(duì)象)方法懒鉴,即是類也是對(duì)象爬虱。
Dom對(duì)象與jQuery對(duì)象的區(qū)別:
DOM對(duì)象:通過(guò)原生js獲取的DOM元素拱燃,就是DOM對(duì)象秉溉;
jQuery對(duì)象:通過(guò)$(“”)的方式獲取的$元素,就是一個(gè)jQuery對(duì)象,里面封裝了很多操作方法召嘶。
1.通過(guò)jQuery方法包裝后的對(duì)象父晶,是一個(gè)類數(shù)組對(duì)象。它與DOM對(duì)象完全不同弄跌,唯一相似的是它們都能操作DOM甲喝。
2.通過(guò)jQuery處理DOM的操作,可以讓開發(fā)者更專注業(yè)務(wù)邏輯的開發(fā)铛只,而不需要我們具體知道哪個(gè)DOM節(jié)點(diǎn)有那些方法埠胖,也不需要關(guān)心不同瀏覽器的兼容性問(wèn)題,我們通過(guò)jQuery提供的API進(jìn)行開發(fā)淳玩,代碼也會(huì)更加精短直撤。
jQuery是封裝后的js類數(shù)組對(duì)象,而DOM對(duì)象是一個(gè)簡(jiǎn)單的dom元素
將jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象的兩種方法:
方法一:
var $div=$("div");
var div=$div[0];
div.style.color("red");
方法二:通過(guò)get方法進(jìn)行轉(zhuǎn)換(get是jQuery中封裝后的方法)
var $div=$("div");
var div=$div.get(0);
div.style.color("red");
將DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象:
var div=getElementById("#div1");
var $first=$div.first;
$first.css('color','red');
選擇器之間的關(guān)系:
parent>children? ?子代選擇器蜕着,parent下面的子代谋竖;
parent child? ? ? 后代選擇器,可以跟著兒子?孫子?真孫承匣,只要是在parent下面的就可以
sister+brother? ?相鄰選擇器? 是兄弟姐妹關(guān)系
"prev ~ siblings"
一般兄弟選擇器:匹配“prev”元素之后的所有 兄弟元素蓖乘。具有相同的父元素,并匹配過(guò)濾“siblings”選擇器
基本的篩選選擇器
$(".div1:first");? ? ? ? ? ? ? ? ? ?匹配第一個(gè)元素
$(".div1:last");? ? ? ? ? ? ? ? ? ?匹配最后一個(gè)元素
$(".div1:not(div)");? ? ? ? ? ? ?過(guò)濾韧骗,匹配所有不包含某個(gè)元素的元素
$(".div1:eq(index)");? ? ? ? ? 下標(biāo)索引等于幾的元素
$(".div1:gt(index)");? ? ? ? ? ? 下標(biāo)索引大于幾的元素
$(".div1:even");? ? ? ? ? ? ? ? ? ?下標(biāo)索引為偶數(shù)的元素嘉抒,從0開始計(jì)
$(".div1:odd");? ? ? ? ? ? ? ? ? ? ? ??下標(biāo)索引為奇數(shù)的元素,從0開始計(jì)
$(".div1:lt(index)");? ? ? ? ? ? 下標(biāo)索引小于幾的元素
$(".div1:header");? ? ? ? ? ? 匹配標(biāo)題標(biāo)簽的元素
$(".div1:lang(language)");? 匹配指定語(yǔ)言的元素
$(".div1:animated");? ? ? ? ? ? ? 匹配正在執(zhí)行動(dòng)畫的元素
內(nèi)容篩選選擇器
$(":contains(text)")? ? ? ? ? ? ? ?匹配包含指定文本的元素
$(":parent")? ? ? ? ? ? ? ? ? ? ? ? ?匹配所有含有子元素或者文本的元素
$(":empty")? ? ? ? ? ? ? ? ? ? ? ? ? 匹配所有不含有子元素或者文本?的元素
$(":has(selector)")? ? ? ? ? ? ? ? 匹配含有指定選擇器的元素
可見(jiàn)性篩選選擇器
$(":visible")? ? ? ? ?匹配顯示元素
$(":hidden")? ? ? ? ?匹配隱藏元素
CSS中隱藏元素的方式有以下6種:
1.CSS display的值是none宽闲。
2.type="hidden"的表單元素众眨。
3.寬度和高度都顯式設(shè)置為0。
4.一個(gè)祖先元素是隱藏的容诬,該元素是不會(huì)在頁(yè)面上顯示
5.CSS visibility的值是hidden
6.CSS opacity的指是0
屬性篩選選擇器
子元素篩選選擇器
jQuery中的屬性與樣式之.attr()與.removeAttr()
attr()有4個(gè)表達(dá)式
attr(傳入屬性名):獲取屬性的值
attr(屬性名, 屬性值):設(shè)置屬性的值
attr(屬性名,函數(shù)值):設(shè)置屬性的函數(shù)值
attr(attributes):給指定元素設(shè)置多個(gè)屬性值娩梨,即:{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }
removeAttr()刪除方法
.removeAttr( attributeName ) : 為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性(attribute)
.html()與.text()方法
.html()
獲取集合中第一個(gè)匹配元素的HTML內(nèi)容 或 設(shè)置每一個(gè)匹配元素的html內(nèi)容,具體有3種用法:
.html() 不傳入值览徒,就是獲取集合中第一個(gè)匹配元素的HTML內(nèi)容
.html( htmlString )? 設(shè)置每一個(gè)匹配元素的html內(nèi)容
.html( function(index, oldhtml) ) 用來(lái)返回設(shè)置HTML內(nèi)容的一個(gè)函數(shù)
.text()
得到匹配元素集合中每個(gè)元素的文本內(nèi)容結(jié)合狈定,包括他們的后代,或設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容习蓬。纽什,具體有3種用法:
.text() 得到匹配元素集合中每個(gè)元素的合并文本,包括他們的后代
.text( textString ) 用于設(shè)置匹配元素內(nèi)容的文本
.text( function(index, text) ) 用來(lái)返回設(shè)置文本內(nèi)容的一個(gè)函數(shù)