jQuery基礎知識

》》》jQuery選擇器《《《《《

jQuery選擇器（對比css選擇器): 基礎選擇器//僞類選擇器

css選擇器----> $(" ") --->$(" ") jq選擇器

基礎選擇器：

基本選擇器：元素選擇器、id選擇器、class選擇器、羣組選擇器、*選擇器

元素選擇器：選擇相同的元素，而後對相同的元素進行操做

語法：$("元素名") 代碼：$(function(){ 代碼塊 }) 這個代碼相似於js中window.onload=function(){}，也就是文檔加載文成後執行的代碼塊 補充：css是「對象的一個方法」,能夠用點運算符來代替，例如$("div").css()

id選擇器：語法：$("#id名") id名字前面必需要加上#

class選擇器：語法：$(".類名") class名字前必需要加上.

羣組選擇器：語法：$("選擇器1,選擇器2,選擇器3")

選擇器(全選擇器)：{margin:0;padding:0);選擇全部元素

層次選擇器:父子、後代、兄弟、相鄰

$("M N") 後代選擇器 選取M元素內部後代N元素 $("M>N") 子代選擇器 選取M元素中全部第一級子代N元素 $("M~N") 兄弟選擇器 ===$("M元素).nextAll() $("M+N") 相鄰選擇器 ===$("M元素).next()

區別： 後代選擇器選取的是元素內部全部的後代元素 子代選擇器選取的是元素內部的子元素;

技巧：在連li元素之間添加一個邊框的效果 $("li+li").css("attr","value")

屬性選擇器

$("selector[attr]") 選取包含特定屬性的元素 $("selector[attr='value']") 選取包含特定屬性值的元素 $("selector[attr!='value']") 選取不包含某特定屬性值的元素 $("selector[attr*='value']") 選取給定屬性以包含某些值的元素 $("selector[attr^='value']") 選取給定屬性以某些值開頭的元素（較少用) $("selector[attr$='value']") 選取給定屬性以某些值結束的元素（較少用) $("selector[selector1][selector2]...)" 複合屬性選擇器

實例: $("div[class]") $("input[type='checkbox']") $("input[type!='checkbox']")

$("div[calss *= 'nav']") 選擇class屬性包含nav的div元素

$("input[name^='group']") $("input[name $='group']")

$("div[id][class ^='lyve]") 選取有id屬性，且class屬性以lyve開頭的div元素

僞類選擇器（以:開頭) 包含：簡單僞類選擇器、子元素僞類選擇器、可見性僞類選擇器、內容僞類選擇器、表單僞類選擇器、表單屬性僞類選擇器 ，

簡單僞類選擇器： :not(selector) 選取某選擇器以外的元素 :first/first() 選取某元素的第一個元素 :last/last() 選取某元素的最後一個元素 :odd 選取索引值爲奇數的元素 :even 選取索引值爲偶數的元素 :eq(index) 選取某個給定索引值的元素 :lt(index) 選取小於某個索引值的元素 :gt(index) 選取大於某個索引值的元素 :header 選取h1-h6的標題元素 :animated 選取全部正在執行動畫效果的元素 :root 選取頁面的根元素//少用 :target 選取當前活動的目標元素(錨點)//少用

子元素僞類選擇器

第一類：不區分類型 :first-child 選擇父元素的第1個子元素 :last-child 選擇父元素的最後1個子元素 :nth-child(「整數|odd|even」) 選擇父元素下的第n個元素或奇偶元素 :only-child 選擇父元素中惟一的子元素

第二類：區分類型 :first-of-type 選擇同元素類型的第1個同級兄弟元素 :last-of-type 選擇同元素類型的最後1個同級兄弟元素 :nth-of-type 選擇同元素類型的第n個同級兄弟元素，n的值能夠是「整數|odd|even」 :only-of-type 匹配父元素中特定類型的惟一子元素（可是父元素能夠有多個子元素）

可見性僞類選擇器 :hidden （display:none+type="hidden"+visiblity:hidden :visible //定義鼠標單擊事件 代碼：$(#btn).click(function(){ //鼠標事件的內容 });

內容選擇器 :contains(text) 選擇包含給定文本內容的元素 :has(selector) 選擇含有選擇器所匹配元素的元素 :empty :parent 選擇含有子元素或者文本的元素（跟:empty相反）

表單僞類選擇器 :input 選擇全部input元素 :button 選擇全部普通按鈕，即type="button"的input元素 :submit 選擇全部提交按鈕，即type="submit"的input元素 :reset 選擇全部重置按鈕，即type="reset"的input元素 :text 選擇全部單行文本框 :textarea 選擇全部多行文本框 :password 選擇全部密碼文本框 :radio 選擇全部單選按鈕 :checkbox 選擇全部複選框 :image 選擇全部圖像域 :hidden 選擇全部隱藏域 :file 選擇全部文件域

表單屬性僞類選擇器

:checked 選擇全部被選中的表單元素，通常用於radio和checkbox option:selected 選擇全部被選中的option元素 :enabled 選擇全部可用元素，通常用於input、select和textarea :disabled 選擇全部不可用元素，通常用於input、select和textarea :read-only 選擇全部只讀元素，通常用於input和textarea :focus 選擇得到焦點的元素，經常使用於input和textarea

》》》》元素操做《《《《《 對於元素的操做分爲3個方面：屬性操做，內容操做，樣式操做

屬性操做：獲取、設置、刪除

獲取：$().attr("屬性名") 設置：$().attr("屬性名","屬性值") 刪除：$().removeAttr()

!!注意：此外在jQuery中，除了可使用attr()方法來操做元素的屬性以外，還可使用prop()方法。prop()方法和attr()方法語法相同，其中prop()用於獲取和設置元素屬性，removeProp()用於刪除元素的屬性。

其中attr()方法用於操做元素的固有屬性，所謂的「固有屬性」指的是元素自己具備的屬性如a標籤的href、target、title等。而prop()方法用於操做元素的自定義屬性，所謂的「自定義屬性」指的是用戶本身定義的一些屬性。

內容操做：獲取內容html()/text() 獲取表單元素的內容（值)val() 獲取元素內容:$().html()/$().text() 獲取表單的值:$().val()

樣式操做:css屬性操做//css類名操做

css屬性操做: 獲取： $().css("屬性") 設置：單個屬性設置：$().css("屬性","屬性值") 多個屬性設置: $().css({"屬性1":"屬性值1","屬性2":"屬性值2",……})

css類名操做: 添加：$().addClass("類名") 刪除：$().removeClass("類名") 切換： $().toggleClass("類名")

盒子模型的寬度和高度（均不帶px,是純數字！！！） 寬度： width() width 只有它能用於window或者document對象 innerWidth() width+padding outerWidth() width+padding+border

高度： height() height() innerHeight() height+padding outerHeight() height+padding+border

盒子模型的位置:offset()和positon()

offset() 元素相對於document的偏移距離 語法：不帶單位！！ $().offset() 返回座標對象，（top,left) $().offset().top 返回元素至關於文檔頂部的距離 $().offset().left 返回元素至關於文檔左邊的距離

position 元素相對於其被定位的祖輩元素的偏移距離 語法：不帶單位！！ $().position() $().position().top $().position().left

父元素position:relative 子元素position:absolute

滾動條的距離：scrollTop()和scrollLeft() scrollTop:元素相對於垂直滾動條頂部的距離 語法： $().scrollTop()

scrollLeft:元素相對於水平滾動條左邊的距離 語法：$().scorllLeft()

DOM操做***

常見DOM操做：建立節點//插入節點//刪除節點//複製節點//替換節點//包裹節點//遍歷節點

建立節點 語法：var e=$(html); $().append(e); // var $li="<li></li>"; $().append($li);

!!在建立複雜節點時，因爲複雜節點的屬性與屬性值之間必須用""，最外面必須用''來表示

插入節點 備註：在js中，插入節點只有appendChild()和insertBefore()兩種，而jQuery中提供了大量的方法

內部插入節點:末尾：append()和appendTo(); 開始： prepend()和prependTo(); 語法：$(A).append(B）; 在A的內部的末尾加入B $(B).appentTo(A) 效果同上

外部插入節點:before()和insertBefore(); after()和insertAfter(); 語法： $(a).before(b) 在a的外部以前加入元素b

刪除節點 remove()方法；detach()方法；empty()方法

$(a).remove()刪除節點 （雖然節點被刪除了，可是還能夠經過返回值來再次使用這個對象) $(b).detach()半刪除節點 （只刪除元素，元素綁定的事件並不會刪除） $(c).empty() 保留自身節點，刪除後代節點

複製節點 語法：$(a).clone()默認false $(a).clone(false) 複製a節點，但不復制a節點所綁定的事件 $(a).clone(ture) 複製a節點，而且複製事件

替換節點（元素被替換後，其說綁定的事件會消失) $(a).replaceWith(b) 用b來替換a $(a).replaceAll(b) 用a來替換b

包裹節點 $(a).wrap(b) 用a來包裹全部b進行單獨包裹(做用於單獨元素） $(a).wrapAll(b) 將全部匹配的元素b用一個元素來包裹（做用於元素總體) $(a).wrapInner(b) 將a元素全部內部子元素使用b元素包裹（不包含a自己) [與warp()效果同樣，可是html結構不同] //$('p').unwarp()；刪除p元素的父元素，保留自身以及兄弟元素

遍歷節點 語法：$().each(function(index,elements){ this-->elements }) 只遍歷兒子級別元素 $("div").children() 遍歷全部後代元素 $("div").find("li") 查找父級元素 $("ul").parent() 查找第一個符合條件的祖先元素 $("div").closest() 查找下一個兄弟元素 $("div").next() 查找前一個兄弟元素 $("div").prev() 查找全部的兄弟元素 $("div").siblings()

add()是指在jquery對象集合中增長一個對象，而append()是在DOM集合中增長一個節點，add()不會直接影響界面，append()會對界面產生影響.

*jQuery事件簡介 jQuery事件：頁面載入事件、鼠標事件、鍵盤事件、表單事件、滾動事件、綁定事件、解綁事件、合成事件、一次事件

頁面載入事件 js中的window.onload()方法，只有在元素加載完，以及該元素關聯的文件加載完以後才能執行；如果頁面中有多個window.onload(),瀏覽器只會執行最後一個（要實現多個wiondow.onload，須要使用addLoadEvent方法)

jq中的$().ready()方法，只要DOM元素加載完就能夠執行(能夠大幅提升頁面的相應速度以及執行效率)

ready()方法的4種寫法： 第一種：$(document).ready(function(){ 代碼內容 })

第二種： jQuery(document).ready(function(){ 代碼內容 }) 第三種 $(function(){ 代碼內容 }) 第四種 jQuery(function(){ 代碼部分 })

鼠標事件 click(單機)//dbclick(雙擊)//mouseover(移入）//mouseout（移出)//mousedown(按下）//mouseup（鬆開)//mousemove(鼠標移動)

語法: $().鼠標事件(function(){ 代碼塊 })

mouseover mouseout 鼠標在接觸/移除所選元素及其後代子元素時都會觸發事件

mouseenter mouseleave 鼠標在只接觸/移出所選元素時纔會觸發事件

鍵盤事件 keypress//keydown//keyup

補充：String.fromCharCode() 表示將ASCII碼轉換爲字符

keypress只有在按下字符鍵時觸發 keydowm 按下任意鍵都會觸發

表單事件 focus()得到焦點 // blur()失去焦點

focusin()和focusout()支持冒泡排序，而focus()和blur()不支持

change()事件

select事件（只能用於<input>和<textarea>這兩個元素）

submit()事件

具備得到焦點+失去焦點事件+change事件的元素有3個：text//textarea//select 下拉列表中列表項的選中事件是change而不是select

滾動事件 語法：$().scroll(fn) 滾動事件經常和scrollTop()和scrollLeft()這兩個方法一塊兒使用，在滾動條的位置發生變化時，觸發相應的事件

綁定事件 on()方法 語法：$().on(type,fn) type是必選參數，表示事件類型，type是一個字符串 fn必選，表示事件的處理函數

一、在jQuery中綁定事件不是還有bind()和live()麼？爲何站長不給咱們詳細講解一下？

從jQuery1.7開始（咱們如今用的是jQuery1.12.0），對於綁定事件，jQuery官方都建議使用on()方法來統一取代之前的bind()、live()和delegate()；對於解綁事件，jQuery官方也建議使用off()方法來統一取代之前的unbind()、die()和undelegate()。所以，你們必須瞭解和清楚這一點。

解綁事件 off( ) 語法：$().off(type)

合成事件$().hover(f1,f2) 語法：$("#wrapper").hover(function () { //第1個function的內容 }, function () { //第2個function的內容 })

一次性事件one() 語法： $().(type,fn)

事件對象event event.type 事件類型 event.pageX event.pageY 鼠標對於當前頁面的座標 event.preventDefault() 阻止默認行爲 event.stopPropagation()阻止事件冒泡 event.which 獲取用戶單擊鼠標時，單擊的是鼠標的哪一個按鍵 event.currentTarget 在事件冒泡過程當中的當前DOM元素

this 和event.target的區別：js中事件是會冒泡的，因此this是能夠變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素；

this和event.target都是dom對象：若是要使用jquey中的方法能夠將他們轉換爲jquery對象。好比this和$(this)的使用、event.target和$(event.target)的使用；

自定義事件 trigger事件：根據綁定到的匹配元素的給定的事件(原生或者自定義均可以)類型執行全部的處理程序和行爲 語法： $('#elem').on('Aaron', function(event,arg1,arg2) { alert("自觸自定義時間") }); $('#elem').trigger('Aaron',['參數1','參數2'])

.trigger()方法會影響全部與jquery對象所匹配的元素，使得DOM元素向上冒泡 要想阻止冒泡，可使用.triggerHandler()方法

》》》》》jQuery動畫基礎《《《《《《

顯示和隱藏（切換)：改變height、width和opacity屬性

語法：$().show(speed,callback) 顯示 speed必選，表示動畫執行速度，單位毫秒；callback爲必選參數 $().hide() 隱藏 $().toggle(speed,callback) 切換元素的顯示狀態

淡入和淡出：改變opacity屬性 語法： $().fadeIn(speed,callback) 淡入 $().fadeOut(speed,callback) 淡出 $().fadeToggle(speed)切換
$().fadeTo(speed,opacity,callback) 淡出效果 opacity必選，speed和callback爲可選參數 d

滑上和滑下:

語法：$().slideUp(speed,callback) 實現元素的滑上效果 $().slideDown(speed,callback) 滑下 $().slideToggle(speed,callback) 切換滑動狀態，配合flag一塊兒使用

自定義動畫 animate()方法 語法：$().animate(params, speed, callback) params是必選參數，是「屬性：值」列表 speed 可選參數 callback可選

!!注意 1.使用animate()方法改變顏色相關屬性時，須要調用jquery.color.js

2.在屬性值前面加上"+="表示累加（在原有屬性值的基礎上添加)

3.在animate方法中添加css後，css會馬上執行，正確的方法是將css放入在回調函數中

隊列動畫（鏈式效果) 語法: $().animate().animate()....

中止動畫效果: 語法:$().stop(clearQueue,gotoEnd)說明clearQueue是可選參數，表示是否要清空未執行的動畫隊列，默認false；gotdEnd表示是否將正在執行的動畫跳轉到末尾狀態，默認false

幾種狀況： stop() 僅中止當前動畫，後面的動畫能夠繼續執行 stop(true) 中止全部動畫，包括當前執行的動畫 stop(true,true) 中止全部動畫，但容許執行當前動畫 stop(false,true)中止當前動畫，直接跳到最後一個動畫

延遲動畫效果: 語法： $().delay(speed）

判斷動畫狀態 語法: if(!$().is(":animated")) { //若是當前沒有進行動畫，則添加新動畫 }

補充： 1.判斷元素是否在數組中:inArray(value,array,[fromIndex]) 2.去除空格 $.trim(元素) 3.獲取某個元素 .get(index) 4.獲取元素對象的索引 .index(selector/element) 注意：$().index() 返回的是同輩元素的排列順序

》》》》》》jQuery過濾和查找方法《《《 過濾方法：以方法的形式選擇某些元素

hasClass() 判斷是否含有某個類 true/false eq(n) 選擇指定下標的元素 is() 判斷元素是否符合某個條件 true/false not() 選擇不符合條件的元素 filter() 「自定義表達式」來選擇符合條件的元素 has() 「自定義表達式」選擇符合條件的元素

查找方法： 查找祖先元素： 父元素：parent(惟一) 祖先元素：parents(多個) 指定範圍:parentUntil（）

查找後代元素： 一級子元素：children(expression) 子元素+節點註釋(contents) find()找到指定後輩元素

向前查找兄弟元素： prev();prevAll();prevUntil() 向後查找兄弟元素： next();nextAll();nextUntil() 查找全部兄弟元素：siblings() 查找全部兄弟元素：