Jquery常用選擇表達(dá)式

CSS選擇器

jQuery元素表達(dá)式

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

$('a:first')//選擇網(wǎng)頁中第一個(gè)a元素   $('tr:odd')//選擇表格的奇數(shù)行   $('#myForm :input')//選擇表單中的input元素   $('div:visible') //選擇可見的div元素   $('div:gt(2)')//選擇所有的div元素，除了前三個(gè)   $('div:animated')//選擇當(dāng)前處于動(dòng)畫狀態(tài)的div元素 

Jquery遍歷，過濾器

Jquery過濾元素

Jquery遍歷（Jquery在DOM樹上的移動(dòng)）

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

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

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

Jquery的鏈?zhǔn)讲僮?/p>

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

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

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

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

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

Jquery對(duì)元素進(jìn)行：取值和賦值

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

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

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

Jquery元素插入，移動(dòng)操作

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

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

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

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

Jquery對(duì)元素進(jìn)行復(fù)制、刪除和創(chuàng)建

復(fù)制元素使用.clone()　　刪除元素使用.remove()和.detach()。兩者的區(qū)別在于，前者不保留被刪除元素的事件，后者保留，有利于重新插入文檔時(shí)使用?！　∏蹇赵貎?nèi)容（但是不刪除該元素）使用.empty()?！　?chuàng)建新元素的方法非常簡單，只要把新元素直接傳入jQuery的構(gòu)造函數(shù)就行了：

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

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

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

Jquery其他的常用工具方法

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

Jquery主要的事件操作

jQuery可以對(duì)網(wǎng)頁元素綁定事件。根據(jù)不同的事件，運(yùn)行相應(yīng)的函數(shù)。

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

alert('Hello'); 

});

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