jquery入门与实践案例教程
為什么要學jquery
使用javascript開發(fā)過程中，有許多的缺點：
體驗jquery的使用
/* * 1. 查找元素的方法多種多樣，非常靈活 * 2. 擁有隱式迭代特性，因此不再需要手寫for循環(huán)了。 * 3. 完全沒有兼容性問題。 * 4. 實現(xiàn)動畫非常簡單，而且功能更加的強大。 * 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就是一個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.js庫：把一些常用到的方法寫到一個單獨的js文件，使用的時候直接去引用這js文件就可以了。
（animate.js、common.js）
我們知道了，jQuery其實就是一個js文件，里面封裝了一大堆的方法方便我們的開發(fā)，
其實就是一個加強版的common.js，因此我們學習jQuery，其實就是學習jQuery這個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)不流行，因為國內(nèi)使用jQuery的主要目的就是兼容IE678）
關(guān)于壓縮版和未壓縮版：
- jquery-1.12.4.min.js:壓縮版本，適用于生產(chǎn)環(huán)境，因為文件比較小，去除了注釋、換行、空格等東西，但是基本沒有顆閱讀性。
- jquery-1.12.4.js:未壓縮版本，適用于學習與開發(fā)環(huán)境，源碼清晰，易閱讀。
jquery的入口函數(shù)
使用jQuery的三個步驟：
關(guān)于jQuery的入口函數(shù)：
//第一種寫法 $(document).ready(function() {}); //第二種寫法 $(function() {});jQuery入口函數(shù)與js入口函數(shù)的對比：
jq對象和dom對象(重要)
DOM對象轉(zhuǎn)換成jQuery對象：【聯(lián)想記憶：花錢】
var $obj = $(domObj); // $(document).ready(function(){});就是典型的DOM對象轉(zhuǎn)jQuery對象jQuery對象轉(zhuǎn)換成DOM對象：
var $li = $("li"); //第一種方法（推薦使用） $li[0] //第二種方法 $li.get(0)jquery選擇器
什么是jQuery選擇器
- jQuery選擇器是jQuery為我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。
注意：jQuery選擇器返回的是jQuery對象。 - jQuery選擇器有很多，基本兼容了CSS1到CSS3所有的選擇器，并且jQuery還添加了很多擴展性的選擇器。
【查看jQuery文檔】 - jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個元素，你會有很多種方法獲取到。
所以我們平時真正能用到的只是少數(shù)的最常用的選擇器。
基本選擇器
| ID選擇器 | $(“#id”); | 獲取指定ID的元素 |
| 類選擇器 | $(“.class”); | 獲取同一類class的元素 |
| 標簽選擇器 | $(“div”); | 獲取同一類標簽的所有元素 |
| 并集選擇器 | $(“div,p,li”); | 使用逗號分隔，只要符合條件之一就可。 |
| 交集選擇器 | $(“div.redClass”); | 獲取class為redClass的div元素 |
總結(jié)：跟css的選擇器用法一模一樣。
層級選擇器
| 子代選擇器 | $(“ul>li”); | 使用>號，獲取兒子層級的元素，注意，并不會獲取孫子層級的元素 |
| 后代選擇器 | $(“ul li”); | 使用空格，代表后代選擇器，獲取ul下的所有l(wèi)i元素，包括孫子等 |
總結(jié)：跟css的選擇器用法一模一樣。
過濾選擇器
| :eq（index） | $(“l(fā)i:eq(2)”).css(“color”, ”red”); | 獲取到的li元素中，選擇索引號為2的元素，索引號index從0開始。 |
| :odd | $(“l(fā)i:odd”).css(“color”, ”red”); | 獲取到的li元素中，選擇索引號為奇數(shù)的元素 |
| :even | $(“l(fā)i:even”).css(“color”, ”red”); | 獲取到的li元素中，選擇索引號為偶數(shù)的元素 |
總結(jié)：這類選擇器都帶冒號
篩選選擇器(方法)
| children(selector) | $(“ul”).children(“l(fā)i”) | 相當于$(“ul>li”)，子類選擇器 |
| find(selector) | $(“ul”).find(“l(fā)i”); | 相當于$(“ul li”),后代選擇器 |
| siblings(selector) | $(“#first”).siblings(“l(fā)i”); | 查找兄弟節(jié)點，不包括自己本身。 |
| parent() | $(“#first”).parent(); | 查找父親 |
| eq(index) | $(“l(fā)i”).eq(2); | 相當于$(“l(fā)i:eq(2)”),index從0開始 |
| next() | $(“l(fā)i”).next() | 找下一個兄弟 |
| prev() | $(“l(fā)i”).prev() | 找上一次兄弟 |
總結(jié)：篩選選擇器的功能與過濾選擇器有點類似，但是用法不一樣，篩選選擇器主要是方法。
【案例：下拉菜單】
【案例：突出展示】
【案例：手風琴】
【案例：淘寶精品】
元素設(shè)置
樣式設(shè)置
/*1.設(shè)置一個樣式*///兩個參數(shù) 設(shè)置的樣式屬性,具體樣式$('li').css('color','red');//傳入對象（設(shè)置的樣式屬性:具體樣式）$('li').css({'color':'red'});/*2.設(shè)置多個樣式*/$('li').css({'color':'green','font-size':'20px'});類名設(shè)置
/*1.添加一個類*/$('li').addClass('now');/*2.刪除一個類*/$('li').removeClass('now');/*3.切換一個類 有就刪除沒有就添加*/$('li').toggleClass('now');/*4.匹配一個類 判斷是否包含某個類 如果包含返回true否知返回false*/$('li').hasClass('now');對應(yīng)案例：案例-《tab切換》
屬性設(shè)置
/*1.獲取屬性*/$('li').attr('name');/*2.設(shè)置屬性*/$('li').attr('name','tom');/*3.設(shè)置多個屬性*/$('li').attr({'name':'tom','age':'18'});/*4.刪除屬性*/$('li').removeAttr('name');對應(yīng)案例：案例-《美女相冊》
prop方法
/*對于布爾類型的屬性，不要attr方法，應(yīng)該用prop方法 prop用法跟attr方法一樣。*/$("#checkbox").prop("checked");$("#checkbox").prop("checked", true);$("#checkbox").prop("checked", false);$("#checkbox").removeProp("checked");對應(yīng)案例：案例-《表格全選》
動畫
基本動畫
/*注意：動畫的本質(zhì)是改變?nèi)萜鞯拇笮『屯该鞫?//*注意：如果不傳參數(shù)是看不到動畫*//*注意：可傳入特殊的字符 fast normal slow*//*注意：可傳入數(shù)字 單位毫秒*//*1.展示動畫*/$('li').show();/*2.隱藏動畫*/$('li').hide();/*3.切換展示和隱藏*/$('li').toggle();滑入滑出
/*注意：動畫的本質(zhì)是改變?nèi)萜鞯母叨?//*1.滑入動畫*/$('li').slideDown();/*2.滑出動畫*/$('li').slideUp();/*3.切換滑入滑出*/$('li').slideToggle();對應(yīng)案例：案例-《下拉菜單》
淡入淡出
/*注意：動畫的本質(zhì)是改變?nèi)萜鞯耐该鞫?//*1.淡入動畫*/$('li').fadeIn();/*2.淡出動畫*/$('li').fadeOut();/*3.切換淡入淡出*/$('li').fadeToggle();$('li').fadeTo('speed','opacity');對應(yīng)案例：案例-《輪播圖》
自定義動畫
/** 自定義動畫* 參數(shù)1：需要做動畫的屬性* 參數(shù)2：需要執(zhí)行動畫的總時長* 參數(shù)3：執(zhí)行動畫的時候的速度* 參數(shù)4：執(zhí)行動畫完成之后的回調(diào)函數(shù)* */$('#box1').animate({left:800},5000);$('#box2').animate({left:800},5000,'linear');$('#box3').animate({left:800},5000,'swing',function () {console.log('動畫執(zhí)行完成');});對應(yīng)案例：案例-《手風琴菜單》
動畫隊列
/*jQuery中有個動畫隊列的機制。當我們對一個對象添加多次動畫效果時后添加的動作就會被放入這個動畫隊列中， 等前面的動畫完成后再開始執(zhí)行。可是用戶的操作往往都比動畫快， 如果用戶對一個對象頻繁操作時不處理動畫隊列就會造成隊列堆積，影響到效果。*/stop使用
/*1.停止當前動畫 如果動畫隊列當中還有動畫立即執(zhí)行*///$('div').stop();/*2.和stop()效果一致 說明這是默認設(shè)置*///$('div').stop(false,false);/*3.停止當前動畫 清除動畫隊列*///$('div').stop(true,false);/*4.停止當前動畫并且到結(jié)束位置 清除了動畫隊列*///$('div').stop(true,true);/*5.停止當前動畫并且到結(jié)束位置 如果動畫隊列當中還有動畫立即執(zhí)行*/$('div').stop(false,true);對應(yīng)案例：案例-《音樂導航》
對應(yīng)案例：案例-《工具欄》
節(jié)點操作
創(chuàng)建節(jié)點
/*創(chuàng)建節(jié)點*/var $a = $('<a href="http://www.baidu.com" target="_blank">百度1</a>');克隆節(jié)點
/*如果想克隆事件 false true克隆事件*/var $cloneP = $('p').clone(true);添加&移動節(jié)點
/*追加自身的最后面 傳對象和html格式代碼*/$('#box').append('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>');$('#box').append($('a'));/*追加到目標元素最后面 傳目標元素的選擇器或者對象*/$('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>').appendTo($('#box'));$('a').appendTo('#box');prepend();prependTo();after();before();刪除節(jié)點&清空節(jié)點
/*1.清空box里面的元素*//* 清理門戶 */$('#box').empty();/*2.刪除某個元素*//* 自殺 */$('#box').remove();【案例-《彈幕》】
jQuery特殊屬性操作
val方法
val方法用于設(shè)置和獲取表單元素的值，例如input、textarea的值
//設(shè)置值$("#name").val('張三');//獲取值$("#name").val();html方法與text方法
html方法相當于innerHTML text方法相當于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方法會識別html標簽，text方法會那內(nèi)容直接當成字符串，并不會識別html標簽。
width方法與height方法
設(shè)置或者獲取高度
//帶參數(shù)表示設(shè)置高度$('img').height(200);//不帶參數(shù)獲取高度$('img').height();獲取網(wǎng)頁的可視區(qū)寬高
//獲取可視區(qū)寬度$(window).width();//獲取可視區(qū)高度$(window).height();scrollTop與scrollLeft
設(shè)置或者獲取垂直滾動條的位置
//獲取頁面被卷曲的高度$(window).scrollTop();//獲取頁面被卷曲的寬度$(window).scrollLeft();offset方法與position方法
offset方法獲取元素距離document的位置，position方法獲取的是元素距離有定位的父元素的位置。
//獲取元素距離document的位置,返回值為對象：{left:100, top:100}$(selector).offset();//獲取相對于其最近的有定位的父元素的位置。$(selector).position();jQuery事件機制
JavaScript中已經(jīng)學習過了事件，但是jQuery對JavaScript事件進行了封裝，增加并擴展了事件處理機制。jQuery不僅提供了更加優(yōu)雅的事件處理語法，而且極大的增強了事件的處理能力。
jQuery事件發(fā)展歷程(了解)
簡單事件綁定>>bind事件綁定>>delegate事件綁定>>on事件綁定(推薦)
簡單事件注冊
click(handler) //單擊事件mouseenter(handler) //鼠標進入事件mouseleave(handler) //鼠標離開事件缺點：不能同時注冊多個事件
bind方式注冊事件
//第一個參數(shù)：事件類型//第二個參數(shù)：事件處理程序$("p").bind("click mouseenter", function(){//事件響應(yīng)方法});缺點：不支持動態(tài)事件綁定
delegate注冊委托事件
// 第一個參數(shù)：selector，要綁定事件的元素// 第二個參數(shù)：事件類型// 第三個參數(shù)：事件處理函數(shù)$(".parentBox").delegate("p", "click", function(){//為 .parentBox下面的所有的p標簽綁定事件});缺點：只能注冊委托事件，因此注冊時間需要記得方法太多了
on注冊事件
on注冊事件(重點)
jQuery1.7之后，jQuery用on統(tǒng)一了所有事件的處理方法。
最現(xiàn)代的方式，兼容zepto(移動端類似jQuery的一個庫)，強烈建議使用。
on注冊簡單事件
// 表示給$(selector)綁定事件，并且由自己觸發(fā)，不支持動態(tài)綁定。$(selector).on( "click", function() {});on注冊委托事件
// 表示給$(selector)綁定代理事件，當必須是它的內(nèi)部元素span才能觸發(fā)這個事件，支持動態(tài)綁定$(selector).on( "click",'span', function() {});on注冊事件的語法：
// 第一個參數(shù)：events，綁定事件的名稱可以是由空格分隔的多個事件（標準事件或者自定義事件）// 第二個參數(shù)：selector, 執(zhí)行事件的后代元素（可選），如果沒有后代元素，那么事件將有自己執(zhí)行。// 第三個參數(shù)：data，傳遞給處理函數(shù)的數(shù)據(jù)，事件觸發(fā)的時候通過event.data來使用（不常使用）// 第四個參數(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事件對象
jQuery事件對象其實就是js事件對象的一個封裝，處理了兼容性。
//screenX和screenY 對應(yīng)屏幕最左上角的值//clientX和clientY 距離頁面左上角的位置（忽視滾動條）//pageX和pageY 距離頁面最頂部的左上角的位置（會計算滾動條的距離）//event.keyCode 按下的鍵盤代碼//event.data 存儲綁定事件時傳遞的附加數(shù)據(jù)//event.stopPropagation() 阻止事件冒泡行為//event.preventDefault() 阻止瀏覽器默認行為//return false:既能阻止事件冒泡，又能阻止瀏覽器默認行為。jQuery補充知識點
鏈式編程
通常情況下，只有設(shè)置操作才能把鏈式編程延續(xù)下去。因為獲取操作的時候，會返回獲取到的相應(yīng)的值，無法返回 jQuery對象。
end(); // 篩選選擇器會改變jQuery對象的DOM對象，想要回復(fù)到上一次的狀態(tài)，并且返回匹配元素之前的狀態(tài)。【案例：五角星評分案例.html】
each方法
jQuery的隱式迭代會對所有的DOM對象設(shè)置相同的值，但是如果我們需要給每一個對象設(shè)置不同的值的時候，就需要自己進行迭代了。
作用：遍歷jQuery對象集合，為每個匹配的元素執(zhí)行一個函數(shù)
// 參數(shù)一表示當前元素在所有匹配元素中的索引號// 參數(shù)二表示當前元素（DOM對象）$(selector).each(function(index,element){});【案例：不同的透明度.html】
多庫共存
jQuery使用作為標示符，但是如果與其他框架中的作為標示符，但是如果與其他框架中的作為標示符，但是如果與其他框架中的沖突時，jQuery可以釋放$符的控制權(quán).
var c = $.noConflict();//釋放$的控制權(quán),并且把$的能力給了c插件
常用插件
插件：jquery不可能包含所有的功能，我們可以通過插件擴展jquery的功能。
jQuery有著豐富的插件，使用這些插件能給jQuery提供一些額外的功能。
animate不支持顏色的漸變，但是使用了jquery.color.js后，就可以支持顏色的漸變了。
使用插件的步驟
//1. 引入jQuery文件//2. 引入插件（如果有用到css的話，需要引入css）//3. 使用插件懶加載插件
jquery.ui.js插件
jQueryUI專指由jQuery官方維護的UI方向的插件。
官方API：http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程
基本使用:
//1. 引入jQueryUI的樣式文件//2. 引入jQuery//3. 引入jQueryUI的js文件//4. 使用jQueryUI功能使用jquery.ui.js手風琴菜單
制作jquery插件
原理：jquery插件其實說白了就是給jquery對象增加一個新的方法，讓jquery對象擁有某一個功能。
//通過給$.fn添加方法就能夠擴展jquery對象 $.fn. pluginName = function() {};總結(jié)
以上是生活随笔為你收集整理的jquery入门与实践案例教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： git 命令操作总结
- 下一篇： Canvas设置样式无效导致圆变成椭圆的