日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

JQuery容易被忽略的知識(shí)點(diǎn),看看你不知道的有多少

 昵稱11935121 2018-06-26

JQuery,簡(jiǎn)單易學(xué)的JavaScript庫(kù),大伙們應(yīng)該不陌生吧,但越簡(jiǎn)單的東西,很多東西越容易被忽視掉。

下面介紹一些JQuery中往往容易被忽視的知識(shí)點(diǎn)(文章不會(huì)全方面介紹JQuery,以下大部分知識(shí),大家平常都用的相對(duì)較少,但卻不可忽視)~

0、js/jQuery入口函數(shù)

$(function() {

});

$(document).ready(function() {

});

的簡(jiǎn)寫形式

js入口:

window.onload = function() {

}

1、隱藏/顯示/隱藏顯示切換

// 隱藏、顯示

$(selector).hide(speed, callback);

$(selector).show(speed, callback);

$(selector).toggle(speed, callback);

// 淡入、淡出

$(selector).fadeIn(speed, callback);

$(selector).fadeOut(speed, callback);

$(selector).fadeToggle(speed, callback);

$(selector).fadeTo(speed, opacity callback); // 第2個(gè)參數(shù)為透明值,透明值從1漸變到opacity

// 滑入、滑出

$(selector).slideDown(speed, callback);

$(selector).slideUp(speed, callback);

$(selector).slid(speed, callback);

重點(diǎn)在于方法里面的2個(gè)參數(shù):

speed:顯示/隱藏速度,填入毫秒數(shù),有一種動(dòng)畫的效果

callback:執(zhí)行完后,回調(diào)的函數(shù)(輸入需要回調(diào)的函數(shù)名稱,不要加括號(hào))

JQuery容易被忽略的知識(shí)點(diǎn),看看你不知道的有多少

JQuery容易被忽略的知識(shí)點(diǎn),看看你不知道的有多少

JQuery容易被忽略的知識(shí)點(diǎn),看看你不知道的有多少

2、動(dòng)畫:

// 動(dòng)畫

$(selector).animate({params},speed,callback);

// 停止動(dòng)畫,在播放動(dòng)畫的途中,可以停止動(dòng)畫

$(selector).stop();

params:形成動(dòng)畫的CSS屬性,例如:{left: '100px', top: '100px'}

speed:動(dòng)畫的時(shí)間

callback:回調(diào)函數(shù)

JQuery容易被忽略的知識(shí)點(diǎn),看看你不知道的有多少

3、JQuery鏈:

一般我們是一次寫一條jquery語(yǔ)句,jquery里面有一種“鏈”,在相同的元素下,運(yùn)行多條命令

如:$(selector).hide(1000).show(1000);

優(yōu)點(diǎn):瀏覽器就不必多次查找相同的元素了

4、元素屬性的設(shè)置與讀取

// 獲取屬性值

$(selector).attr(屬性名稱);

// 設(shè)置屬性值

$(selector).attr(屬性名稱, 屬性值);

例如:

$(selector).attr({

'href':'baidu.com',

'title': '哇咔咔'

});

5、添加元素:

append() - 在被選元素的結(jié)尾插入內(nèi)容

prepend() - 在被選元素的開頭插入內(nèi)容

after() - 在被選元素之后插入內(nèi)容

before() - 在被選元素之前插入內(nèi)容

例如:

$(selector).append(txt1, txt2, txt3);

6、刪除元素:

remove() - 刪除被選元素(及其子元素)

remove(過(guò)濾規(guī)則) - 刪除指定的元素

empty() - 從被選元素中刪除子元素

例如:

$(selector).remove();

$(selector).empty();

// 刪除選中的所有p元素中class=‘tmp’的元素們

$('p').remove('.tmp');

7、CSS類:

addClass() - 向被選元素添加一個(gè)或多個(gè)類

removeClass() - 從被選元素刪除一個(gè)或多個(gè)類

toggleClass() - 對(duì)被選元素進(jìn)行添加/刪除類的切換操作

css() - 設(shè)置或返回樣式屬性

其中的參數(shù)都是css樣式名稱,如:

addClass('myColor1 myColor2');

$(selector).css({

'width': '100px',

'height': '100px'

});

8、元素尺寸的計(jì)算方式:

補(bǔ)充:

$(selector).offset().top - 上邊距

$(selector).offset().bottom - 下邊距

$(selector).offset().left - 左邊距

$(selector).offset().right - 右邊距

JQuery容易被忽略的知識(shí)點(diǎn),看看你不知道的有多少

9、祖先/后代/同胞

parent() - 直接父元素

parents([x]) - 所有父元素,參數(shù)可選(加入?yún)?shù),可以過(guò)濾想要的父元素)

parentsUntil([x]) - 返回2個(gè)元素之間的所有父元素,參數(shù)可選(不加入?yún)?shù),默認(rèn)和parents功能一樣)

children([x]) - 返回所有直接子元素,參數(shù)可選(加入?yún)?shù),可以過(guò)濾想要的子元素)

find(x) - 通過(guò)參數(shù),查找給定的元素,參數(shù)必須

siblings([x]) - 所有同胞元素(在同一級(jí)的所有元素),參數(shù)可選(加入?yún)?shù),可以過(guò)濾想要的同胞元素)

next() - 下一個(gè)同胞元素

nextAll([x]) - 跟隨其后的是所有同胞元素

nextUntil([x]) - 介于2個(gè)元素之間的所有元素

prev() - 同上

prevAll([x]) - 同上

prevUntil([x]) - 同上

例如:

$(selector).parents('p'); // 返回所有父元素中p節(jié)點(diǎn)元素

$('#div').parentsUtil('#div1'); // 返回id=div與id=div1之間的所有父元素

10、過(guò)濾:

first()

last()

eq(x) - 選取第x + 1個(gè)元素(下表從0開始)

filter(x) - 根據(jù)參數(shù),過(guò)濾想要的元素

not(x) - filter(x)返回結(jié)果相反

例如:

$('p').filter('.url');

小編的分享就到這了,喜歡的童鞋們可以點(diǎn)一波關(guān)注哦,后面會(huì)有更精彩的內(nèi)容等著大家~

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多