JQuery簡介

JQuery簡介

jQuery是一個JavaScript工具庫（類庫），它經過封裝原生的JavaScript函數獲得一整套定義好的方 法。它的做者是John Resig，於2006年建立的一個開源項目，隨着愈來愈多開發者的加入， jQuery已經集成了JavaScript、CSS、DOM和Ajax於一體的強大功能。它能夠用最少的代碼， 完成更多複雜而困難的功能，從而獲得了開發者的青睞。

一句話總結類庫。 就是JavaScript的工具庫。 原始社會生火方式， 鑽木取火。 可是有了火柴就不同了。

JQuery版本

1.XX版本兼容IE 6， 7 ， 8

2.XX版本放棄了對IE6，7 ,  8 的兼容。

引入Jquery庫

像引入其餘js文件同樣吧jquery庫引入過來。

本地jquery文件

1.jquery-1.XX.X.min.js   

實例1.創建jquery環境。引用一個外部的jquery庫。和引入外部script方法一致。

jquery的第二種引入方式，CDN引入。

<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

JQuery核心

window.onload是原生方法， jquery（）是jquery方法， 他們在頁面中能不能共存那？

jquery中的window.onload=function(){}方法是jQuery(document).ready(function(){})

他和window.onload有什麼不一樣那?

實驗證實， .ready()方法他的執行速度更快於window.onload 。內部原理忽略不計。

能夠共存就意味着能夠同時使用。可是並不意味着， 這兩個方法同時存在是合理的。一個頁面咱們習慣只放一個.ready()方法。 這樣不會讓頁面的邏輯混亂，會增長代碼的可讀性 。 

推薦用.ready()方法，能夠排除jquery未引入錯誤。

習慣， 頁面中只用一個.ready()方法（能夠存在多個，可是並不科學。）

開發中炫酷的簡寫：

$(function(){

})

JQuery選擇器

選擇器	CSS模式	jQuery模式	描述
標籤名	div{}	$('div')	獲取全部div標籤的DOM元素
ID	#box{}	$('#box')	獲取一個ID爲box的DOM對象
class(類名)	.box{}	$('.box')	獲取全部class名爲box的DOM對象

JQuery對象和 Dom節點對象直接互相轉換

$('DOM')[0].style.color=red;

$('DOM').get[0].style.color=red;

選擇器	CSS模式	jQuery模式	描述
羣組選擇器	div,span,p{}	$('div,span,p')	略
後代選擇器	ul li a{}	$('ul li a')	略
通配選擇器	*{}	$('*')	略

層次選擇器

選擇器	css模式	jQuery模式	描述
後代選擇器	ul li a{}	$('ul li a')	獲取追溯到的全部元素
子選擇器	div>p{}	$('div>p')	只獲取子類節點
next選擇器	div+p{}	$('div+p')	只獲取某節點後一個同級DOM元素
nextAll選擇器	div~p{}	$('div~p')	獲取某節點後全部同級DOM元素

jQuery爲後代選擇器提供了一個方法find()這個find方法裏面有一個參數，就是想要找到的後代（能夠是標籤，類名，ID）

 

$('div p').css('color','red')  ==  $('div').find('p').css('color','red') 

 

jQuery爲子選擇器提供了一個方法，children()，參數同上；

 

$('div>p').css('color','red')  == $('div').children('p').css('color','red');

 

jQuery提供了next(）, nextAll( ) 選擇器，參數同上：注意next（）選擇器，只選擇後一個元素。

 

$('div+p').css('color','red')  == $('div').next('p').css('color','red')

 

$('div~p').css('color','red')  == $('div').nextAll('p').css('color','red')

 

注意：children() , next() , nextAll() 這些方法若是不傳遞參數的話， 那麼就默認傳遞一個通配符*，一般在使用這些選擇器的時候，咱們須要精準的選擇元素，避免發生各類怪異結果。

屬性選擇器：

CSS模式	jQuery模式	描述
input[name]	$('input[name]')	獲取具備這個屬性的DOM元素
input[name=XXX]	$('input[name=XXX]')	獲取具備屬性且屬性值爲XXX的DOM元素

僞類選擇器：

過濾器名	jQuery語法	說明	返回
:first	$('li:first')	選取第一個元素	單個元素
:last	$('li:last')	選取最後一個元素	單個元素
：not()	$('li:not(.red)')	選取class不是red的元素	一組元素
:even	$('li:even')	選擇偶數的全部元素	一組元素
:odd	$('li:odd')	選擇全部奇數元素	一組元素
：eq	$('li:eq（1）')	選擇對應下表的元素	單個元素

可見性選擇器

過濾器名	jQuery語法	說明	返回
:hidden	$(li:hidden)	選取全部不可見元素	集合元素
:visible	$('li:visible')	選取全部可見元素	集合元素

jQuery在選擇器和過濾器的基礎上提供了一些經常使用的方法，方便咱們開發時靈活使用。

方法名	jQuery語法	說明	返回
is()	li.is('.red')	傳遞選擇器、DOM、jquery對象	true||false
hasClass()	$('li').hasClass('red')	就是is('.'+class)	true||false

JQuery操做DOM

DOM 在 JavaScript 課程中咱們詳細的探討過，它是一種文檔對象模型。方便開發者對 HTML 結構元素內容進行展現和修改。在 JavaScript 中，DOM 不但內容龐大繁雜，並且咱們開發的過程當中須要考慮更多的兼容性、擴展性。在 jQuery 中，已經將最經常使用的 DOM 操 做方法進行了有效封裝，而且不須要考慮瀏覽器的兼容性，對於以前的DOM是一顆岑天大樹枝繁葉茂讓咱們高不可攀，那麼jQuery的DOM樹，就是一個簡筆畫的小樹，全部枝葉都唾手可得。

 

JQuery遍歷

祖先：

parent()

parents()

parentsUntil()

 

後代 :

 

children()

find()

 

兄弟：

 

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

 

過濾：

eq()

DOM元素及屬性操做

1.設置（獲取）元素內容。

html()                          能夠獲取該元素的標籤和內容

html(text) 

text(text)                     只能夠獲取該元素的文本內容；

text()

val(text)

val()

 

2.操做元素屬性。（獲取，設置、刪除）

 

.attr( ) 

.attr( )的參數有幾種設置方法。

1）$('div') .attr('type')獲取該屬性屬性值

2）$('div') .attr('type','value')設置屬性值

3)$('div') .attr({

     'data':'valuer1',

     'data2':'value2'

})

設置一組屬性值；

4）$('div').removeAttr('title')

操做元素樣式

css()

注：css（）方法不只能獲取行內樣式，也能獲取非行內樣式

css()                                      

方法的參數有幾種設置方法，

css(name)                              

獲取某個元素的行內樣式

css([name1,name2,name3])    

獲取多個樣式，返回值是一個數組；

css('name',value)                    

設置行內樣式

css({

     name1:value1,

     name2:value2

})                                        

設置多個行內樣式

addClass( )方法

addClass（class） 給元素添加一個class

addClass( class1 class2 class3 )給元素添加多個class

removeClass(class)  給元素刪除一個class

removeClass(class1 class2 class3)給元素刪除多個class

toggleClass(class) 若是元素沒有當前class那麼添加，若是有那麼刪除

css方法

width()

height()

innerWidth() 包含內邊距（padding）

outerWidth()包含內邊距和邊框(padding border)

offset()  獲取某個元素相對於瀏覽器窗口(可視區域的距離)

position()獲取某個元素相對於父元素的偏移距離

scrollTop()獲取垂直滾動條的值；

scrollTop(value)設置垂直滾動條的值;

scrollLeft()獲取水平滾動條的值；

scrollLeft(value)設置水平滾動條的值;

JQuery節點操做

1.建立節點。

 

var box=$('<div id="box">節點</div>'); //建立一個節點 $('body').append(box); //將節點插入到<body>元素內部

 

2.插入節點

 

append(content) 向指定元素內部後面插入節點 content

appendTo(content) 將指定元素移入到指定元素 content 內部後面

prepend(content) 向指定元素 content 內部的前面插入節點

prependTo(content) 將指定元素移入到指定元素 content 內部前面

 

after(content) 向指定元素的外部後面插入節點 content

before(content) 向指定元素的外部前面插入節點 content

 

3.包裹節點

.warp()

$('div').wrap('<strong></strong>'); //在 div 外層包裹一層 strong

$('div').wrap('<strong>123</strong>'); //包裹的元素能夠帶內容

$('div').wrap('<strong><em></em></strong>'); //包裹多個元素

$('div').wrap($('strong').get(0)); //也能夠包裹一個原生 DOM 不推薦使用，會崩潰

$('div').wrap(document.createElement('strong')); //臨時的原生 DOM

$('div').unwrap(); //移除一層包裹內容，多個需移除屢次

$('div').wrapInner('<strong></strong>'); //包裹子元素內容

4.節點操做

$('body').append($('div').clone(true)); //複製一個節點添加到 HTML 中

注：clone(true)參數能夠爲空，表示只複製元素和內容，不復制事件行爲。而加上 true 參數的話，這個元素附帶的事件處理行爲也複製出來。

$('div').remove(); //直接刪除 div 元素

remove()方法能夠接收一個參數，過濾須要刪除的元素。

$('div').replaceWith('<span>節點</span>'); //將 div 替換成 span 元素

JQuery事件

各類類型事件

click

dblclick

mouseenter

mouseleave

mouseover

mouseout

hover

scroll

....

事件綁定和解綁

 bind

 unbind

 delegate

  on

 off

事件對象

JavaScript事件對象是瀏覽器默認傳入的，可是對於瀏覽器的兼容問題，咱們須要對事件對象進行兼容。很煩！可是jQuery已經幫咱們解決了全部兼容性的煩惱，而且給咱們添加了不少有用的方法。

 

event.target                 獲取綁定事件的DOM元素

event.type                    獲取事件的類型 

event.data                    獲取事件中傳遞的數據

event.pagX/pagY                         獲取根據頁面原點的X,Y值

event.screenX/screenY                         獲取根據顯示器窗口的X,Y值

event.offsetX/offsetY                  獲取根據父元素X,Y值     

 

event.which                 獲取當前鼠標點擊的鍵1,2,3

event.altKey/shiftKey/ctrlKey/    返回 true、false

 

事件冒泡（默認事件）

 

preventDefault()    //阻止默認行爲

stopPropagation()  //取消事件冒泡

return false  阻止默認事件和事件冒泡

AJAX

AJAX簡介

AJAX是什麼

Ajax 全稱爲：「Asynchronous JavaScript and XML」（異步 JavaScript 和 XML）， 它並非 JavaScript 的一種單一技術，而是利用了一系列交互式網頁應用相關的技術所形 成的結合體。使用 Ajax，咱們能夠無刷新狀態更新頁面，而且實現異步提交，提高了用戶體驗。

Ajax 概述

Ajax 這個概念是由 JesseJamesGarrett 在 2005 年發明的。它自己不是單一技術，是一串 技術的集合，主要有：

1.JavaScript，經過用戶或其餘與瀏覽器相關事件捕獲交互行爲

2.XMLHttpRequest 對象，經過這個對象能夠在不中斷其它瀏覽器任務的狀況下向服務 器發送請求；

3.服務器上的文件，以 XML、HTML 或 JSON 格式保存文本數據；

4.其它 JavaScript，解釋來自服務器的數據（好比 PHP 從 MySQL 獲取的數據）並將其 呈現到頁面上。

因爲 Ajax 包含衆多特性，優點與不足也很是明顯。優點主要如下幾點：

1.不須要插件支持（通常瀏覽器且默認開啓 JavaScript 便可）；

2.用戶體驗極佳（不刷新頁面便可獲取可更新的數據）；

3.提高 Web 程序的性能（在傳遞數據方面作到按需放鬆，沒必要總體提交）；

4.減輕服務器和帶寬的負擔（將服務器的一些操做轉移到客戶端）；

而 Ajax 的不足由如下幾點：

1.不一樣版本的瀏覽器度 XMLHttpRequest 對象支持度不足(好比 IE5 以前)；

2.前進、後退的功能被破壞（由於 Ajax 永遠在當前頁，不會概率先後頁面）；

3.搜索引擎的支持度不夠（由於搜索引擎爬蟲還不能理解 JS 引發變化數據的內容）；

4.開發調試工具缺少（相對於其餘語言的工具集來講，JS 或 Ajax 調試開發少的可憐） 。

異步和同步

使用 Ajax 最關鍵的地方，就是實現異步請求、接受響應及執行回調。那麼異步與同步 有什麼區別呢？咱們普通的 Web 程序開發基本都是同步的，意爲執行一段程序才能執行下 一段，相似電話中的通話，一個電話接完才能接聽下個電話；而異步能夠同時執行多條任務， 感受有多條線路，相似於短信，不會由於看一條短信而中止接受另外一條短信。Ajax 也能夠 使用同步模式執行，但同步的模式屬於阻塞模式，這樣會致使多條線路執行時又必須一條一 條執行，會讓 Web 頁面出現假死狀態，因此，通常 Ajax 大部分採用異步模式。

load 方法

jquery對Ajax進行了大量封裝，對於封裝方式，jquery採用了多層封裝，其中$.ajax()是最底層封裝，上層封裝方法有.load()方法， $.get()，$.post()方法;

jquery對Ajax進行了大量封裝，對於封裝方式，jquery採用了三層封裝，其中$.ajax()是最底層封裝，上層封裝方法有.load()方法， $.get()，$.post()方法;

.load()方法是局部方法,.load()方法中共有三個參數，一個是url，連接地址，第二個是發送的數據data，第三個是回調函數callback

 

1.參數url, 能夠提供篩選功能。

$().load('data/test.html ')

 

$().load('data/text.html .url')>>>篩選功能

2.data參數傳入決定，是否以post方式提交參數是一個對象形式傳入。

$().load('data/test.html',{

    url:'zmkm'

})

3.回調函數function(response,status,xhr){}

$().load('data/test.html',{

    url:'zmkm'

},function(response,status,xhr){})

第一個參數爲返回結果，和頁面裏內容同樣 。

第二個參數是狀態，success，或者error

第三個參數是XHMJavaScript，他是一個對象

get和post

$.get()和$.post()有四個參數，其中第一個地址參數爲必填參數，第二個參數data，和第三個callback函數和.load()方法同樣， 第四個參數爲type

$.get('data/test.html',{

    url:'zmkm'

},'html')

因爲php返回的值默認爲純文本格式，因此數據格式html和test格式能夠不寫。若是寫入數據格式，那麼默認會強制轉換爲該格式。若是傳入錯誤格式，那麼不會有返回值。

注：通常狀況下，type都是隻能判斷，並不須要人爲設置，除非須要打印整個文件的代碼，才須要強制類型轉換。

$.get()和$.post()的差異:$.get()是以get方式提交，$.post()方式是以post方式提交。

1.get方式提交數據是吧數據放在瀏覽器網址上面的，post是經過http消息，實體提交的。

2.get提交方式有大小限制，限制在2KB，而post方式不收大小限制。

 

3.get方式由於在瀏覽器中會被歷史記錄緩存，因此這種提交數據方式並不安全，post方式沒有這種問題。

4，在服務器端（php語言）， get方式經過$GET[]方式獲取，post經過$POST[]方式獲取。

ajax使用方式

$.ajax({ url:'', 連接路徑

       type:'post/get' 用什麼方式提交

       data:{鍵:值}, 傳入數據用鍵值對方式傳入

       success:function(){ 成功是傳入的參數 } ,

       error:function(){}

 

})

 jsonp: "callback",//傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名(通常默認爲:callback)  

 jsonpCallback: "自定義函數名",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名，也能夠寫"?"，jQuery會自動爲你處理數據 

 

ajaxSetup()ajax初始化對於ajax能夠作一個預先設置，減小重複。

$.ajaxSetup({
    url:'',
    type:'post',
    data:{user:'ddd'}
})

$.ajax({
    success:function(data){
        alert(data)
    }
})

動畫

非自定動畫

1.顯示、隱藏：

show( ) 、hide( )、toggle()

show()、hide()、toggle()方法有兩種用法，一種是不傳參數，表明直接顯示隱藏。

另外一種是向方法中傳遞一個參數，這個參數爲number類型，表明動畫的執行時間。會有顯示隱藏的動畫效果。

示例:

show(100)、hide(100)、toggle(100)

不只如此，jQuery還爲動畫方法提供了三種字符串形式的參數，分別是：fast、slow、和空字符串''

show('fast')、hide('slow')、toggle('')

三種參數的執行時間，分別爲 ，'fast' ：200毫秒   ''(默認值):400毫秒   'slow'：600毫秒

2.滑動：

slideUp()：向上滑動（隱藏）

slideDown():向下滑動（顯示）

slideToggle()：滑動（自動）

 

3.淡入淡出：

 

fadeOut():淡出（隱藏）

fadeIn():淡入（顯示）

fadeToggle():顯示隱藏（）自動

該方法是將元素的透明度從1變成零以後將元素的display屬性設置爲none;

可是若是咱們想要將透明度設置到一個固定值，這些方法並不能實現，jQuery爲咱們提供了一個方法fadeTo()，該方法接受兩個參數。

第一個參數是動畫執行的時間，第二個參數是指望達到的透明度。

自定義動畫

animate()方法

animate()方法有三個參數。分別是動畫目標(target),動畫執行時間，回調函數。只有第一個參數是必填參數。

animate()方法的使用：

1.animate({

     'width':'200px'，

     'height':'200px'

})

 

2動畫的執行順序：

若是想要動畫按照順序執行（執行完第一個動畫以後，再執行下一個動畫）有三種方法：

1）藉助動畫的回調函數。

 

 $('input').click(function(){

        $('div').animate({

                        'width':'400px',

                        'height':'400px',

                    },function(){

                        $('div').animate({

                            'width':'200px',

                            'height':'200px'

                    })

         })

})

2）將動畫效果分開寫。

$('input').click(function(){

                    $('div').animate({

                        'width':'400px',

                        'height':'400px',

                    })

 

                    $('div').animate({

                        'width':'200px',

                        'height':'200px'

                    })

})

3）連綴

$('input').click(function(){

    $('div').animate({

        'width':'400px',

        'height':'400px',

    }).animate({

        'width':'200px',

        'height':'200px'

    })

})

這幾種方法在什麼狀況下使用那？

在操做同一元素的時候，推薦使用連綴。在操做不一樣元素的時候，推薦使用回調函數。

連綴：jquery的動畫方法，每次調用都會返回當前選擇的元素，從而可讓jQuery能夠實現連綴。

動畫執行順序

當我想要執行一個其餘方法的時候，好比給當前元素加一個背景顏色。

 

$('input').click(function(){

    $('div').animate({

        'width':'400px',

        'height':'400px',

    }).animate({

        'width':'200px',

        'height':'200px'

    }).css('background','yellow')

})

問題出現了：當我按照連綴寫法，並無出現我想要的效果全部方法都按照順序執行，而是將css方法提早執行了。

問題分析：根據咱們以往寫運動框架的經驗，知道每一個動畫都是有定時器的，發生這個問題緣由就在於此，定時器是異步的，在運行動畫的時候咱們後面的方法會繼續執行，也就出現了上面的問題。

解決：

 

1）能夠用回調函數解決：

 

$('input').click(function(){

    $('div').animate({

        'width':'400px',

        'height':'400px',

    }).animate({

        'width':'200px',

        'height':'200px'

    },function(){

        $(this).css('background','yellow')

    })

})

2）jquery給咱們提供了一個相似於回調函數的方法queue()：

 

$('input').click(function(){

    $('div').animate({

        'width':'400px',

        'height':'400px',

    }).animate({

        'width':'200px',

        'height':'200px'

    }).queue(function(){

          $(this).css('background','yellow')

    })

})

 

queue()方法的問題:

當我想要在這個列隊函數中再加一個動畫的時候，發如今queue()方法後的函數沒法執行。

$('input').click(function(){

    $('div').animate({

        'width':'400px',

        'height':'400px',

    }).animate({

        'width':'200px',

        'height':'200px'

    }).queue(function(next){

        $(this).css('background','yellow');

        next();

    }).hide('400')

})

原理：連綴的原理是由於每一個jquery動畫方法都會提供一個返回值，這個返回值就是所選擇的元素，queue()方法並不會提供一個返回值。爲了讓連綴繼續，咱們這時候應該讓queue()方法有一個返回值。jquery爲queue提供了一個參數next,咱們只須要在queue()方法中傳入這個參數並調用，那麼queue()方法就有了一個返回值，連綴就能夠繼續了。

動畫及相關方法

1.stop()方法

這個方法是中止動畫的方法，他有兩個參數，都是布爾值。第一個參數表明是否清除動畫隊列，第二個參數表明是否直接運行到最後結果。

2.delay()方法

延時執行，該方法有一個參數，是延時執行的毫秒數。

3.動畫的遞歸

 

$('div').slideToggle(2000,recursion)

function recursion(){

    $(this).slideToggle(2000,recursion)

}

自我調用

高級寫法：

$('div').slideToggle(2000,function(){

        $(this).slideToggle(2000,arguments.callee)

})

arguments.callee：經常使用在匿名函數中， 表明當前的函數。

4.動畫的全局方法

能影響程序性能$.fx.interval 屬性能夠調整動畫每秒的運行幀數，默認爲 13 毫秒。數字越小越流暢，但可。

$.fx.interval=1000;動畫的幀數設置。

$.fx.off=true;動畫關閉。

//輪播圖      jquery改版