快捷導(dǎo)航

jquery選擇器的選擇使用及性能介紹

更新時(shí)間：2013年01月16日 16:58:42 作者：

從這一講開始，我們將直正接觸一個(gè)JQ類庫(kù)，學(xué)習(xí)一下JQ的寫法，JQ的一些常用的命令等等，今天主要講的是JQ里的選擇器，這也是JQ的一大特點(diǎn)，這從它的名稱jQuery中可以看到，主要功力體現(xiàn)在查詢上

在寫完第一回之后，看到了朋友們的回復(fù)，指出了我代碼中的一些問題，確實(shí)由于時(shí)間倉(cāng)促?zèng)]有使用IDE，直接搞上了，又由于本人記憶力不好，所以把大小寫都忘記了，還好晚上回家，用VS改了一下，呵呵，真是對(duì)不住大家了。

從這一講開始，我們將直正接觸一個(gè)JQ類庫(kù)，學(xué)習(xí)一下JQ的寫法，JQ的一些常用的命令等等，今天主要講的是JQ里的選擇器，這也是JQ的一大特點(diǎn)，這從它的名稱jQuery中可以看到，主要功力體現(xiàn)在查詢上。

前言：對(duì)于寫在<script></script>中的代碼，一般在JS環(huán)境，我們一般把代碼寫在window.onload=function(){...}代碼塊里，這個(gè)意思是說，當(dāng)頁(yè)面加載完成后，再執(zhí)行JS代碼塊，而對(duì)于JQ來說，它也有類似的方法$(function(){...});我們把代碼段寫在這里面。有時(shí)如果不想那樣寫（這樣寫一般把JS代碼放在了<head></head>標(biāo)記里，但這樣會(huì)影響頁(yè)面加載的速度），可以把JS代碼寫在<body></body>的最底下。
ID選擇器

復(fù)制代碼代碼如下:

alert($("#name").val()); //輸出ID為name的input元素的值

類選擇器

復(fù)制代碼代碼如下:

 
alert($(".nameclass").val()); //輸出具有css名為nameclass的input元素的值 

特殊選擇器

復(fù)制代碼代碼如下:

 
alert($("input[type=text][name=name]").val()) //輸出類型為text，name為name的input元素的值 

復(fù)制代碼代碼如下:

 
//選中指定的select元素： 
function chekStatus(o) { 
$('#OrderStatus').find('option[value=' + o + ']').attr('selected', true); 
$('#search_btn').trigger(); 
} 
//全選 
$('#SelectAll').click(function() { 
if (this.checked) { 
$('.forShop:not(:checked)').each(function() { 
this.click(); 
}); 
} 
else { 
$('.forShop:checked').each(function() { 
this.click(); 
}); 
} 
}); 
//是否有選中項(xiàng) 
$('#delSelectProduct').click(function() { 
if ($('.protuctitem:checked').size() == 0) { 
alert('請(qǐng)選擇寶貝'); 
return false; 
} 
//根據(jù)索引，選中指定的option,并為option添加CSS樣式 
function chekStatus(o) { 
$('#OrderStatus').find('option')[o].selected = true; 
$($('#tabs').find('dd').removeClass('cur')[o]).addClass('cur'); 
$('#search_btn').trigger('click'); 
} 
//為表格的行加隔行變色特效，單擊行后，再變色 
var $trs = $("#baike_div>table>tbody>tr"); //選擇所有行 
$trs.filter(":odd").addClass("odd"); //給奇數(shù)行添加odd樣式 
$trs.filter(":even").addClass("even"); //給偶數(shù)行添加odd樣式 

下面有一些選擇器的技巧，需要我們?nèi)チ私?

復(fù)制代碼代碼如下:

 
//(1)通配符： 
$("input[id^='code']"); //id屬性以code開始的所有input標(biāo)簽 
$("input[id$='code']"); //id屬性以code結(jié)束的所有input標(biāo)簽 
$("input[id*='code']"); //id屬性包含code的所有input標(biāo)簽 
//(2)根據(jù)索引選擇 
$("tbody tr:even"); //選擇索引為偶數(shù)的所有tr標(biāo)簽 
$("tbody tr:odd"); //選擇索引為奇數(shù)的所有tr標(biāo)簽 
//(3)獲得jqueryObj下一級(jí)節(jié)點(diǎn)的input個(gè)數(shù) 
jqueryObj.children("input").length; 
//(4)獲得class為main的標(biāo)簽的子節(jié)點(diǎn)下所有<a>標(biāo)簽 
$(".main > a"); 
//(5)選擇緊鄰標(biāo)簽 
jqueryObj.next("div"); //獲取jqueryObj標(biāo)簽的后面緊鄰的一個(gè)div，nextAll獲取所有 
// (6)根據(jù)索引選擇 
$("div").eq(0); //獲取第一個(gè)div標(biāo)簽 
//篩選器 
$("#code input:not([id^='code'])"); //id為code標(biāo)簽內(nèi)不包含id以code開始的所有input標(biāo)簽 

面我列出了項(xiàng)目中經(jīng)常用到了一些選擇器，事實(shí)上只要理解了它們的直正含義，我們每個(gè)人都可以寫了特定的JQ代碼，當(dāng)然代碼的效率是否高效還需要我們自己進(jìn)一步的努力，
總之實(shí)現(xiàn)基本的需求的功能，只是第一步！

小知識(shí)：$("#...")這些選擇器的返回值其時(shí)是一個(gè)JQ對(duì)象，而它可以直接操作JQ的內(nèi)部事件，如click,mouseover等事件

好了，總算是把JQ選擇器這塊寫完了，謝謝您的閱讀！

您可能感興趣的文章: