jQuery

jQuery官網:? http://jQuery.com

jQuery的入口函數

$(function (){});

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

jQuery對象和DOM對象

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

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

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

注意:只有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')奇數

$('li:even')偶數

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]])

參數都可以省略务唐，無動畫直接顯示脚翘。

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

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

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

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

滑動效果

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

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

上滑效果語法

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

滑動切換效果

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

事件切換

hover([over],out)

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

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

如果只寫一個函數涩咖，則鼠標經過和離開都會觸發(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横辆。其余參數都可以省略。

jQuery屬性操作

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

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

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

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

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

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

也可以獲取h5自定義屬性

數據緩存 data()

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

附加數據語法

data('name','value')

獲取數據語法

data('name')

還可以讀取h5自定義屬性data-index,得到的是數字型脆侮。

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

jQuery內容文本值

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

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

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

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

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

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

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

3.表單的值value()?

val()? 獲取表單的值

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

toFixed(2)? 保留兩位小數

jQuery元素操作

遍歷元素

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

語法1

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

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

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

語法2

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

$.each()方法可用于遍歷任何對象蚣抗，主要用于數據處理，比如數組瓮下，對象翰铡。

里面的函數有兩個參數，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

以上參數為空朝群，是獲取相應值燕耿，返回的是數字型，如果參數為數字姜胖，則是修改相應值誉帅，參數可以不必寫單位。

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()方法設置或返回被選元素被卷去的頭部。不跟參數是獲取镜遣，參數是不帶單位的數字則是設置被卷去的頭部己肮。

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

jQuery事件

事件注冊

element.事件(function (){})

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

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

事件處理on()綁定事件

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

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

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

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

fn回調函數，即綁定在元素身上的偵聽函數寓辱。

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是偵聽函數名

$("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個對象的對象恬涧。

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

深拷貝气破，前面加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