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改版