jquery入門與實踐案例教程

為什么要學jQuery

使用javascript開發過程中，有許多的缺點：

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

遍歷數組很麻煩，通常要嵌套一大堆的for循環。

有兼容性問題。

想要實現簡單的動畫效果，也很麻煩

代碼冗余。

體驗jquery的使用

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

jquery到底是什么

jQuery的官網 http://jquery.com/

jQuery就是一個js庫，使用jQuery的話，會比使用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.

1

2

3

4

5

6

js庫：把一些常用到的方法寫到一個單獨的js文件，使用的時候直接去引用這js文件就可以了。

（animate.js、common.js）

我們知道了，jQuery其實就是一個js文件，里面封裝了一大堆的方法方便我們的開發，

其實就是一個加強版的common.js，因此我們學習jQuery，其實就是學習jQuery這個js文件中封裝的一大堆方法。

jquery的版本問題

官網-：http://jquery.com/download/

jQuery版本有很多，分為1.x 2.x 3.x

1.x和2.x版本jquery都不再更新版本了，現在只更新3.x版本。

大版本分類：

1.x版本：能夠兼容IE678瀏覽器

2.x版本：不能兼容IE678瀏覽器

3.x版本：不能兼容IE678瀏覽器，更加的精簡（在國內不流行，因為國內使用jQuery的主要目的就是兼容IE678）

關于壓縮版和未壓縮版：

jquery-1.12.4.min.js:壓縮版本，適用于生產環境，因為文件比較小，去除了注釋、換行、空格等東西，但是基本沒有顆閱讀性。

jquery-1.12.4.js:未壓縮版本，適用于學習與開發環境，源碼清晰，易閱讀。

jquery的入口函數

使用jQuery的三個步驟：

引入jQuery文件

入口函數

功能實現

關于jQuery的入口函數：

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

1

2

3

4

5

6

7

8

jQuery入口函數與js入口函數的對比：

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

jQuery的入口函數只會等待文檔樹加載完成就開始執行，并不會等待圖片、文件的加載。

jq對象和dom對象(重要)

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

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

jQuery對象其實就是DOM對象的包裝集包裝了DOM對象的集合（偽數組）

DOM對象與jQuery對象的方法不能混用。

DOM對象轉換成jQuery對象：【聯想記憶：花錢】

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

1

2

3

jQuery對象轉換成DOM對象：

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

1

2

3

4

5

jquery選擇器

什么是jQuery選擇器

jQuery選擇器是jQuery為我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。

注意：jQuery選擇器返回的是jQuery對象。

jQuery選擇器有很多，基本兼容了CSS1到CSS3所有的選擇器，并且jQuery還添加了很多擴展性的選擇器。

【查看jQuery文檔】

jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個元素，你會有很多種方法獲取到。

所以我們平時真正能用到的只是少數的最常用的選擇器。

基本選擇器

總結：跟css的選擇器用法一模一樣。

層級選擇器

總結：跟css的選擇器用法一模一樣。

過濾選擇器

總結：這類選擇器都帶冒號

篩選選擇器(方法)

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

【案例：下拉菜單】

【案例：突出展示】

【案例：手風琴】

【案例：淘寶精品】

元素設置

樣式設置

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

1

2

3

4

5

6

7

8

9

10

類名設置

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

1

2

3

4

5

6

7

8

對應案例：案例-《tab切換》

屬性設置

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

1

2

3

4

5

6

7

8

9

10

11

對應案例：案例-《美女相冊》

prop方法

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

1

2

3

4

5

對應案例：案例-《表格全選》

動畫

基本動畫

/*注意：動畫的本質是改變容器的大小和透明度*/ /*注意：如果不傳參數是看不到動畫*/ /*注意：可傳入特殊的字符 fast normal slow*/ /*注意：可傳入數字 單位毫秒*/ /*1.展示動畫*/ $('li').show(); /*2.隱藏動畫*/ $('li').hide(); /*3.切換展示和隱藏*/ $('li').toggle();

1

2

3

4

5

6

7

8

9

10

滑入滑出

/*注意：動畫的本質是改變容器的高度*/ /*1.滑入動畫*/ $('li').slideDown(); /*2.滑出動畫*/ $('li').slideUp(); /*3.切換滑入滑出*/ $('li').slideToggle();

1

2

3

4

5

6

7

對應案例：案例-《下拉菜單》

淡入淡出

/*注意：動畫的本質是改變容器的透明度*/ /*1.淡入動畫*/ $('li').fadeIn(); /*2.淡出動畫*/ $('li').fadeOut(); /*3.切換淡入淡出*/ $('li').fadeToggle(); $('li').fadeTo('speed','opacity');

1

2

3

4

5

6

7

8

對應案例：案例-《輪播圖》

自定義動畫

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

1

2

3

4

5

6

7

8

9

10

11

12

對應案例：案例-《手風琴菜單》

動畫隊列

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

1

2

3

4

5

6

7

8

stop使用

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

1

2

3

4

5

6

7

8

9

10

對應案例：案例-《音樂導航》

對應案例：案例-《工具欄》

節點操作

創建節點

/*創建節點*/ var $a = $('百度1');

1

2

克隆節點

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

1

2

添加&移動節點

/*追加自身的最后面 傳對象和html格式代碼*/ $('#box').append('百度3'); $('#box').append($('a')); /*追加到目標元素最后面 傳目標元素的選擇器或者對象*/ $('百度3').appendTo($('#box')); $('a').appendTo('#box'); prepend(); prependTo(); after(); before();

1

2

3

4

5

6

7

8

9

10

11

刪除節點&清空節點

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

1

2

3

4

5

6

【案例-《彈幕》】

jQuery特殊屬性操作

val方法

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

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

1

2

3

4

html方法與text方法

html方法相當于innerHTML text方法相當于innerText

//設置內容 $('div').html('這是一段內容'); //獲取內容 $('div').html() //設置內容 $('div').text('這是一段內容'); //獲取內容 $('div').text()

1

2

3

4

5

6

7

8

9

區別：html方法會識別html標簽，text方法會那內容直接當成字符串，并不會識別html標簽。

width方法與height方法

設置或者獲取高度

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

1

2

3

4

5

獲取網頁的可視區寬高

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

1

2

3

4

scrollTop與scrollLeft

設置或者獲取垂直滾動條的位置

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

1

2

3

4

offset方法與position方法

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

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

1

2

3

4

jQuery事件機制

JavaScript中已經學習過了事件，但是jQuery對JavaScript事件進行了封裝，增加并擴展了事件處理機制。jQuery不僅提供了更加優雅的事件處理語法，而且極大的增強了事件的處理能力。

jQuery事件發展歷程(了解)

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

簡單事件注冊

click(handler) //單擊事件 mouseenter(handler) //鼠標進入事件 mouseleave(handler) //鼠標離開事件

1

2

3

缺點：不能同時注冊多個事件

bind方式注冊事件

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

1

2

3

4

5

缺點：不支持動態事件綁定

delegate注冊委托事件

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

1

2

3

4

5

6

缺點：只能注冊委托事件，因此注冊時間需要記得方法太多了

on注冊事件

on注冊事件(重點)

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

最現代的方式，兼容zepto(移動端類似jQuery的一個庫)，強烈建議使用。

on注冊簡單事件

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

1

2

on注冊委托事件

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

1

2

on注冊事件的語法：

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

1

2

3

4

5

事件解綁

unbind方式（不用）

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

1

2

undelegate方式（不用）

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

1

2

off方式（推薦）

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

1

2

3

4

觸發事件

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

1

2

jQuery事件對象

jQuery事件對象其實就是js事件對象的一個封裝，處理了兼容性。

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

1

2

3

4

5

6

7

8

9

10

jQuery補充知識點

鏈式編程

通常情況下，只有設置操作才能把鏈式編程延續下去。因為獲取操作的時候，會返回獲取到的相應的值，無法返回 jQuery對象。

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

1

【案例：五角星評分案例.html】

each方法

jQuery的隱式迭代會對所有的DOM對象設置相同的值，但是如果我們需要給每一個對象設置不同的值的時候，就需要自己進行迭代了。

作用：遍歷jQuery對象集合，為每個匹配的元素執行一個函數

// 參數一表示當前元素在所有匹配元素中的索引號 // 參數二表示當前元素（DOM對象） $(selector).each(function(index,element){});

1

2

3

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

多庫共存

jQuery使用 作 為 標 示 符 ， 但 是 如 果 與 其 他 框 架 中 的 作為標示符，但是如果與其他框架中的 作為標示符，但是如果與其他框架中的沖突時，jQuery可以釋放$符的控制權.

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

1

插件

常用插件

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

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

jquery.color.js

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

使用插件的步驟

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

1

2

3

jquery.lazyload.js

懶加載插件

jquery.ui.js插件

jQueryUI專指由jQuery官方維護的UI方向的插件。

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

其他教程：jQueryUI教程

基本使用:

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

1

2

3

4

使用jquery.ui.js手風琴菜單

制作jquery插件

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

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

1

2

JavaScript jQuery

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。