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選擇器這塊寫完了,謝謝您的閱讀!

回到目錄

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com