Jquery真的不難~第二回 選擇器的使用及性能
在寫完第一回之后，看到了朋友們的回復，指出了我代碼中的一些問題，確實由於時間倉促沒有使用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選擇器這塊寫完了，謝謝您的閱讀！
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。