jquery入门与实践案例教程
為什么要學(xué)jquery
使用javascript開發(fā)過程中,有許多的缺點(diǎn):
體驗(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è)步驟:
關(guān)于jQuery的入口函數(shù):
//第一種寫法 $(document).ready(function() {}); //第二種寫法 $(function() {});jQuery入口函數(shù)與js入口函數(shù)的對(duì)比:
jq對(duì)象和dom對(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)示符,但是如果與其他框架中的作為標(biāo)示符,但是如果與其他框架中的作為標(biāo)示符,但是如果與其他框架中的沖突時(shí),jQuery可以釋放$符的控制權(quán).
var c = $.noConflict();//釋放$的控制權(quán),并且把$的能力給了c插件
常用插件
插件:jquery不可能包含所有的功能,我們可以通過插件擴(kuò)展jquery的功能。
jQuery有著豐富的插件,使用這些插件能給jQuery提供一些額外的功能。
animate不支持顏色的漸變,但是使用了jquery.color.js后,就可以支持顏色的漸變了。
使用插件的步驟
//1. 引入jQuery文件//2. 引入插件(如果有用到css的話,需要引入css)//3. 使用插件懶加載插件
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: git 命令操作总结
- 下一篇: Canvas设置样式无效导致圆变成椭圆的