作為一個後端程式員，也是要和前端頁面打交道的。最常見的場景莫過DOM元素操作和前端頁面使用AJAX向伺服器發送請求。
實作上述兩個功能當然可以使用原生js來完成，但在實際開發過程中很少這樣做，通常會使用一些别人封裝好的js庫來輔助我們的工作，jQuery就是這些輔助庫中的一員。
常用選擇器
| 選擇器 | 說明 |
|---|---|
| element | $('标簽名')，$('a')選取頁面上的所有a标簽，傳回類型是DOM元素數組 |
| class | $('.類名')，$('.cls')選取頁面上class屬性為cls的标簽，傳回類型是DOM元素數組 |
| id | $('#value')，選取頁面上id=value的标簽 |
| $('[name]')，選取帶有name屬性的标簽，傳回類型是DOM元素數組 | |
| $('[name="tag"]')，選取name=tag的标簽，傳回類型是DOM元素數組 | |
| attribute | $('[name!="tag"]')，選取name不等于tag的标簽，傳回類型是DOM元素數組 |
| $('[href=".jpg"]')，選取所有href屬性值以 ".jpg" 結尾的标簽，傳回類型是DOM元素數組 |
| : | |
|---|---|
| :hidden | $("label:hidden")，所有隐藏的label元素，傳回類型是DOM元素數組 |
| :visible | $("lable:visible")，所有可見的label元素，傳回類型是DOM元素數組 |
| :first | $("p:first")，選擇頁面上的第一個p元素 |
| :last | $("p:last")，選擇頁面上的最後一個p元素 |
| :even | $("tr:even")，選取頁面上索引為偶數的tr元素，傳回類型是DOM元素數組 |
| :odd | $("tr:odd")，選取頁面上索引為奇數的tr元素，傳回類型是DOM元素數組 |
| :not() | $("input:not(:empty)")，所有不為空的 input 元素 |
| input | |
|---|---|
| :input | 選取頁面上的所有input元素，傳回類型是DOM元素數組 |
| :type | $(":text")等價于$('input[type=text]')，選取頁面中所有type="text"的input元素。input常用type值有text,radio,checkbox,text,submit,password等。 |
選擇器的綜合使用
//操作多種标簽
$('p,div,input').attr('name','multi');
// 一個标簽使用多個樣式類
<div class='main-title ng-binding ng-scope'></div>
$('.main-title.ng-binding.ng-scope');
//選取被選中的radiobutton
$(':radio[name=""]:checked');
或
$(':radio:checked');//選取頁面上所有被選中的radiobutton
//選取class屬性值是style的p标簽
$('p.style');
//選取div所有子元素中的p标簽
$('div p');
或
$('div>p').;
//擷取值是★的td标簽
$('td:contains("★")')
//選擇id='table'的标簽中的第一個tr标簽
$('#table tr:first');
//選取id='table'标簽中的索引為奇數且沒有使用類名為'last'的所有tr标簽
//且為選擇的元素添加even類
$('#table tr:odd:not(.last)').addClass('even');
//對id='table'标簽中的索引大于0小于3的所有tr标簽使用類名為'three'的樣式
$('#table tr:gt(0):lt(3)').addClass('three');
//表單
$("#form1 :enabled");//選取id為form1的表單内所有啟用的元素
$("#form1:enabled");//選取id為form1的已啟用的表單，注意這裡#form1和:enabled之間沒有空格，有空格表示選取子元素
$("#form1 :disabled");//選取id為form1的表單内所有禁用的元素 View Code
常用方法
jQuery的方法隻有jQuery對象才可以調用，DOM對象不能調用。
DOM對象和jQuery對象的互相轉換
//DOM轉jQuery
var win=$(window);//将window轉換為jQuery對象
//jQuery對象win轉DOM對象
win.get[0];
//或
win[0]; | 樣式屬性 | |
|---|---|
| attr() | $('#key').attr('id'),擷取id屬性值;$('#key').attr('name','tag'),設定name屬性值為tag,$('#key').attr('id',''),将id屬性值設為預設值 |
| removeAttr | 删除屬性，删除的屬性不再占用記憶體資源，在源代碼中看不到 |
| css() | $('#key').css('color','red')，設定id=key的标簽文本顔色為紅色 |
| addClass('className') | 給元素添加樣式 |
| removeClass('className') | 移除樣式 |
| toggleClass('className') | 啟用或關閉樣式 |
| 内容操作 | |
|---|---|
| text() | 針對非input使用，text()擷取元素中的文本，text('str')設定元素文本為str |
| html() | 和text類似，不同之處是html()可以使用html樣式， |
| val() | 針對input使用，val()擷取元素中的value屬性值，value('str')設定元素value屬性值為str |
| load() | 發送AJAX請求，重新擷取标簽要呈現的内容$('#lessonList').empty().load('/Lesson/UnionSearch/conditions?' + conditions); |
| 元素操作 | |
|---|---|
| hide() | 隐藏元素 |
| show() | 顯示元素 |
| 建立p元素 |
| append() | 向元素末尾添加子元素 |
| appendTo() | 将元素添加到指定的元素末尾 |
| children('selector') | 擷取标簽的所有子元素（不包括子元素的子元素），selector表示選擇器,可省略 |
| find('selector') | 根據selector擷取元素的所有子元素（包括子元素的子元素），selector不可省略 |
| each() | 周遊元素數組,例：$('p').each(function(){$(this).text('p');}); |
結語
以上這些是我在開發過程常用到的一些選擇器和方法，在此做個總結以備後續查詢使用。
最後說一點，同一個jQuery方法，可能會因為jQuery版本的不同而産生不同的效果。
版權聲明
本文為作者原創，版權歸作者雪飛鴻所有。
轉載必須保留文章的完整性，且在頁面明顯位置處标明原文連結。
如有問題， 請發送郵件和作者聯系。