jquery選擇器的選擇使用及效能介紹_jquery

在寫完第一回之後，看到了朋友們的回复，指出了我代碼中的一些問題，確實由於時間倉促沒有使用IDE，直接搞上了，又由於本人記憶力不好，所以把大小寫都忘了，還好晚上回家，用VS改了一下，呵呵，真是對不住大家了。

從這一講開始，我們將直正接觸一個JQ類庫，學習一下JQ的寫法，JQ的一些常用的命令等等，今天主要講的是JQ裡的選擇器，這也是JQ的一大特點，這從它的名稱jQuery可以看到，主要功力體現在查詢上。

前言：對於寫在<script></script>中的程式碼，一般在JS環境，我們一般把程式碼寫在window.onload=function(){... }程式碼區塊裡，這個意思是說，當頁面載入完成後，再執行JS程式碼區塊，而對於JQ來說，它也有類似的方法$(function(){...});我們把程式碼片段寫在這裡面。有時如果不想那樣寫（這樣寫一般把JS程式碼放在了

標記裡，但這樣會影響頁面載入的速度），可以把JS程式碼寫在的最底下。
ID選擇器

複製代碼 代碼如下:

代碼如下:

類別選擇器 複製程式碼

程式碼如下:

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

特殊選擇器 複製代碼

程式碼如下:

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

複製程式碼

程式碼如下:



程式碼如下:


/🎜>選取指定的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();
});
}
});
//是否有選取項目
$('#delSelectProduct').click(function() {
if ($('.protuctitem:checked').size() == 0) {
alert('請選擇寶貝');
return false;
}
//根據索引，選取指定的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"); //給奇數行加入odd樣式$trs.filter(":even").addClass("even"); //為偶數行加上odd樣式 下面有一些選擇器的技巧，需要我們去了解

複製代碼


代碼如下:


//(1)通配符：
$("input[id^='code']"); //id屬性以code開始的所有input標籤
$("input[id$='code']"); //id屬性以code結束的所有input標籤
$("input[id*='code']"); //id屬性包含code的所有input標籤
//(2)根據索引選擇
$( "tbody tr:even"); //選擇索引為偶數的所有tr標籤
$("tbody tr:odd"); //選擇索引為奇數的所有tr標籤
//(3)取得jqueryObj下一級節點的input個數
jqueryObj.children("input").length;
//(4)取得class為main的標籤的子節點下所有標籤
$ (".main > a");

//(5)選擇緊鄰標籤jqueryObj.next("div"); //取得jqueryObj標籤的後面緊鄰的一個div，nextAll取得所有 // (6)依索引選擇$("div").eq(0); //取得第一個div標籤//篩選器$("#code input:not( [id^='code'])"); //id為code標籤內不包含id以code開始的所有input標籤
面我列出了專案中經常用到了一些選擇器，事實上只要理解了它們的直正含義，我們每個人都可以寫了特定的JQ代碼，當然代碼的效率是否高效還需要我們自己進一步的努力，
總之實現基本的需求的功能，只是第一步！

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

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