Jquery常用選擇表達式

CSS選擇器

jQuery元素表達式

$(document)//選擇整個文檔對象   $('#myId')//選擇ID為myId的網頁元素   $('div.myClass')//選擇class為myClass的div元素   $('input[name=first]')//選擇name屬性等于first的input元素

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

Jquery遍歷，過濾器

Jquery過濾元素

Jquery遍歷（Jquery在DOM樹上的移動）

$('div').has('p'); //選擇包含p元素的div元素  $('div').not('.myClass'); //選擇class不等于myClass的div元素  $('div').filter('.myClass'); //選擇class等于myClass的div元素  

$('div').first(); //選擇第1個div元素  $('div').eq(5); //選擇第6個div元素 

$('div').next('p'); //選擇div元素后面的第一個p元素   $('div').parent(); //選擇div元素的父元素   $('div').closest('form'); //選擇離div最近的那個form父元素   $('div').children(); //選擇div的所有子元素   $('div').siblings(); //選擇div的同級元素 

Jquery的鏈式操作

jQuery允許將所有操作連接在一起，以鏈條的形式寫出來，比如： $('div').find('h3').eq(2).html('Hello');  

1. $('div')                 //找到div元素  

2. .find('h3')           //選擇其中的h3元素 

3. .eq(2)               //選擇第3個h3元素  

4. .html('Hello');  //將它的內容改為Hello  

Jquery對元素進行：取值和賦值

需要特別注意的是，如果結果集包含多個元素，那么賦值的時候，將對其中所有的元素賦值；取值的時候，則是只取出第一個元素的值（.text()例外，它取出所有元素的text內容）。

$('h1').html(); //html()沒有參數，表示取出h1的值  $('h1').html('Hello'); //html()有參數Hello，表示對h1進行賦值  常見的取值和賦值函數如下：

1. .html() 返回或設置被選元素的內容 (inner HTML)    2. .text() 取出或設置text內容      3. .attr() 取出或設置某個屬性的值    4. .width() 取出或設置某個元素的寬度    5. .height() 取出或設置某個元素的高度  6. .val() 取出或設置html內容 取出某個表單元素的值

Jquery元素插入，移動操作

.insertAfter()，把div元素移動p元素后面：

$('div').insertAfter('p');.after()，把p元素加到div元素前面：

$('p').after('div');使用這種模式的操作方法，一共有四對

.insertAfter()和.after()：在現存元素的外部，從后面插入元素  2. .insertBefore()和.before()：在現存元素的外部，從前面插入元素  3. .appendTo()和.append()：在現存元素的內部，從后面插入元素  4. .PRependTo()和.prepend()  ：在現存元素的內部，從前面插入元素

Jquery對元素進行復制、刪除和創建

復制元素使用.clone()　　刪除元素使用.remove()和.detach()。兩者的區別在于，前者不保留被刪除元素的事件，后者保留，有利于重新插入文檔時使用?！　∏蹇赵貎热荩ǖ遣粍h除該元素）使用.empty()。　　創建新元素的方法非常簡單，只要把新元素直接傳入jQuery的構造函數就行了：

* $('<p>Hello</p>'); 

* $('<li class="new">new list item</li>'); 

* $('ul').append('<li>list item</li>');

Jquery其他的常用工具方法

$.trim() 去除字符串兩端的空格。 $.each() 遍歷一個數組或對象。   $.inArray() 返回一個值在數組中的索引位置。如果該值不在數組中，則返回-1。   $.grep() 返回數組中符合某種標準的元素。    $.extend() 將多個對象，合并到第一個對象。    $.makeArray() 將對象轉化為數組。   $.type() 判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等）。   $.isArray() 判斷某個參數是否為數組。   $.isEmptyObject() 判斷某個對象是否為空（不含有任何屬性）。   $.isFunction() 判斷某個參數是否為函數。   $.isPlainObject() 判斷某個參數是否為用"{}"或"new Object"建立的對象。   $.support() 判斷瀏覽器是否支持某個特性。

Jquery主要的事件操作

jQuery可以對網頁元素綁定事件。根據不同的事件，運行相應的函數。

$('p').click(function(){ 

alert('Hello'); 

});

.blur() 表單元素失去焦點。   .change() 表單元素的值發生變化   .click() 鼠標單擊   .dblclick() 鼠標雙擊   .focus() 表單元素獲得焦點   .focusin() 子元素獲得焦點   .focusout() 子元素失去焦點   .hover() 同時為mouseenter和mouseleave事件指定處理函數   .keydown() 按下鍵盤（長時間按鍵，只返回一個事件）   .keypress() 按下鍵盤（長時間按鍵，將返回多個事件）   .keyup() 松開鍵盤   .load() 元素加載完畢   .mousedown() 按下鼠標   .mouseenter() 鼠標進入（進入子元素不觸發）   .mouseleave() 鼠標離開（離開子元素不觸發）   .mousemove() 鼠標在元素內部移動   .mouSEOut() 鼠標離開（離開子元素也觸發）   .mouseover() 鼠標進入（進入子元素也觸發）   .mouseup() 松開鼠標   .ready() DOM加載完成   .resize() 瀏覽器窗口的大小發生改變   .scroll() 滾動條的位置發生變化   .select() 用戶選中文本框中的內容   .submit() 用戶遞交表單   .toggle() 根據鼠標點擊的次數，依次運行多個函數   .unload()