jQuery

選取(查詢)HTML元素,并對它們執行操作
基礎語法 : $(selector).action()
原則 : Get first Set all

文檔就緒函數

$(document).ready(function(){}) 簡化為$(function(){})

選擇器

基本選擇器

id選擇器

$('#id')

class選擇器

$('.class')

元素選擇器

$('element')

層次選擇器

$('div p') 選擇所有div元素中的p元素
$('#div>*') 選擇id為div元素的所有子元素
$('div + p') 選擇所有div的下一個元素p
$("#div ~ div")選擇id為div元素之后所有同一父級的div標簽

過濾選擇器

:first 選擇第一個元素
:last 選取最后一個元素
:not 取非元素

DOM操作

操作HTML元素和屬性的方法

獲取和設置內容屬性

text():設置或返回所選文本內容
html():設置或返回所選元素的內容(包含HTML)
val():設置或返回表單字段的值

添加

append():在被選元素的結尾插入內容
perpend():在被選元素的開頭插入內容
after():在被選元素之后插入內容
before():在被選元素之前插入內容

刪除

remove():刪除被選元素(及其子元素)
empty():刪除被選元素的子元素

css類

addClass():添加一個或多個類
removeClass():刪除一個或多個類

尺寸

width():設置或返回元素的寬度(不包含內邊距,邊框和外邊距)
height():設置或返回元素的高度(不包含內邊距,邊框和外邊距)
outerWidth():返回元素的寬度(包含內邊距和邊框)
outerHeight():返回元素的高度(包含內邊距和邊框)
offset():函數用于設置或返回當前匹配元素相對于當前文檔的偏移

遍歷

用根據其相對于其他元素的關系來'查找'(或選取)HTML元素,以某項選擇器開始,并沿著這個選擇移動,直到抵達期望的元素為止
each(callback):函數用于以當前jQuery對象匹配到每個元素作為上下文來遍歷執行指定的函數
eq(index):獲取當前index所對應的jQuery對象
find(expr):函數用于選取每個元素匹配指定表達是expr的后代元素
index():函數用于獲取當前jQuery對象中指定DOM元素的索引值

文檔遍歷

next():獲得匹配元素集合中每個元素緊鄰的同輩元素
prev():獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。
map():把當前匹配集合中的每個元素傳遞給函數，產生包含返回值的新 jQuery 對象。
filter():filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
siblings():獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。

效果

顯示隱藏

show(speed,callback):顯示
hide(speed,callback): 隱藏
toggle(speed,callback);切換顯示和隱藏

淡入淡出

fadeIn():淡入已隱藏的元素
fadeOut():淡出可見元素
fadeToggle():切換淡入和淡出效果

滑動

sildeDown():向下滑動元素
sildeUp():向上滑動元素
sildeToggle():切換向上向下滑動

jQuery實例

jQuery實現tab切換

css

div{
    width: 200px;
    height: 200px;
    background-color: #ccc;
    font-size: 100px;
    text-align: center;
    line-height: 200px;
    display: none;
   }
   .current{
    background-color: skyblue;
   }
   .show{
    display: block;
   }

html

  <input class="current" type="button" value="A" />
  <input type="button" value="B" />
  <input type="button" value="C" />
  <div class="show">A</div>
  <div>B</div>
  <div>C</div>

jQuery

$(function(){
   $('input').click(function(){
    $(this).addClass('current').siblings().removeClass()
    var $i = $('input').index($(this))
    $('div').hide().eq($i).show() 
   })
  })