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

NO IMAGE

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

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

前言:對於寫在<script></script>中的程式碼,一般在JS環境,我們一般把程式碼寫在window.onload=function(){…}程式碼塊裡,這個意思是說,當頁面載入完成後,再執行JS程式碼塊,而對於JQ來說,它也有類似的方法$(function(){…});我們把程式碼段寫在這裡面。有時如果不想那樣寫(這樣寫一般把JS程式碼放在了<head></head>標記裡,但這樣會影響頁面載入的速度),可以把JS程式碼寫在<body></body>的最底下。
ID選擇器
複製程式碼 程式碼如下:
alert($(“#name”).val()); //輸出ID為name的input元素的值

類選擇器
複製程式碼 程式碼如下:
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的標籤的子節點下所有<a>標籤
$(“.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選擇器這塊寫完了,謝謝您的閱讀!

您可能感興趣的文章:

JQuery Tips(4) 一些關於提高JQuery效能的TipsJquery優化效率 提升效能解決方案jquery提升效能最佳實踐小結基於jquery的高效能td和input切換並可修改內容實現程式碼打造基於jQuery的高效能TreeView(asp.net)JQuery each()函式如何優化迴圈DOM結構的效能js的壓縮及jquery壓縮探討(提高頁面載入效能/保護勞動成果)JQuery for與each效能比較分析提升jQuery的效能需要做好七件事