10红竭、jQuery動(dòng)畫(huà)

10.1艰赞、顯示show()隱藏hide()

顯示show()：
當(dāng)為show()添加參數(shù)時(shí)浴栽，就可以實(shí)現(xiàn)動(dòng)畫(huà)效果；
有兩個(gè)參數(shù)：
參數(shù)1：執(zhí)行動(dòng)畫(huà)的時(shí)長(zhǎng)涎劈，以毫秒為單位广凸，也可以使用代表時(shí)長(zhǎng)的字符串：fast（相當(dāng)于200毫秒）阅茶、normal（相當(dāng)于400毫秒）、slow（相當(dāng)于600毫秒）谅海，如果代表時(shí)長(zhǎng)的單詞寫錯(cuò)了脸哀，相當(dāng)于normal；
參數(shù)2：代表動(dòng)畫(huà)執(zhí)行完畢后的回調(diào)函數(shù)扭吁；

$('#div1').show(2000);
$('#div1').show('fast');
$('#div1').show(2000,function(){
    alert('動(dòng)畫(huà)執(zhí)行完畢');
});

隱藏hide()：語(yǔ)法與show()類似撞蜂；

$('#div1').hide(2000);
$('#div1').hide('fast');
$('#div1').hide(2000,function(){
    alert('隱藏了');
});

切換toggle()：當(dāng)狀態(tài)為顯示時(shí)切換為隱藏，當(dāng)狀態(tài)為隱藏時(shí)智末，切換為顯示谅摄，語(yǔ)法與show()類似；

$('#div1').toggle(2000);
$('#div1').toggle('fast');
$('#div1').toggle(2000,function(){
    alert('切換了');
});

10.2系馆、滑入slideDown()滑出slideUp()

默認(rèn)參數(shù)400毫秒送漠；
滑入slideDown()：
slideDown()不加參數(shù)時(shí)也可以實(shí)現(xiàn)動(dòng)畫(huà)效果，但是slideDown()也有兩個(gè)參數(shù)由蘑；
參數(shù)1：執(zhí)行動(dòng)畫(huà)的時(shí)長(zhǎng)闽寡；
參數(shù)2：代表動(dòng)畫(huà)執(zhí)行完畢后的回調(diào)函數(shù)；

$('#div1').slideDown();
$('#div1').slideDown(4000,function(){
    alert('滑入完成');
});

滑出slideUp()：語(yǔ)法和slideDown類似尼酿；

$('#div1').slideUp();
$('#div1').slideUp(4000,function(){
    alert('滑出完成');
});

切換slideToggle()：

$('#div1').slideToggle();
$('#div1').slideToggle(4000,function(){
    alert('切換完成');
});

10.3爷狈、淡入fadeIn()淡出fadeOut()

沒(méi)有參數(shù)時(shí)默認(rèn)400毫秒；
淡入fadeIn()：

$('#div1').fadeIn();
$('#div1').fadeIn(2000,function(){
    alert('淡入完成');
});

淡出slideOut()：

$('#div1').fadeOut();
$('#div1').fadeOut(2000,function(){
    alert('淡出完成');
});

切換fadeToggle()：

$('#div1').fadeToggle();
$('#div1').fadeToggle(2000,function(){
    alert('切換完成');
});

淡出到某種長(zhǎng)度f(wàn)adeTo()：

$('#div1').fadeTo(1000,0.5); //淡出到透明度為0.5
$('#div1').fadeTo(2000,0.5,function(){
    alert('淡出到某種程度完成');
});

10.4裳擎、自定義動(dòng)畫(huà)animate()

animate()有四個(gè)參數(shù)：
參數(shù)1：必選涎永，對(duì)象類型，代表的是需要做動(dòng)畫(huà)的屬性鹿响；
參數(shù)2：可選的羡微，代表的是執(zhí)行動(dòng)畫(huà)的時(shí)長(zhǎng)，單位毫秒惶我；
參數(shù)3：可選的妈倔，代表的是動(dòng)畫(huà)是緩動(dòng)還是勻速，有兩個(gè)可設(shè)置值：默認(rèn)為swing（緩動(dòng)）绸贡、linear（勻速）盯蝴；
參數(shù)4：動(dòng)畫(huà)執(zhí)行完畢后的回調(diào)函數(shù)狰右。
示例：為id為div1的元素設(shè)置自定義動(dòng)畫(huà)

$('#div1').animate({
    left:800,
    width:200
},2000,'linear',function(){
    alert('動(dòng)畫(huà)執(zhí)行完畢');
});

10.5孕豹、動(dòng)畫(huà)隊(duì)列與停止動(dòng)畫(huà)

當(dāng)我們多次觸發(fā)一個(gè)元素上的動(dòng)畫(huà)時(shí)，就會(huì)出現(xiàn)動(dòng)畫(huà)隊(duì)列防泵，后面觸發(fā)的動(dòng)畫(huà)要等前面的動(dòng)畫(huà)執(zhí)行完才能開(kāi)始執(zhí)行尿瞭；
我們可以使用stop()方法停止動(dòng)畫(huà)：
兩個(gè)參數(shù)（都是布爾類型松忍，如果不寫參數(shù)，默認(rèn)兩個(gè)參數(shù)都是false）：
參數(shù)1：是否清除隊(duì)列筷厘；
參數(shù)2：是否跳轉(zhuǎn)到最終結(jié)果鸣峭。
示例：設(shè)置元素div的動(dòng)畫(huà)的stop()

$('div').stop(true,true);

11宏所、節(jié)點(diǎn)操作

11.1、動(dòng)態(tài)創(chuàng)建元素html()和$()

html()：
當(dāng)html()不給參數(shù)時(shí)摊溶，可以獲取元素的所有內(nèi)容爬骤，包括文本、標(biāo)簽等莫换；
當(dāng)html()給了參數(shù)時(shí)霞玄，可以設(shè)置元素的內(nèi)容，新設(shè)置的內(nèi)容將覆蓋元素原來(lái)的內(nèi)容拉岁，與text()不同的是html()可以解析html代碼坷剧，因此可以創(chuàng)建節(jié)點(diǎn)；

$('#div1').html(); //獲取id為div1的元素的所有內(nèi)容
$('#div1').html('我是設(shè)置的內(nèi)容<a>我是a標(biāo)簽</a>'); //設(shè)置id為div1的元素的內(nèi)容喊暖，可以
解析出a標(biāo)簽

$()：
可以創(chuàng)建節(jié)點(diǎn)惫企，但是創(chuàng)建的節(jié)點(diǎn)只存在于內(nèi)存中，如果需要顯示陵叽，則需要追加到頁(yè)面狞尔；

var $link=$('<a>我是一個(gè)a標(biāo)簽</a>');
console.log($link);
$('#div1').append($link); //將$()創(chuàng)建的節(jié)點(diǎn)$link追加到id為div1的元素中

11.2、添加節(jié)點(diǎn)

添加節(jié)點(diǎn)的方法有append()巩掺、prepend()偏序、before()、after()胖替、appendTo()研儒。

append()：作為最后一個(gè)子元素添加；
父元素.append(子元素);

prepend()：作為第一個(gè)子元素添加独令；
父元素.prepend(子元素);

before()：把元素B插入到元素A的前面端朵，兄弟元素添加；
元素A.before(元素B);

after()：把元素B插入到元素A的后面记焊，兄弟元素添加逸月；
元素A.after(元素B);

appendTo()：把子元素作為父元素的最后一個(gè)子元素添加栓撞；
子元素.appendTo(父元素);

11.3遍膜、清除節(jié)點(diǎn)empty()和移除節(jié)點(diǎn)remove()

empty()：
不僅清除了節(jié)點(diǎn)，并且把節(jié)點(diǎn)的事件也清除了瓤湘，相對(duì)于html()較為安全瓢颅；

$('#ul1').empty(); //將id為ul1的元素節(jié)點(diǎn)清空

remove()：

$('li3').remove(); //移除id為li3的元素，自己移除自己

11.4弛说、克隆節(jié)點(diǎn)clone()

clone()克隆出來(lái)的節(jié)點(diǎn)（包括后代節(jié)點(diǎn)）只存在于內(nèi)存中挽懦，如果需要顯示，則需要追加到頁(yè)面木人；
clone()方法具有參數(shù)：
true：代表將事件一起克滦攀痢冀偶；
false：代表不會(huì)克隆事件。
ps：不給參數(shù)默認(rèn)false渔嚷，不管參數(shù)是什么都會(huì)克隆后代元素进鸠。

var $cloneDiv=$('#div1').clone(); //克隆id為div1的元素
$('body').append($cloneDiv); //將克隆出來(lái)的結(jié)果追加到body標(biāo)簽中

12、獲取形病、設(shè)置表單元素內(nèi)容val()

獲瓤湍辍：
val()不給參數(shù)就可以獲取內(nèi)容；

$('#txt').val(); //獲取id為txt的輸入框的內(nèi)容

設(shè)置：
val()中給的參數(shù)就是要設(shè)置的內(nèi)容漠吻；

$('#txt').val('我是設(shè)置的內(nèi)容'); //設(shè)置id為txt的輸入框的內(nèi)容

13量瓜、屬性操作attr()和removeAttr()

設(shè)置屬性：
attr('屬性名','屬性值');

//設(shè)置單屬性
$('img').attr('src','992.jpg');
設(shè)置多屬性
$('img').attr({
    src:'992.jpg',  //修改已有屬性
    aaa:'hahaha', //修改自定義屬性
    bbb:'bbb' //如果該屬性原來(lái)沒(méi)有，將追加此屬性
});

獲取屬性：
attr('屬性名');

$('img').attr('src'); //如果沒(méi)有此屬性則獲取到的值為undefined

移除屬性：
removeAttr('屬性名');

//移除單屬性
$('img').removeAttr('alt');
//移除多屬性
$('img').removeAttr('alt aaa bbb');

14途乃、布爾類型屬性操作prop()

jQuery1.6以后绍傲，對(duì)于checked、selected欺劳、disabled這一類布爾類型的屬性唧取，不能用attr()，只能用prop()划提。
示例：

$('#ckb1').prop('checked'); //多選框選中返回true枫弟，否則返回false

15、尺寸和位置操作：寬width()和height()

width()和height()：
獲取鹏往、設(shè)置元素的寬高淡诗，不包括padding/border/margin；

innerWidth()和innerHeight()：
返回元素的寬高伊履，包括padding韩容；

outerWidth()和outerHeight()：
返回元素的寬高，包括padding/border唐瀑；

outerWidth(true)和outerHeight(true)：
返回元素的寬高群凶，包括padding/border/margin；

獲取頁(yè)面可視區(qū)域的寬高：

$(window).width(); //獲取可視區(qū)寬度
$(window).height(); //獲取可視區(qū)高度

16哄辣、offset()和position()

offset()：
獲取元素距離document的位置请梢，返回值是一個(gè)對(duì)象，對(duì)象里面包含了top和left的值力穗；

position()：獲取的是元素距離有定位的父元素的位置毅弧，返回值是一個(gè)對(duì)象，對(duì)象里面包含了top和left的值当窗。

$('#son').offset();
$('#son').position();

17够坐、scrollLeft()和scrollTop()

設(shè)置或者獲取垂直滾動(dòng)條的位置：

$(window).scrollTop();//獲取頁(yè)面被卷曲的高度
$(window).scrollLeft();//獲取頁(yè)面被卷曲的寬度
//設(shè)置元素內(nèi)容被卷曲出去的寬度、高度
$('div').scrollTop(100);
$('div').scrollLeft(100);

18、事件

18.1元咙、注冊(cè)事件on

jQuery與原生js注冊(cè)事件的區(qū)別：jQuery給同一個(gè)元素注冊(cè)相同的事件梯影，后一個(gè)事件不會(huì)把前面的覆蓋掉，而原生js則會(huì)覆蓋前面的事件庶香。
on注冊(cè)簡(jiǎn)單事件：

//表示給$(selector)綁定事件光酣，并且由自己觸發(fā)，不支持動(dòng)態(tài)綁定
$(selector).on('click',function(){});

on注冊(cè)委托事件：

//表示給$(selector)綁定代理事件脉课，必須是它的內(nèi)部元素span才能觸發(fā)這個(gè)事件救军，支持動(dòng)態(tài)綁定
$(selector).on('click','span',function(){});

18.2、解綁事件off()

示例：

//解綁匹配元素的所有事件
$(selector).off();
//解綁匹配元素的所有click()事件
$(selector).off('click');

18.3倘零、事件觸發(fā)trigger()

//用法1：觸發(fā)事件
$('#one').trigger('click'); 
//用法2：觸發(fā)自定義事件
$('#one').on('ziji',function(){
    console.log('我是自定義事件');
}); //注冊(cè)一個(gè)自定義事件
$('#btn2').on('click',function(){
    var res=confirm('要觸發(fā)自定義事件嗎唱遭？');
    if(res){
        $('#one').trigger('ziji');
    } //res為true則觸發(fā)自定義事件
});

18.4、事件對(duì)象

事件對(duì)象：注冊(cè)一個(gè)事件呈驶，觸發(fā)它時(shí)系統(tǒng)自動(dòng)生成的記錄這個(gè)事件觸發(fā)時(shí)的一些信息就是事件對(duì)象拷泽，比如觸發(fā)時(shí)有沒(méi)有按住某個(gè)鍵等；
事件對(duì)象用事件參數(shù)來(lái)獲取袖瞻。

事件對(duì)象常用的三個(gè)坐標(biāo)：
pageX和pageY：觸發(fā)點(diǎn)距離頁(yè)面最頂部的左上角的位置（會(huì)計(jì)算滾動(dòng)條的距離）司致；
screenX和screenY：觸發(fā)點(diǎn)距離屏幕最左上角的值；
clientX和clientY：可視區(qū)聋迎，觸發(fā)點(diǎn)距離頁(yè)面左上角的值（忽視滾動(dòng)條）脂矫；

阻止事件冒泡（子元素事件組織父元素事件冒泡）：stopPropagation()；

阻止瀏覽器默認(rèn)行為：preventDefault()霉晕；

既阻止事件冒泡庭再，又阻止默認(rèn)行為：return false;

獲取按鍵：keyCode。

$('#one').on('click',function(event){
    console.log(event.pageX); 
    console.log(event.screenX);
    console.log(event.clientX); 
    event.stopPropagation(); //阻止id為one的元素的父元素的事件冒泡
    event.preventDefault(); //阻止id為one的元素的默認(rèn)行為
});
$('#one').on('click',function(event){
    return false; //既阻止事件冒泡牺堰，又阻止默認(rèn)行為
    console.log(event.keyCode()); //獲取按鍵
});

19拄轻、鏈?zhǔn)骄幊?/h2>

鏈?zhǔn)骄幊淌莏Query的一大特性，只要方法返回值是jQuery對(duì)象伟葫，那么就可以繼續(xù)點(diǎn)出方法恨搓。
end()：回到上一個(gè)狀態(tài)。
jQuery方法只有jQuery對(duì)象能使用筏养。
示例：

$(this).text(sx_wjx).prevAll().text(sx_wjx); //返回值為prevAll()
$(this).text(sx_wjx).prevAll().text(sx_wjx).end(); //返回值為this

20斧抱、顯示迭代each()

each()：遍歷jQuery對(duì)象集合，為每個(gè)匹配的元素執(zhí)行函數(shù)撼玄；
lis是li對(duì)象數(shù)組夺姑，遍歷$lis墩邀，并為每個(gè)li設(shè)置對(duì)應(yīng)的opacity掌猛；

$lis.each(function(index,element){ 
//index就是$lis中l(wèi)i的索引，element就是$lis中l(wèi)i對(duì)象
    $(element).css('opacity',(index+1)/10);
});

21、多庫(kù)共存

查看jQuery版本：

console.log(jQuery.fn.jquery);
console.log(jQuery.prototype.jquery);
console.log($.fn.jquery);
console.log($.prototype.jquery);

當(dāng)引入多個(gè)jQuery時(shí)荔茬，后引入的jQuery文件將覆蓋原來(lái)的jQuery文件（多庫(kù)沖突）废膘。
多庫(kù)共存：noConflict()

var _$=$.noConflict();//把$符號(hào)的控制權(quán)釋放，當(dāng)前版本的jQuery釋放掉$后慕蔚，還可以使用
jQuery丐黄；如果不想使用jQuery，可以使用noConflict()的返回值定義一個(gè)$的替代品孔飒；
(function($){//可以將先前的代碼放到自執(zhí)行函數(shù)中灌闺，在自執(zhí)行函數(shù)中可以繼續(xù)使用$

}(_$));