為什么要學(xué)jquery

使用javascript開發(fā)過程中，有許多的缺點(diǎn)：

查找元素的方法單一，麻煩。

遍歷數(shù)組很麻煩，通常要嵌套一大堆的for循環(huán)。

有兼容性問題。

想要實(shí)現(xiàn)簡單的動(dòng)畫效果，也很麻煩

代碼冗余。

體驗(yàn)jquery的使用

/* * 1. 查找元素的方法多種多樣，非常靈活 * 2. 擁有隱式迭代特性，因此不再需要手寫for循環(huán)了。 * 3. 完全沒有兼容性問題。 * 4. 實(shí)現(xiàn)動(dòng)畫非常簡單，而且功能更加的強(qiáng)大。 * 5. 代碼簡單、粗暴。 * */ $(document).ready(function () {$("#btn1").click(function () {$("div").show(200);});$("#btn2").click(function () {$("div").text("我是內(nèi)容");}); });

jquery到底是什么

jQuery的官網(wǎng) http://jquery.com/
jQuery就是一個(gè)js庫，使用jQuery的話，會(huì)比使用JavaScript更簡單。

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

js庫：把一些常用到的方法寫到一個(gè)單獨(dú)的js文件，使用的時(shí)候直接去引用這js文件就可以了。
（animate.js、common.js）

我們知道了，jQuery其實(shí)就是一個(gè)js文件，里面封裝了一大堆的方法方便我們的開發(fā)，
其實(shí)就是一個(gè)加強(qiáng)版的common.js，因此我們學(xué)習(xí)jQuery，其實(shí)就是學(xué)習(xí)jQuery這個(gè)js文件中封裝的一大堆方法。

jquery的版本問題

官網(wǎng)下載地址：http://jquery.com/download/
jQuery版本有很多，分為1.x 2.x 3.x
1.x和2.x版本jquery都不再更新版本了，現(xiàn)在只更新3.x版本。

大版本分類：

• 1.x版本：能夠兼容IE678瀏覽器
• 2.x版本：不能兼容IE678瀏覽器
• 3.x版本：不能兼容IE678瀏覽器，更加的精簡（在國內(nèi)不流行，因?yàn)閲鴥?nèi)使用jQuery的主要目的就是兼容IE678）

關(guān)于壓縮版和未壓縮版：

• jquery-1.12.4.min.js:壓縮版本，適用于生產(chǎn)環(huán)境，因?yàn)槲募容^小，去除了注釋、換行、空格等東西，但是基本沒有顆閱讀性。
• jquery-1.12.4.js:未壓縮版本，適用于學(xué)習(xí)與開發(fā)環(huán)境，源碼清晰，易閱讀。

jquery的入口函數(shù)

使用jQuery的三個(gè)步驟：

引入jQuery文件

入口函數(shù)

功能實(shí)現(xiàn)

關(guān)于jQuery的入口函數(shù)：

//第一種寫法 $(document).ready(function() {}); //第二種寫法 $(function() {});

jQuery入口函數(shù)與js入口函數(shù)的對(duì)比：

JavaScript的入口函數(shù)要等到頁面中所有資源（包括圖片、文件）加載完成才開始執(zhí)行。

jQuery的入口函數(shù)只會(huì)等待文檔樹加載完成就開始執(zhí)行，并不會(huì)等待圖片、文件的加載。

jq對(duì)象和dom對(duì)象(重要)

DOM對(duì)象：使用JavaScript中的方法獲取頁面中的元素返回的對(duì)象就是dom對(duì)象。

jQuery對(duì)象：jquery對(duì)象就是使用jquery的方法獲取頁面中的元素返回的對(duì)象就是jQuery對(duì)象。

jQuery對(duì)象其實(shí)就是DOM對(duì)象的包裝集包裝了DOM對(duì)象的集合（偽數(shù)組）

DOM對(duì)象與jQuery對(duì)象的方法不能混用。

DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象：【聯(lián)想記憶：花錢】

var $obj = $(domObj); // $(document).ready(function(){});就是典型的DOM對(duì)象轉(zhuǎn)jQuery對(duì)象

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

var $li = $("li"); //第一種方法（推薦使用） $li[0] //第二種方法 $li.get(0)

jquery選擇器

什么是jQuery選擇器

• jQuery選擇器是jQuery為我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。
  注意：jQuery選擇器返回的是jQuery對(duì)象。
• jQuery選擇器有很多，基本兼容了CSS1到CSS3所有的選擇器，并且jQuery還添加了很多擴(kuò)展性的選擇器。
  【查看jQuery文檔】
• jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個(gè)元素，你會(huì)有很多種方法獲取到。
  所以我們平時(shí)真正能用到的只是少數(shù)的最常用的選擇器。

基本選擇器

名稱用法描述

ID選擇器	$(“#id”);	獲取指定ID的元素
類選擇器	$(“.class”);	獲取同一類class的元素
標(biāo)簽選擇器	$(“div”);	獲取同一類標(biāo)簽的所有元素
并集選擇器	$(“div,p,li”);	使用逗號(hào)分隔，只要符合條件之一就可。
交集選擇器	$(“div.redClass”);	獲取class為redClass的div元素

總結(jié)：跟css的選擇器用法一模一樣。

層級(jí)選擇器

名稱用法描述

子代選擇器	$(“ul>li”);	使用>號(hào)，獲取兒子層級(jí)的元素，注意，并不會(huì)獲取孫子層級(jí)的元素
后代選擇器	$(“ul li”);	使用空格，代表后代選擇器，獲取ul下的所有l(wèi)i元素，包括孫子等

總結(jié)：跟css的選擇器用法一模一樣。

過濾選擇器

名稱用法描述

:eq（index）	$(“l(fā)i:eq(2)”).css(“color”, ”red”);	獲取到的li元素中，選擇索引號(hào)為2的元素，索引號(hào)index從0開始。
:odd	$(“l(fā)i:odd”).css(“color”, ”red”);	獲取到的li元素中，選擇索引號(hào)為奇數(shù)的元素
:even	$(“l(fā)i:even”).css(“color”, ”red”);	獲取到的li元素中，選擇索引號(hào)為偶數(shù)的元素

總結(jié)：這類選擇器都帶冒號(hào)

篩選選擇器(方法)

名稱用法描述

children(selector)	$(“ul”).children(“l(fā)i”)	相當(dāng)于$(“ul>li”)，子類選擇器
find(selector)	$(“ul”).find(“l(fā)i”);	相當(dāng)于$(“ul li”),后代選擇器
siblings(selector)	$(“#first”).siblings(“l(fā)i”);	查找兄弟節(jié)點(diǎn)，不包括自己本身。
parent()	$(“#first”).parent();	查找父親
eq(index)	$(“l(fā)i”).eq(2);	相當(dāng)于$(“l(fā)i:eq(2)”),index從0開始
next()	$(“l(fā)i”).next()	找下一個(gè)兄弟
prev()	$(“l(fā)i”).prev()	找上一次兄弟

總結(jié)：篩選選擇器的功能與過濾選擇器有點(diǎn)類似，但是用法不一樣，篩選選擇器主要是方法。

【案例：下拉菜單】
【案例：突出展示】
【案例：手風(fēng)琴】
【案例：淘寶精品】

元素設(shè)置

樣式設(shè)置

/*1.設(shè)置一個(gè)樣式*///兩個(gè)參數(shù) 設(shè)置的樣式屬性,具體樣式$('li').css('color','red');//傳入對(duì)象（設(shè)置的樣式屬性:具體樣式）$('li').css({'color':'red'});/*2.設(shè)置多個(gè)樣式*/$('li').css({'color':'green','font-size':'20px'});

類名設(shè)置

/*1.添加一個(gè)類*/$('li').addClass('now');/*2.刪除一個(gè)類*/$('li').removeClass('now');/*3.切換一個(gè)類 有就刪除沒有就添加*/$('li').toggleClass('now');/*4.匹配一個(gè)類 判斷是否包含某個(gè)類 如果包含返回true否知返回false*/$('li').hasClass('now');

對(duì)應(yīng)案例：案例-《tab切換》

屬性設(shè)置

/*1.獲取屬性*/$('li').attr('name');/*2.設(shè)置屬性*/$('li').attr('name','tom');/*3.設(shè)置多個(gè)屬性*/$('li').attr({'name':'tom','age':'18'});/*4.刪除屬性*/$('li').removeAttr('name');

對(duì)應(yīng)案例：案例-《美女相冊(cè)》

prop方法

/*對(duì)于布爾類型的屬性，不要attr方法，應(yīng)該用prop方法 prop用法跟attr方法一樣。*/$("#checkbox").prop("checked");$("#checkbox").prop("checked", true);$("#checkbox").prop("checked", false);$("#checkbox").removeProp("checked");

對(duì)應(yīng)案例：案例-《表格全選》

動(dòng)畫

基本動(dòng)畫

/*注意：動(dòng)畫的本質(zhì)是改變?nèi)萜鞯拇笮『屯该鞫?//*注意：如果不傳參數(shù)是看不到動(dòng)畫*//*注意：可傳入特殊的字符 fast normal slow*//*注意：可傳入數(shù)字 單位毫秒*//*1.展示動(dòng)畫*/$('li').show();/*2.隱藏動(dòng)畫*/$('li').hide();/*3.切換展示和隱藏*/$('li').toggle();

滑入滑出

/*注意：動(dòng)畫的本質(zhì)是改變?nèi)萜鞯母叨?//*1.滑入動(dòng)畫*/$('li').slideDown();/*2.滑出動(dòng)畫*/$('li').slideUp();/*3.切換滑入滑出*/$('li').slideToggle();

對(duì)應(yīng)案例：案例-《下拉菜單》

淡入淡出

/*注意：動(dòng)畫的本質(zhì)是改變?nèi)萜鞯耐该鞫?//*1.淡入動(dòng)畫*/$('li').fadeIn();/*2.淡出動(dòng)畫*/$('li').fadeOut();/*3.切換淡入淡出*/$('li').fadeToggle();$('li').fadeTo('speed','opacity');

對(duì)應(yīng)案例：案例-《輪播圖》

自定義動(dòng)畫

/** 自定義動(dòng)畫* 參數(shù)1：需要做動(dòng)畫的屬性* 參數(shù)2：需要執(zhí)行動(dòng)畫的總時(shí)長* 參數(shù)3：執(zhí)行動(dòng)畫的時(shí)候的速度* 參數(shù)4：執(zhí)行動(dòng)畫完成之后的回調(diào)函數(shù)* */$('#box1').animate({left:800},5000);$('#box2').animate({left:800},5000,'linear');$('#box3').animate({left:800},5000,'swing',function () {console.log('動(dòng)畫執(zhí)行完成');});

對(duì)應(yīng)案例：案例-《手風(fēng)琴菜單》

動(dòng)畫隊(duì)列

/*jQuery中有個(gè)動(dòng)畫隊(duì)列的機(jī)制。當(dāng)我們對(duì)一個(gè)對(duì)象添加多次動(dòng)畫效果時(shí)后添加的動(dòng)作就會(huì)被放入這個(gè)動(dòng)畫隊(duì)列中， 等前面的動(dòng)畫完成后再開始執(zhí)行。可是用戶的操作往往都比動(dòng)畫快， 如果用戶對(duì)一個(gè)對(duì)象頻繁操作時(shí)不處理動(dòng)畫隊(duì)列就會(huì)造成隊(duì)列堆積，影響到效果。*/

stop使用

/*1.停止當(dāng)前動(dòng)畫 如果動(dòng)畫隊(duì)列當(dāng)中還有動(dòng)畫立即執(zhí)行*///$('div').stop();/*2.和stop()效果一致 說明這是默認(rèn)設(shè)置*///$('div').stop(false,false);/*3.停止當(dāng)前動(dòng)畫 清除動(dòng)畫隊(duì)列*///$('div').stop(true,false);/*4.停止當(dāng)前動(dòng)畫并且到結(jié)束位置 清除了動(dòng)畫隊(duì)列*///$('div').stop(true,true);/*5.停止當(dāng)前動(dòng)畫并且到結(jié)束位置 如果動(dòng)畫隊(duì)列當(dāng)中還有動(dòng)畫立即執(zhí)行*/$('div').stop(false,true);

對(duì)應(yīng)案例：案例-《音樂導(dǎo)航》
對(duì)應(yīng)案例：案例-《工具欄》

節(jié)點(diǎn)操作

創(chuàng)建節(jié)點(diǎn)

/*創(chuàng)建節(jié)點(diǎn)*/var $a = $('<a href="http://www.baidu.com" target="_blank">百度1</a>');

克隆節(jié)點(diǎn)

/*如果想克隆事件 false true克隆事件*/var $cloneP = $('p').clone(true);

添加&移動(dòng)節(jié)點(diǎn)

/*追加自身的最后面 傳對(duì)象和html格式代碼*/$('#box').append('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>');$('#box').append($('a'));/*追加到目標(biāo)元素最后面 傳目標(biāo)元素的選擇器或者對(duì)象*/$('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>').appendTo($('#box'));$('a').appendTo('#box');prepend();prependTo();after();before();

刪除節(jié)點(diǎn)&清空節(jié)點(diǎn)

/*1.清空box里面的元素*//* 清理門戶 */$('#box').empty();/*2.刪除某個(gè)元素*//* 自殺 */$('#box').remove();

【案例-《彈幕》】

jQuery特殊屬性操作

val方法

val方法用于設(shè)置和獲取表單元素的值，例如input、textarea的值

//設(shè)置值$("#name").val('張三');//獲取值$("#name").val();

html方法與text方法

html方法相當(dāng)于innerHTML text方法相當(dāng)于innerText

//設(shè)置內(nèi)容$('div').html('<span>這是一段內(nèi)容</span>');//獲取內(nèi)容$('div').html()//設(shè)置內(nèi)容$('div').text('<span>這是一段內(nèi)容</span>');//獲取內(nèi)容$('div').text()

區(qū)別：html方法會(huì)識(shí)別html標(biāo)簽，text方法會(huì)那內(nèi)容直接當(dāng)成字符串，并不會(huì)識(shí)別html標(biāo)簽。

width方法與height方法

設(shè)置或者獲取高度

//帶參數(shù)表示設(shè)置高度$('img').height(200);//不帶參數(shù)獲取高度$('img').height();

獲取網(wǎng)頁的可視區(qū)寬高

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

scrollTop與scrollLeft

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

//獲取頁面被卷曲的高度$(window).scrollTop();//獲取頁面被卷曲的寬度$(window).scrollLeft();

offset方法與position方法

offset方法獲取元素距離document的位置，position方法獲取的是元素距離有定位的父元素的位置。

//獲取元素距離document的位置,返回值為對(duì)象：{left:100, top:100}$(selector).offset();//獲取相對(duì)于其最近的有定位的父元素的位置。$(selector).position();

jQuery事件機(jī)制

JavaScript中已經(jīng)學(xué)習(xí)過了事件，但是jQuery對(duì)JavaScript事件進(jìn)行了封裝，增加并擴(kuò)展了事件處理機(jī)制。jQuery不僅提供了更加優(yōu)雅的事件處理語法，而且極大的增強(qiáng)了事件的處理能力。

jQuery事件發(fā)展歷程(了解)

簡單事件綁定>>bind事件綁定>>delegate事件綁定>>on事件綁定(推薦)

簡單事件注冊(cè)

click(handler) //單擊事件mouseenter(handler) //鼠標(biāo)進(jìn)入事件mouseleave(handler) //鼠標(biāo)離開事件

缺點(diǎn)：不能同時(shí)注冊(cè)多個(gè)事件

bind方式注冊(cè)事件

//第一個(gè)參數(shù)：事件類型//第二個(gè)參數(shù)：事件處理程序$("p").bind("click mouseenter", function(){//事件響應(yīng)方法});

缺點(diǎn)：不支持動(dòng)態(tài)事件綁定

delegate注冊(cè)委托事件

// 第一個(gè)參數(shù)：selector，要綁定事件的元素// 第二個(gè)參數(shù)：事件類型// 第三個(gè)參數(shù)：事件處理函數(shù)$(".parentBox").delegate("p", "click", function(){//為 .parentBox下面的所有的p標(biāo)簽綁定事件});

缺點(diǎn)：只能注冊(cè)委托事件，因此注冊(cè)時(shí)間需要記得方法太多了

on注冊(cè)事件

on注冊(cè)事件(重點(diǎn))

jQuery1.7之后，jQuery用on統(tǒng)一了所有事件的處理方法。

最現(xiàn)代的方式，兼容zepto(移動(dòng)端類似jQuery的一個(gè)庫)，強(qiáng)烈建議使用。

on注冊(cè)簡單事件

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

on注冊(cè)委托事件

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

on注冊(cè)事件的語法：

// 第一個(gè)參數(shù)：events，綁定事件的名稱可以是由空格分隔的多個(gè)事件（標(biāo)準(zhǔn)事件或者自定義事件）// 第二個(gè)參數(shù)：selector, 執(zhí)行事件的后代元素（可選），如果沒有后代元素，那么事件將有自己執(zhí)行。// 第三個(gè)參數(shù)：data，傳遞給處理函數(shù)的數(shù)據(jù)，事件觸發(fā)的時(shí)候通過event.data來使用（不常使用）// 第四個(gè)參數(shù)：handler，事件處理函數(shù)$(selector).on(events,[selector],[data],handler);

事件解綁

unbind方式（不用）

$(selector).unbind(); //解綁所有的事件$(selector).unbind("click"); //解綁指定的事件

undelegate方式（不用）

$( selector ).undelegate(); //解綁所有的delegate事件$( selector).undelegate( 'click' ); //解綁所有的click事件

off方式（推薦）

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

觸發(fā)事件

$(selector).click(); //觸發(fā) click事件$(selector).trigger("click");

jQuery事件對(duì)象

jQuery事件對(duì)象其實(shí)就是js事件對(duì)象的一個(gè)封裝，處理了兼容性。

//screenX和screenY 對(duì)應(yīng)屏幕最左上角的值//clientX和clientY 距離頁面左上角的位置（忽視滾動(dòng)條）//pageX和pageY 距離頁面最頂部的左上角的位置（會(huì)計(jì)算滾動(dòng)條的距離）//event.keyCode 按下的鍵盤代碼//event.data 存儲(chǔ)綁定事件時(shí)傳遞的附加數(shù)據(jù)//event.stopPropagation() 阻止事件冒泡行為//event.preventDefault() 阻止瀏覽器默認(rèn)行為//return false:既能阻止事件冒泡，又能阻止瀏覽器默認(rèn)行為。

jQuery補(bǔ)充知識(shí)點(diǎn)

鏈?zhǔn)骄幊?/h3>

通常情況下，只有設(shè)置操作才能把鏈?zhǔn)骄幊萄永m(xù)下去。因?yàn)楂@取操作的時(shí)候，會(huì)返回獲取到的相應(yīng)的值，無法返回 jQuery對(duì)象。

end(); // 篩選選擇器會(huì)改變jQuery對(duì)象的DOM對(duì)象，想要回復(fù)到上一次的狀態(tài)，并且返回匹配元素之前的狀態(tài)。

【案例：五角星評(píng)分案例.html】

each方法

jQuery的隱式迭代會(huì)對(duì)所有的DOM對(duì)象設(shè)置相同的值，但是如果我們需要給每一個(gè)對(duì)象設(shè)置不同的值的時(shí)候，就需要自己進(jìn)行迭代了。

作用：遍歷jQuery對(duì)象集合，為每個(gè)匹配的元素執(zhí)行一個(gè)函數(shù)

// 參數(shù)一表示當(dāng)前元素在所有匹配元素中的索引號(hào)// 參數(shù)二表示當(dāng)前元素（DOM對(duì)象）$(selector).each(function(index,element){});

【案例：不同的透明度.html】

多庫共存

jQuery使用$作為標(biāo)示符，但是如果與其他框架中的$沖突時(shí)，jQuery可以釋放$符的控制權(quán).

var c = $.noConflict();//釋放$的控制權(quán),并且把$的能力給了c

插件

常用插件

插件：jquery不可能包含所有的功能，我們可以通過插件擴(kuò)展jquery的功能。

jQuery有著豐富的插件，使用這些插件能給jQuery提供一些額外的功能。

jquery.color.js

animate不支持顏色的漸變，但是使用了jquery.color.js后，就可以支持顏色的漸變了。

使用插件的步驟

//1. 引入jQuery文件//2. 引入插件（如果有用到css的話，需要引入css）//3. 使用插件

jquery.lazyload.js

懶加載插件

jquery.ui.js插件

jQueryUI專指由jQuery官方維護(hù)的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

基本使用:

//1. 引入jQueryUI的樣式文件//2. 引入jQuery//3. 引入jQueryUI的js文件//4. 使用jQueryUI功能

使用jquery.ui.js手風(fēng)琴菜單

制作jquery插件

原理：jquery插件其實(shí)說白了就是給jquery對(duì)象增加一個(gè)新的方法，讓jquery對(duì)象擁有某一個(gè)功能。

//通過給$.fn添加方法就能夠擴(kuò)展jquery對(duì)象 $.fn. pluginName = function() {};

總結(jié)

以上是生活随笔為你收集整理的jquery入门与实践案例教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。