1. 程式人生 > 實用技巧 >jQuery主要功能簡析

jQuery主要功能簡析

獲取元素

jQuery的基本設計思想和主要用法,就是選擇某個網頁元素,然後對其進行操作。
css選擇器

$(document) 選擇整個文件
$('#myId') 選擇id為#id的網頁元素
$('div.myClass') 選擇class為myClass的選擇器
$('input[name=mine]') 選擇name屬性等於mine的input元素

jQuery特有的表示式

$('a:firt') 選擇網頁第一個a元素
$('tr:odd') 選擇表格的奇數行
$('#myForm :input')選擇表單中的input元素
$('div:visible') 選擇可見的div元素
$('div:gt(2)') 選擇所有的div元素,除了前三個
$('div:animated') 選擇當前處於動畫狀態的div的元素

鏈式操作

每一步的jQuery操作,返回的都是jQuery物件,所以可以連在一起

 $('div').find('h3').eq(2).html('h3');

分解後

$('div') 找到div元素
      .find('h3') 選擇其中的h3元素
      .eq(2) 選擇第三個h3元素
      .html('h3') 將它的內容改成h3

jQuery提供了end(),可以後退一步

建立元素

$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');

移動元素

$('div').insertAfter($('p')); 把div元素移動到p的後面
$('p').after($('div')); 在p元素的後面插入div元素

修改屬性

attr() 設定或返回備選元素的屬性值
removeAttr() 從每一個匹配的元素中刪除一個屬性
addClass() 為每個匹配的元素新增指定的類名。
removeClass() 從所有匹配的元素中刪除全部或者指定的類
toggleClass() 如果存在(不存在)就刪除(新增)一個類
html() 取得第一個匹配元素的html內容或設定html內容
text() 取得所有匹配元素的內容或設定text內容
val() 獲得匹配元素的當前值