樣式篇

$(document).ready 的意思是等頁面的文檔（document）中的節(jié)點(diǎn)都加載完畢后，在執(zhí)行后續(xù)的代碼;

創(chuàng)新互聯(lián)專注網(wǎng)站設(shè)計(jì),以設(shè)計(jì)驅(qū)動(dòng)企業(yè)價(jià)值的持續(xù)增長(zhǎng),網(wǎng)站，看似簡(jiǎn)單卻每一個(gè)企業(yè)都需要——設(shè)計(jì)，看似簡(jiǎn)潔卻是每一位設(shè)計(jì)師的心血 十載來，我們只專注做網(wǎng)站。認(rèn)真對(duì)待每一個(gè)客戶，我們不用口頭的語言來吹擂我們的優(yōu)秀，近1000家的成功案例見證著我們的成長(zhǎng)。

jQuery對(duì)象轉(zhuǎn)化成DOM對(duì)象：
jQuery是一個(gè)類數(shù)組對(duì)象，DOM對(duì)象就是一個(gè)單獨(dú)的DOM元素。
jQuery自帶的get()方法：轉(zhuǎn)換為DOM對(duì)象

DOM對(duì)象轉(zhuǎn)化成jQuery對(duì)象：$

基本選擇器：id選擇器 類選擇器 元素選擇器

層級(jí)選擇器：
子選擇器：$('div > p') 選擇所有div元素里面的第一個(gè)子元素P
后代選擇器：$('div p').css("border", "1px groove red");
相鄰兄弟選擇器：(".prev+div")選取prev后面的第一個(gè)的div兄弟節(jié)點(diǎn)一般相鄰選擇器：(".prev+div")選取prev后面的第一個(gè)的div兄弟節(jié)點(diǎn)一般相鄰選擇器：(".prev ~ div")選取prev后面的所有的div兄弟節(jié)點(diǎn)

基本篩選器
:first/:last/:even/:odd 注意jQuery合集都是從0開始索引 :even偶數(shù) :odd奇數(shù)
:eq/:gt/:lt  :gt大于 :lt小于

內(nèi)容篩選器
:contains/:has    （contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素）
:parent/:empty

可見性篩選選擇器
:visible/:hidden

隱藏
1.CSS display的值是none。
2.type="hidden"的表單元素。
3.寬度和高度都顯式設(shè)置為0。
4.一個(gè)祖先元素是隱藏的，該元素是不會(huì)在頁面上顯示
5.CSS visibility的值是hidden
6.CSS opacity的指是0         5.6兩種被認(rèn)為是可見的，因?yàn)樗麄內(nèi)匀徽加每臻g布局

屬性篩選選擇器
[att=val]、[att]、[att|=val]、[att~=val] [att^=val]、[att*=val]、[att$=val]、[att!=val]

在這么多屬性選擇器中[attr="value"]和[attr*="value"]是最實(shí)用的
[attr="value"]能幫我們定位不同類型的元素，特別是表單form元素的操作，比如說input[type="text"],input[type="checkbox"]等
[attr*="value"]能在網(wǎng)站中幫助我們匹配不同類型的文件

子元素篩選選擇器
:first-child、:last-child、:only-child、:nth-child、:nth-last-child

表單元素選擇器
input、text、password、radio、checkbox、submit、p_w_picpath、reset、button、file

表單對(duì)象屬性篩選選擇器
enabled、disabled checked、selected(option)

特殊選擇器this

.attr() .removeAttr()
1.attr(傳入屬性名)：獲取屬性的值
2.attr(屬性名, 屬性值)：設(shè)置屬性的值
3.attr(屬性名,函數(shù)值)：設(shè)置屬性的函數(shù)值
4.attr(attributes)：給指定元素設(shè)置多個(gè)屬性值，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }

.html() .text() .val()
.html處理的是元素內(nèi)容，.text處理的是文本內(nèi)容,.val()是用來處理表單

.addClss():添加一個(gè)樣式類名到元素上
.removeClass():刪除樣式
.toggleClass():結(jié)合上面兩點(diǎn)

樣式操作.css()
獲取：
.css( propertyName ) ：獲取匹配元素集合中的第一個(gè)元素的樣式屬性的計(jì)算值
.css( propertyNames )：傳遞一組數(shù)組，返回一個(gè)對(duì)象結(jié)果
設(shè)置：
.css(propertyName, value )：設(shè)置CSS
.css( propertyName, function )：可以傳入一個(gè)回調(diào)函數(shù)，返回取到對(duì)應(yīng)的值進(jìn)行處理
.css( properties )：可以傳一個(gè)對(duì)象，同時(shí)設(shè)置多個(gè)樣式

回到頂部(go to top)

DOM篇

jQuery節(jié)點(diǎn)創(chuàng)建
:$("<div id='test' class='aaron'>我是文本節(jié)點(diǎn)</div>")

DOM節(jié)點(diǎn)插入
內(nèi)部插入append()與appendTo()
:目標(biāo)的位置不同

通過before與after添加元素（內(nèi)容在后，元素在前）
:before,在匹配元素之前增加多參數(shù)、after,在匹配元素之前增加多參數(shù)

通過prepend與prependTo添加元素（目標(biāo)位置不同）
：prepend()向每個(gè)匹配的元素內(nèi)部前置內(nèi)容；append()向每個(gè)匹配的元素內(nèi)部追加內(nèi)容

通過insertBefore與insertAfter添加元素（內(nèi)容在前，元素在后）

DOM節(jié)點(diǎn)刪除
通過empty移除元素
：移除內(nèi)容，但是id，class屬性沒有刪除

通過remove移除元素
: 移除內(nèi)容和屬性

保留數(shù)據(jù)的刪除操作detach()

DOM拷貝clone()
//clone處理一：("div").clone()//只克隆了結(jié)構(gòu)，事件丟失//clone處理二：("div").clone()//只克隆了結(jié)構(gòu)，事件丟失//clone處理二：("div").clone(true) //結(jié)構(gòu)、事件與數(shù)據(jù)都克隆

DOM替換replaceWith()和replaceAll()：
replaceWith:內(nèi)容在后面 replaceAll相反

DOM包裹wrap()方法:增加一個(gè)父元素
unwrap()：與wrap()相反
wrapAll()方法：給集合中的元素分別包裹
wrapInner()方法：可以理解成增加一個(gè)內(nèi)元素

jquery遍歷
children方法()：尋找第一級(jí)子元素
find方法()：尋找后代元素

parent方法()：向上查找一級(jí)
parents方法():向上查找多級(jí)找到符合條件的多個(gè)
closest()方法:向上查找多級(jí)找到最近的那個(gè)

next()方法：緊鄰的后面同輩元素的元素集合
prev()方法：緊鄰的前面同輩元素的元素集合
siblings()：每一個(gè)元素緊鄰的前面后面同輩元素

add()方法：往jQuery合集中添加一新的元素

each():
$("li").each(function(index, element) {
}):index是索引 △：從0開始；element:是對(duì)應(yīng)的節(jié)點(diǎn)

回到頂部(go to top)

事件篇

①鼠標(biāo)事件
<div id="test">點(diǎn)擊觸發(fā)<div>
$("#text").click(11111,function(e) {
//this指向 div元素
//e.date => 11111 傳遞數(shù)據(jù)
});

click與dbclick事件

mousedown與mouseup事件：兩個(gè)合成click事件

mousemove事件

mouseover與mouseout事件
mouseenter與mouseleave事件:和上一種的區(qū)別冒泡的方式處理問題（不支持冒泡）
hover事件：mouseenter事件和mouseleave事件合起來

②表單事件
focusin事件：當(dāng)一個(gè)元素或內(nèi)部任何一個(gè)元素獲得焦點(diǎn)的時(shí)候
focusout事件：當(dāng)一個(gè)元素，或者其內(nèi)部任何一個(gè)元素失去焦點(diǎn)的時(shí)候

focus與blur事件：不支持冒泡，focusin與focusout支持冒泡

change事件：可以監(jiān)聽<input> <select> <textarea>改變的動(dòng)作

select事件：只用于<input>元素與<textarea>元素

submit事件：（例如：驗(yàn)證表單輸入的正確性，如果錯(cuò)誤就阻止提交，從新輸入）
return false; //阻止提交

keydown()與keyup()事件:鍵盤按下與松手

on()的多事件綁定:
多個(gè)事件綁定同一個(gè)函數(shù):("#elem").on("mouseover mouseout",function(){ }); 多個(gè)事件綁定不同函數(shù)("#elem").on("mouseover mouseout",function(){ }); 多個(gè)事件綁定不同函數(shù)("#elem").on({
mouseover:function(){},
mouseout:function(){},
});

on()的高級(jí)用法:委托機(jī)制 $("div").on("click","p",fn)

卸載事件off()方法

jQuery事件對(duì)象:event.target
jQuery事件對(duì)象的屬性:
event.type：獲取事件的類型 event.pageX 和 event.pageY event.stopPropagation() 方法：阻止事件冒泡

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享標(biāo)題：jQuery基礎(chǔ)總結(jié)-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://chinadenli.net/article2/dgpsic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、自適應(yīng)網(wǎng)站、定制開發(fā)、網(wǎng)站策劃、ChatGPT、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)