樣式篇

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

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

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

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

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

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

基本篩選器
: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.一個祖先元素是隱藏的，該元素是不會在頁面上顯示
5.CSS visibility的值是hidden
6.CSS opacity的指是0         5.6兩種被認為是可見的，因為他們?nèi)匀徽加每臻g布局

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

在這么多屬性選擇器中[attr="value"]和[attr*="value"]是最實用的
[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

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

特殊選擇器this

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

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

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

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

回到頂部(go to top)

DOM篇

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

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

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

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

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

DOM節(jié)點刪除
通過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()方法:增加一個父元素
unwrap()：與wrap()相反
wrapAll()方法：給集合中的元素分別包裹
wrapInner()方法：可以理解成增加一個內(nèi)元素

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

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

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

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

each():
$("li").each(function(index, element) {
}):index是索引 △：從0開始；element:是對應的節(jié)點

回到頂部(go to top)

事件篇

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

click與dbclick事件

mousedown與mouseup事件：兩個合成click事件

mousemove事件

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

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

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

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

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

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

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

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

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

卸載事件off()方法

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

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

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

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

廣告

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