jQuery

jQuery官網(wǎng):? http://jQuery.com

jQuery的入口函數(shù)

$(function (){});

$(document).ready(function() {});

jQuery對象和DOM對象

1.原生Js獲取來的對象就是dom對象

2.jQuery方法獲取的對象就是jQuery對象

3.jQuery對象的本質是:利用$對dom對象包裝后產生的對象(偽數(shù)組形式存儲)

注意:只有jQuery對象才能使用jQuery方法，Dom對象則使用原生的js方法。

jQuery 對象

通過$把dom元素進行包裝，$('div')

1.Dom對象轉換為jQuery對象，$(Dom對象)

2.jQuery對象轉Dom對象(兩種方式)

$('div')[index]

$('div').get(index)

jQuery常用api

1.jQuery選擇器

$('#id')?

$('*')

$('.class')

$('div')

$('div,p,span')并集

$('li.current')交集

$('ul>li')子代

$('ul li')后代

jQuery設置樣式

$('div').css('屬性',值)

jQuery隱式迭代

2.jQuery篩選選擇器

$('li:first')

$('li:last')

$('li:eq(2)')

$('li:odd')奇數(shù)

$('li:even')偶數(shù)

jQuery篩選方法(重點)

$('li').parent()?

$('ul').children('li')相當于$('ul>li')子代

$('ul').find('li')相當于$('ul li')后代

$('.first').siblings('li')

$('.first').nextAll()

$('.first').prevAll()

$('div').hasClass('protected')返回布爾值

$('li').eq(2)

jQuery排他思想

$(this).css('color','red');

$(this).siblings().css('color','');

鏈式編程

$(this).css('color','red').siblings().css('color','');

$(this).index()獲取當前元素的索引號

操作css方法

$(this).css('color');

$(this).css('color','red');

$(this).css({'color':'red','font-size':'20px'});

設置類樣式方法

添加類，不影響原先類

$('div').addClass('current');

移除類

$('div').removeClass('current');

切換類

$('div').toggleClass('current');

類操作與className區(qū)別

原生Js中className會覆蓋元素原先里面的類名。

jQuery里面類操作只是對指定類進行操作，不影響原先的類名。

顯示隱藏效果

隱藏語法規(guī)范

hide([speed,[easing],[fn]])

參數(shù)都可以省略，無動畫直接顯示。

speed:三種預定速度之一的字符串("slow","normal",or "fast")或表示動畫時長的毫秒數(shù)值(如:1000)。

easing:(Optional)用來指定切換效果，默認是"swing",可用參數(shù)"linear"。

fn:回調函數(shù)，在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

toggle([speed,[easing],[fn]])

滑動效果

下滑效果語法規(guī)范

slideDown([speed,[easing],[fn]])

上滑效果語法

slideUp([speed,[easing],[fn]])

滑動切換效果

slideToggle([speed,[easing],[fn]])

事件切換

hover([over],out)

over 鼠標移動元素上要觸發(fā)的函數(shù)(相當于mouseenter)

out 鼠標移出元素要觸發(fā)的函數(shù)(相當于mouseleave)

如果只寫一個函數(shù)，則鼠標經(jīng)過和離開都會觸發(fā)它。

動畫隊列及其停止排隊方法

動畫或效果隊列

動畫或者效果一旦觸發(fā)就會執(zhí)行，如果多次觸發(fā)，就造成多個動畫或效果排隊執(zhí)行。

停止排隊stop()

stop()方法用于停止動畫或效果

注意:stop()寫到動畫或者效果的前面，相當于停止結束上一次的動畫。

stop()方法必須寫到動畫的前面。

淡入淡出效果

淡入效果

fadeIn([speed,[easing],[fn]])

淡出效果

fadeOut([speed,[easing],[fn]])

淡入淡出切換

fadeToggle([speed,[easing],[fn]])

漸進方式調整到指定的不透明度

fafeTo([[speed],opacity,[easing],[fn]])

opacity 透明度必須寫，取值0-1之間

自定義動畫animate

語法

animate(params,[speed],[easing],[fn])

params? 想要更改的樣式屬性，以對象形式傳遞，必須寫，屬性名可以不用帶引號，如果是復合屬性則需要采取駝峰命名法borderLeft。其余參數(shù)都可以省略。

jQuery屬性操作

設置或獲取元素固有屬性值prop()

獲取屬性? prop('屬性')

設置屬性prop('屬性','屬性值')

設置或獲取元素自定義屬性值attr()

獲取屬性? attr('屬性')

設置屬性? atte('屬性','屬性值')

也可以獲取h5自定義屬性

數(shù)據(jù)緩存 data()

data() 方法可以在指定的元素上存取數(shù)據(jù)，并不會修改dom元素結構，一旦頁面刷新，之前存放的數(shù)據(jù)都將被移除。

附加數(shù)據(jù)語法

data('name','value')

獲取數(shù)據(jù)語法

data('name')

還可以讀取h5自定義屬性data-index,得到的是數(shù)字型。

:checked選擇器，查找被選中的表單元素。

jQuery內容文本值

主要針對元素的內容還有表單的值操作。

1.普通元素內容html()? 相當于原生的innerHTML

html()? //獲取元素的內容

html('內容')? //設置元素的內容

2.普通元素文本內容 text()

text()? 獲取元素的文本內容

text('文本內容')? 設置元素的文本內容

3.表單的值value()?

val()? 獲取表單的值

value('內容')? 設置表單的值

toFixed(2)? 保留兩位小數(shù)

jQuery元素操作

遍歷元素

jQuery隱式迭代是對同一類元素做同樣的操作，如果想給同一類元素做不同操作，就需要遍歷。

語法1

$('div').each( function (index,domEle){})

index 每個元素的索引號，domEle是每個dom元素對象，不是jQuery對象

所以想要使用jQuery方法，需要給這個dom元素轉換為jQuery對象 $(domEle)

語法2

$.each(object,function (index,element){})

$.each()方法可用于遍歷任何對象，主要用于數(shù)據(jù)處理，比如數(shù)組，對象。

里面的函數(shù)有兩個參數(shù)，index是每個元素的索引號，element遍歷內容。

創(chuàng)建元素

語法:$("<li></li>");

添加元素

1.內部添加? element.append("內容")

? element.prepend("內容")

2.外部添加

element.after("內容") 把內容放入目標元素后面

element.before("內容") 把內容放入目標元素前面

內部添加元素，生成以后為父子關系。

外部添加元素，生成以后為兄弟關系。

刪除元素

element.remove()? 刪除匹配的元素，本身

element.empty()? 刪除匹配的元素集合中所有的子節(jié)點

element.html("")? 清空匹配的元素內容

remove 刪除元素本身

empty()和html("")作用等價，都可以刪除元素里面的內容，只不過html還可以設置內容。

jQuery尺寸，位置操作

jQuery尺寸

width()/height()? 取得匹配元素寬度和高度值，只算width/height

innerWidth() /innerHeight()? 取得匹配元素寬度和高度值，包含padding

outerWidth()/outHeight()? 取得匹配元素寬度和高度值，包含padding,border

outWidth(true)/outHeight(true)? 取得匹配元素寬度和高度值，包含padding,border,margin

以上參數(shù)為空，是獲取相應值，返回的是數(shù)字型，如果參數(shù)為數(shù)字，則是修改相應值，參數(shù)可以不必寫單位。

jQuery位置

1.offset()設置或獲取元素偏移

offset()方法設置或返回被選元素相對于文檔的偏移坐標，跟父級沒有關系。該方法有2個屬性left,top。

top用于獲取距離文檔頂部的距離，left用于獲取距離文檔左側的距離。

可以設置元素的偏移 offset({top:10,left:30});

2.position() 獲取元素偏移

position()用于返回被選元素相對于帶有定位的父級偏移坐標，如果父級都沒有定位，則以文檔為準。該方法有兩個屬性left 和top。position().top用于獲取距離定位父級頂部的距離，position().left用于獲取距離定位父級左側的距離。該方法只能獲取。

3.scrollTop()/scrollLeft()設置或獲取元素被卷去的頭部和左側

scrollTop()方法設置或返回被選元素被卷去的頭部。不跟參數(shù)是獲取，參數(shù)是不帶單位的數(shù)字則是設置被卷去的頭部。

帶有動畫的返回頂部$("body,html").animate({scrollTop:0})

jQuery事件

事件注冊

element.事件(function (){})

$("div").click(function (){})

mouseover,mouseout,mouseenter,mouseleave,blur,focus,change,keydown,keyup,resize,scroll等。

事件處理on()綁定事件

on()方法在匹配元素上綁定一個或多個事件的事件處理函數(shù)。

語法:element.on(events,[selector],fn)

events:一個或多個用空格分隔的事件類型，如"click","keydown".

selector:元素的子元素選擇器.

fn回調函數(shù)，即綁定在元素身上的偵聽函數(shù)。

on()方法的優(yōu)勢1:

可以綁定多個事件，多個處理事件程序。

$("div").on({

? ? mouseover : function () {},

? ? mouseout : function () {},

? ? click : function () {}

});

如果事件處理程序相同

$("div").on("mouseover mouseout",function () {

? ? ? $(this).toggleClass("current");

});

on()方法的優(yōu)勢2:

可以事件委托操作，事件委托的定義是，把原來加給子元素身上的事件綁定在父元素身上，就是把事件委托給父元素。

$("um").on("click","li",function () {});

在此之前有bind(),live(),delegate()等方法來處理事件綁定或者事件委派，最新版用on代替他們。

on()方法優(yōu)勢3:

動態(tài)創(chuàng)建的元素，click()沒有辦法綁定事件，on()可以給動態(tài)生成的元素綁定事件。

$("div").on("click","p",function (){

? ? alert("俺可以給動態(tài)生成的元素綁定事件");

});

$("div").append($("<p>我是動態(tài)創(chuàng)建的p</p>")):

事件處理off()解綁事件

off()方法可以移除通過on()方法添加的事件處理程序。

$("p").off()? //解綁p元素所有事件處理程序

$("p").off("click")? //解綁p元素上面的點擊事件，后面的off是偵聽函數(shù)名

$("ul").off("click","li");? //解綁事件委托

如果有的事件只想觸發(fā)一次，可以使用one()來綁定事件。

自動觸發(fā)事件trigger()

輪播圖自動播放功能跟點擊右側按鈕一致，可以利用定時器自動觸發(fā)右側按鈕點擊事件，不必鼠標點擊觸發(fā)。

element.click()? //第一種簡寫形式

element.trigger("type")? //第二種自動觸發(fā)模式

$("p").on("click",function () {

? ? alert("hi");

});

$("p").trigger("click");? //此時自動觸發(fā)點擊事件，不需要鼠標點擊。

element.triggerHandler(type)? //第三種自動觸發(fā)模式

triggerHandler模式不會觸發(fā)元素的默認行為，這是和前面兩種的區(qū)別。

jQuery事件對象

事件被觸發(fā)，就會有事件對象的產生。

element.on(events,[selector],function (event) {});

阻止默認行為: event.preventDefault() 或者 return false

阻止冒泡:event.stopPropagation()

jQuery對象拷貝

如果想要把某個對象拷貝(合并)給另一個對象使用，此時可以使用$.extend()方法

語法$.extend([deep],target,object1,[object])

deep :如果設為true為深拷貝，默認為false淺拷貝。

target:要拷貝的目標對象。

object1:待拷貝到第一個對象的對象。

object:待拷貝到第N個對象的對象。

淺拷貝是把被拷貝的對象復雜數(shù)據(jù)類型中的地址拷貝給目標對象，修改目標對象會影響被拷貝對象。

深拷貝，前面加true，完全克隆(拷貝的對象，而不是地址)，修改目標對象不會影響被拷貝對象。

jQuery多庫共存

$符號可以被jQuery代替，

jQuery變量規(guī)定新的名稱:$.noConflict()

var xx = $.noConflict();

jQuery插件庫http://www.jq22.com/

jQuery之家http://www.htmleaf.com/

使用步驟:引入相關文件，復制相關html,css,js

Ctrl+h查找替換

全屏滾動fullpag.js

http://github.com/alvarotrigo/fullpage.js

http://www.dowebok.com/demo/2014/77/

bootstrap 框架也是依賴于jQuery開發(fā)的，因此里面的js插件使用，也必須引入jQuery文件。

案例toDolist

www.todolist.cn