零基礎(chǔ)學(xué)前端.jQuery入門與實踐教程

學(xué)習(xí)目標:

掌握編程jQuery的基本使用

掌握jQuery插件的使用

能夠開發(fā)jQuery插件

選擇器、屬性操作、樣式操作、節(jié)點操作、動畫、事件、插件

typora-copy-images-to: media

復(fù)習(xí)：

原生js的優(yōu)缺點：

優(yōu)點：

所有前端框架的基礎(chǔ)，類似于Java、C語言的大基礎(chǔ)；

缺點：

1.不能添加多個入口函數(shù)，如果有，則后面會把前面的給覆蓋掉；

2.原生js的API名字太長，不好記；

3.原生js有些屬性后者方法，有瀏覽器兼容問題；

4.原生js容錯率太低，即前面的代碼一旦出錯，后續(xù)所有代碼不再執(zhí)行；

jQuery

一.jQuery簡介

1.JavaScript庫的概念

JavaScript開發(fā)的過程中，處理瀏覽器的兼容很復(fù)雜而且很耗時，于是一些封裝了這些操作的庫應(yīng)運而生。這些庫還會把一些常用的代碼進行封裝。

把一些常用到的方法寫到一個單獨的js文件，使用的時候直接去引用這js文件就可以了。（animate.js、common.js）

常見的JavaScript 庫 - jQuery、Prototype、MooTools。其中jQuery是最常用的一個。

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

2.jQuery的優(yōu)點好處

jQuery設(shè)計的宗旨是'Write Less，Do More'，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的操作，優(yōu)化HTML文檔操作、事件處理、動畫設(shè)計和Ajax交互。 jQuery的核心特性可以總結(jié)為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器。 極大地簡化了 JavaScript 編程。

1

2

3

3.jQuery的版本

jQuery版本有很多，分為1.x 2.x 3.x 1.x版本：能夠兼容IE678瀏覽器 2.x版本：不兼容IE678瀏覽器 1.x和2.x版本jquery都不再更新版本了，現(xiàn)在只更新3.x版本。 3.x版本：不兼容IE678，更加的精簡（在國內(nèi)不流行，因為國內(nèi)使用jQuery的主要目的就是兼容IE678） 發(fā)現(xiàn)：京東、新浪大廠，都有jquery的使用，但是一些大廠還在用，并且發(fā)現(xiàn)大廠用的時候，版本比較低，考慮很多客戶廣泛性。 注意：開發(fā)版本和生產(chǎn)版本 https://jquery.com/ https://code.jquery.com/ 國內(nèi)多數(shù)網(wǎng)站還在使用1.x的版本

1

2

3

4

5

6

7

8

9

10

11

4.體驗jQuery

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SwyqHBD9-1628145022876)(C:\Users\teayear\Desktop\深圳\jquery(1)]\jquery\media\image-20210802093229514.png)

案例：讓div顯示與設(shè)置內(nèi)容

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-j4k2zQBm-1628145022879)(C:\Users\teayear\Desktop\深圳\jquery(1)]\jquery\media\image-20210802095031470.png)

使用JavaScript開發(fā)過程中，有許多不便之處

-查找元素的方法太少，麻煩。 -遍歷偽數(shù)組很麻煩，通常要嵌套一大堆的for循環(huán)。 -有兼容性問題。 -想要實現(xiàn)簡單的動畫效果，也很麻煩 -代碼冗余。

1

2

3

4

5

$(document).ready(function () { $('#btn1').click(function () { // 隱式迭代：偷偷的遍歷，在jQuery中，不需要手動寫for循環(huán)了，會自動進行遍歷。 $('div').show(200); }); $('#btn2').click(function () { $('div').text('我是內(nèi)容'); }); });

1

2

3

4

5

6

7

8

9

10

優(yōu)點總結(jié)：

-查找元素的方法多種多樣，非常靈活 -擁有隱式迭代特性，因此不再需要手寫for循環(huán)了。 -完全沒有兼容性問題。 -實現(xiàn)動畫非常簡單，而且功能更加的強大。 -代碼簡單、粗暴。

1

2

3

4

5

5.jQuery中頂級對象

jQuery中的頂級對象是jQuery,$是jQuery的簡寫；

獲取jQuery對象 入口函數(shù) 高級功能

1

2

3

注意：jQuery中的$和JQuery關(guān)鍵字本身為同一對象；

6.jQuery中頁面加載事件

使用jQuery的三個步驟：

引入jQuery文件;后續(xù)所有的庫文件都是這樣滴Mui/Layui/vue.js。。。 入口函數(shù) 功能實現(xiàn)；重點--->又有三個步驟;

1

2

3

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

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

1

2

3

4

5

6

7

8

jQuery入口函數(shù)與window.onload的對比

a.window.onload只能有一個，jQuery的入口函數(shù)可以是多個； b.執(zhí)行時機不同,jQuery的效率高于系統(tǒng)默認的入口函數(shù); 1.JavaScript的入口函數(shù)要等到頁面中所有資源（包括圖片、文件）加載完成才開始執(zhí)行。 2.jQuery的入口函數(shù)只會等待文檔樹加載完成就開始執(zhí)行，并不會等待圖片、文件的加載。

1

2

3

4

二.jQuery對象和DOM對象

jQuery對象和DOM對象的區(qū)別

用原生JavaScript獲取的DOM對象 通過document.getElementById() 反饋的是元素(DOM對象) 通過document.getElementsByTagName()獲取到的是什么？ 偽數(shù)組(集合)，集合中的每一個對象是DOM對象

1

2

3

4

jQuery對象用$()的方式獲取的對象 jQuery對象又可以叫做包裝集(包裝的DOM對象的集合)

1

2

jQuery對象不能使用DOM對象的成員，DOM對象不能使用jQuery對象的成員

// DOM對象 var box = document.getElementById('box'); // 錯誤 box.text('hello'); // 正確 Dom對象.屬性=值; box.innerText = 'hello'; // jQuery對象，jQuery對象加前綴$，用以區(qū)分DOM對象 var $box = $('#box'); // 錯誤 dom對象; $box.innerText = 'hello'; // 正確 $box.text('hello');

1

2

3

4

5

6

7

8

9

10

11

12

13

4.相互轉(zhuǎn)換

jQuery對象轉(zhuǎn)換成DOM對象： jQuery對象.get(索引值); jQuery對象[索引值] jQuery對象是包裝集(集合)，從集合中取數(shù)據(jù)可以使用索引的方式 DOM對象轉(zhuǎn)換成jQuery對象： $(DOM對象) 只有這一種方法;

1

2

3

4

5

6

5.案例

開關(guān)燈 [01-開關(guān)燈.html]

// 僅僅演示對象之間的轉(zhuǎn)換，代碼不推薦這么寫 jQuery(document).ready(function () { // 獲取元素； var inpArr = document.getElementsByTagName('input'); // 獲取第一個按鈕，然后綁定事件； $(inpArr[0]).click(function () { // 設(shè)置body的背景色 $('body')[0].style.background = '#fff'; }); // 獲取第二個按鈕，然后綁定事件； $(inpArr[1]).click(function () { // 設(shè)置body的背景色 $('body').get(0).style.background = '#000'; }); });

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

三.選擇器

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

jQuery選擇器有很多，基本兼容了CSS1到CSS3所有的選擇器，并且jQuery還添加了很多更加復(fù)雜的選擇器。（查看jQuery文檔）

jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個元素，你會有很多種方法獲取到。所以我們平時真正能用到的只是少數(shù)的最常用的選擇器。

1.jQuery基本選擇器

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

2.jQuery層級選擇器

跟CSS的選擇器一模一樣,可以測試個數(shù)輸出。

3.jQuery過濾選擇器

這類選擇器都帶冒號:

4.jQuery篩選選擇器(方法)

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

5.案例

鼠標放上突出展示 [02-突出展示.html]

鼠標進入高亮顯示 [03-鼠標進入高亮顯示.html]

下拉菜單 [04-下拉菜單.html] √

手風琴 [05-手風琴.html]

淘寶服飾精品 [06-淘寶服飾精品.html]

四.jQuery操作樣式

1.CSS操作

功能：設(shè)置或者修改樣式，操作的是style屬性。

操作單個樣式

// name：需要設(shè)置的樣式名稱 // value：對應(yīng)的樣式值 $obj.css(name, value); // 使用案例 $('#one').css('background','gray');// 將背景色修改為灰色

1

2

3

4

5

設(shè)置多個樣式

// 參數(shù)是一個對象，對象中包含了需要設(shè)置的樣式名和樣式值 $obj.css(obj); // 使用案例 $('#one').css({ 'background':'gray', 'width':'400px', 'height':'200px' });

1

2

3

4

5

6

7

8

獲取樣式

// name:需要獲取的樣式名稱 $obj.css(name); // 案例 $('div').css('background-color');

1

2

3

4

注意：獲取樣式操作只會返回第一個元素對應(yīng)的樣式值。

隱式迭代：

設(shè)置操作的時候，如果是多個元素，那么給所有的元素設(shè)置相同的值

獲取操作的時候，如果是多個元素，那么只會返回第一個元素的值。

2.class操作

添加樣式類

// name：需要添加的樣式類名，注意參數(shù)不要帶點. $obj.addClass(name); // 例子,給所有的div添加one的樣式。 $('div').addClass('one');

1

2

3

4

移除樣式類

// name:需要移除的樣式類名 $obj.removeClass('name'); // 例子，移除div中one的樣式類名 $('div').removeClass('one');

1

2

3

4

判斷是否有某個樣式類

// name:用于判斷的樣式類名，返回值為true false $obj.hasClass(name) // 例子，判斷第一個div是否有one的樣式類 $('div').hasClass('one');

1

2

3

4

切換樣式類

// name:需要切換的樣式類名，如果有，移除該樣式，如果沒有，添加該樣式。 $obj.toggleClass(name); // 例子 $('div').toggleClass('one');

1

2

3

4

3.案例

tab欄切換案例

五.jQuery動畫

jQuery提供了三組基本動畫，這些動畫都是標準的、有規(guī)律的效果，jQuery還提供了自定義動畫的功能。

演示動畫效果

1.三組基本動畫

顯示(show)與隱藏(hide)是一組動畫：

滑入(slideUp)與滑出(slideDown)與切換(slideToggle)，效果與卷簾門類似

淡入(fadeIn)與淡出(fadeOut)與切換(fadeToggle)

$obj.show([speed], [callback]); // speed(可選)：動畫的執(zhí)行時間 // 1.如果不傳，就沒有動畫效果。如果是slide和fade系列，會默認為normal // 2.毫秒值(比如1000),動畫在1000毫秒執(zhí)行完成(推薦) // 3.固定字符串，slow(200)、normal(400)、fast(600)，如果傳其他字符串，則默認為normal。 // callback(可選):執(zhí)行完動畫后執(zhí)行的回調(diào)函數(shù) slideDown()/slideUp()/slideToggle();同理 fadeIn()/fadeOut();fadeToggle();同理

1

2

3

4

5

6

7

8

9

2.自定義動畫

CSS3學(xué)過；語法格式：animation,transform rotate等結(jié)合。

animate: 自定義動畫

$(selector).animate({params},[speed],[easing],[callback]); // {params}：要執(zhí)行動畫的CSS屬性left top width height，帶數(shù)字（必選） // speed：執(zhí)行動畫時長（可選） // easing:執(zhí)行效果，默認為swing（緩動） 可以是linear（勻速） // callback：動畫執(zhí)行完后立即執(zhí)行的回調(diào)函數(shù)（可選）

1

2

3

4

5

3.動畫隊列與停止動畫

在同一個元素上執(zhí)行多個動畫，那么對于這個動畫來說，后面的動畫會被放到動畫隊列中，等前面的動畫執(zhí)行完成了才會執(zhí)行（聯(lián)想：火車進站）。

// stop方法：停止動畫效果 stop(stopAll, goToEnd); // 第一個參數(shù)：是否清除隊列 // 第二個參數(shù)：是否跳轉(zhuǎn)到最終效果

1

2

3

4

4.案例

開機動畫案例 [09-開關(guān)機動畫.html]

下拉菜單-動畫 [10-下拉菜單-動畫.html]

六.jQuery節(jié)點操作

1.創(chuàng)建節(jié)點

// $(htmlStr) // htmlStr：html格式的字符串 $('

1

2

3

2.添加節(jié)點

append appendTo 在被選元素的結(jié)尾插入內(nèi)容 prepend prependTo 在被選元素的開頭插入內(nèi)容 before 在被選元素之后插入內(nèi)容 after 在被選元素之前插入內(nèi)容

1

2

3

4

3.清空節(jié)點與刪除節(jié)點

empty：清空指定節(jié)點的所有元素，自身保留(清理門戶)

$('div').empty(); // 清空div的所有內(nèi)容（推薦使用，會清除子元素上綁定的內(nèi)容，源碼） $('div').html('');// 使用html方法來清空元素，不推薦使用，會造成內(nèi)存泄漏，綁定的事件不會被清除。

1

2

remove：相比于empty，自身也刪除（自殺）

$('div').remove();

1

4.克隆節(jié)點

作用：復(fù)制匹配的元素

// 復(fù)制$(selector)所匹配到的元素（深度復(fù)制） // cloneNode(true) // 返回值為復(fù)制的新元素，和原來的元素沒有任何關(guān)系了。即修改新元素，不會影響到原來的元素。 $(selector).clone();

1

2

3

4

5.案例

城市選擇 [11-城市選擇案例.html]

刪除表格 [12 表格刪除案例.html]

根據(jù)數(shù)據(jù)生成表格 [13-表格生成案例.html]

添加和刪除表格數(shù)據(jù) [14-動態(tài)數(shù)據(jù)添加和刪除.html]

七.jQuery操作屬性

1.attr操作

設(shè)置單個屬性

// 第一個參數(shù)：需要設(shè)置的屬性名 // 第二個參數(shù)：對應(yīng)的屬性值 $obj.attr(name, value); // 用法舉例 $('img').attr('title','哎喲，不錯哦'); $('img').attr('alt','哎喲，不錯哦');

1

2

3

4

5

6

設(shè)置多個屬性

// 參數(shù)是一個對象，包含了需要設(shè)置的屬性名和屬性值 $obj.attr(obj) // 用法舉例 $('img').attr({ title:'哎喲，不錯哦', alt:'哎喲，不錯哦', style:'opacity:.5' });

1

2

3

4

5

6

7

8

獲取屬性

// 傳需要獲取的屬性名稱，返回對應(yīng)的屬性值 $obj.attr(name) // 用法舉例 var oTitle = $('img').attr('title'); alert(oTitle);

1

2

3

4

5

移除屬性

// 參數(shù)：需要移除的屬性名， $obj.removeAttr(name); // 用法舉例 $('img').removeAttr('title');

1

2

3

4

2.prop操作

在jQuery1.6之后，對于checked、selected、disabled這類boolean類型的屬性來說，不能用attr方法，只能用prop方法。

// 設(shè)置屬性 $(':checked').prop('checked',true); // 獲取屬性 $(':checked').prop('checked');// 返回true或者false

1

2

3

4

本質(zhì)原因：****property**** : 原生JS對對象的屬性稱之為 property 。

*attribute* ：HTML元素標簽上的屬性稱之為attribute。

使用jQuery操作的元素屬性時：布爾值屬性：使用prop() ，非布爾值屬性：使用attr() 。

總結(jié)：

*attribute 與 **property** **同步關(guān)系***

非布爾值屬性：實時同步。

布爾值屬性：

property 永遠不會同步至attribute

3.val()/text/()html()

$obj.val() 獲取或者設(shè)置表單元素的value屬性的值 $obj.html() 對應(yīng)innerHTML $obj.text() 對應(yīng)innerText/textContent，處理了瀏覽器的兼容性

1

2

3

4.案例

表格全選反選 [15-表格全選反選.html]

打字效果 [16-打字效果.html]

八.jQuery尺寸和位置操作

1.width方法與height方法

設(shè)置或者獲取高度，不包括內(nèi)邊距、邊框和外邊距

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

1

2

3

4

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

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

1

2

3

4

2.innerWidth/innerHeight/outerWidth/outerHeight

innerWidth()/innerHeight() 方法返回元素的寬度/高度（包括內(nèi)邊距）。 outerWidth()/outerHeight() 方法返回元素的寬度/高度（包括內(nèi)邊距和邊框）。 outerWidth(true)/outerHeight(true) 方法返回元素的寬度/高度（包括內(nèi)邊距、邊框和外邊距）。

1

2

3

3.scrollTop與scrollLeft

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

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

1

2

3

4

4.offset方法與position方法

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

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

1

2

3

4

案例：固定導(dǎo)航欄 [17-固定導(dǎo)航欄.html]

案例：電梯導(dǎo)航 [18-電梯導(dǎo)航.html]

九.jQuery事件機制

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

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

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

簡單事件注冊

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

1

2

3

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

bind方式注冊事件

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

1

2

3

4

5

缺點：不支持動態(tài)事件綁定

delegate注冊委托事件

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

1

2

3

4

5

6

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

on注冊事件

2.on注冊事件(重點)

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

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

on注冊簡單事件

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

1

2

on注冊事件委托

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

1

2

事件委托原理

// 事件委托的原理 var ul = document.querySelector('#ul'); ul.onclick = function (e) { // console.log(e.target.tagName); if (e.target.tagName.toLowerCase() === 'li') { console.log(e.target); } }

1

2

3

4

5

6

7

8

on注冊事件的語法：

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

1

2

3

4

5

通過源碼查看 bind click delegate on 注冊事件的區(qū)別

3.事件解綁

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

4.觸發(fā)事件

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

1

2

5.jQuery事件對象

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

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

1

2

3

4

5

6

7

8

9

10

10.jQuery補充知識點

1.鏈式編程

通常情況下，只有設(shè)置操作才能把鏈式編程延續(xù)下去。因為獲取操作的時候，會返回獲取到的相應(yīng)的值，無法返回 jQuery對象。children(‘li’).siblings(‘ul’).show()

常問原因，有幾種形式；

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

1

2.each方法

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

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

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

1

2

3

3.多庫共存

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

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

1

十一.插件

1.常用插件

彈出層插件 layer

layer插件

放大鏡插件

jQuery.zoom

輪播圖插件

http://sorgalla.com/jcarousel/

https://github.com/OwlCarousel2/OwlCarousel2

圖片懶加載插件

jQuery.lazyload

jQueryUI

常用的2-3個功能演示

查看jQuery插件的源碼

2.自己探索插件

artDialog

圖片放大

github上搜索

3.jQuery插件開發(fā)

給jQuery增加方法的兩種方式

$.method = fn 靜態(tài)方法 $.fn.method = fn 實例方法

1

2

增加一個靜態(tài)方法，實現(xiàn)兩個數(shù)的和，插件

(function ($) { $.add = function (a, b) { return a + b; } }(jQuery)) $.add(5, 6);

1

2

3

4

5

6

7

tab欄插件

(function ($) { // {tabMenu: '#aa'} $.tab = function (options) { // 默認參數(shù) var defaults = { tabMenu: '#tab', activeClass: 'active', tabMain: '#tab-main', tabMainSub: '.main', selectedClass: 'selected' } // 把options中的屬性，把對應(yīng)屬性的值賦給defaults對應(yīng)的屬性 // defaults.tabMenu = options.tabMenu || defaults.tabMenu; // for(var key in options) { // defaults[key] = options[key]; // } $.extend(defaults, options); $(defaults.tabMenu).on('click', 'li', function () { $(this) .addClass(defaults.activeClass) .siblings() .removeClass(defaults.activeClass); // var index = $(this).index(); // $(defaults.tabMain + ' ' + defaults.tabMainSub) .eq(index) .addClass(defaults.selectedClass) .siblings() .removeClass(defaults.selectedClass); }) } }(window.jQuery))

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

表格插件

(function($) { // 內(nèi)部的變量，外部無法訪問，防止變量名沖突 var a = 0; // 給$增加了一個實例方法 $.fn.table = function (header, data) { var array = []; array.push('

'); array.push(''); // 生成表頭 $.each(header, function () { array.push(''); }) array.push(''); // 生成數(shù)據(jù)行 $.each(data, function (index) { // this是當前遍歷到的數(shù)組中的每一個對象 // 拼數(shù)據(jù)行 array.push(''); array.push(''); // 遍歷對象，拼表格 for (var key in this) { array.push(''); } array.push(''); }) array.push('

' + this + '
' + (index + 1) + '	' + this[key] + '

'); this.append(array.join('')); } }(window.jQuery))

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

插件開發(fā)的原理

JavaScript jQuery web前端

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