中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

Jquery真的(de)不難(nan)~第二回 選擇器的(de)使用及(ji)性能

回到目錄

在寫完第一回之(zhi)后，看到了(le)朋友(you)們的回復，指出了(le)我代碼中的一些問題，確實由(you)于時間倉促沒有使用(yong)IDE，直接搞(gao)上(shang)了(le)，又由(you)于本(ben)人(ren)記憶力不好，所(suo)以把大小寫都忘記了(le)，還(huan)好晚上(shang)回家，用(yong)VS改了(le)一下，呵(he)呵(he)，真是對不住大家了(le)。

從(cong)這(zhe)一(yi)講開(kai)始，我們將直正(zheng)接(jie)觸一(yi)個JQ類庫，學習一(yi)下(xia)JQ的寫法，JQ的一(yi)些常用的命令等等，今天(tian)主要講的是(shi)JQ里的選(xuan)擇(ze)器，這(zhe)也(ye)是(shi)JQ的一(yi)大特點(dian)，這(zhe)從(cong)它(ta)的名(ming)稱jQuery中可以看到，主要功(gong)力體現在查詢上。

前言：對(dui)于寫在<script></script>中(zhong)的代(dai)(dai)碼(ma)，一(yi)(yi)般(ban)(ban)在JS環(huan)境，我(wo)們(men)一(yi)(yi)般(ban)(ban)把(ba)代(dai)(dai)碼(ma)寫在window.onload=function(){...}代(dai)(dai)碼(ma)塊(kuai)里(li)(li)，這個(ge)意思是說(shuo)，當(dang)頁(ye)面(mian)加(jia)載完(wan)成后，再執行JS代(dai)(dai)碼(ma)塊(kuai)，而對(dui)于JQ來說(shuo)，它也有類(lei)似的方法$(function(){...});我(wo)們(men)把(ba)代(dai)(dai)碼(ma)段寫在這里(li)(li)面(mian)。有時如果不想那樣寫（這樣寫一(yi)(yi)般(ban)(ban)把(ba)JS代(dai)(dai)碼(ma)放在了<head></head>標記(ji)里(li)(li)，但這樣會(hui)影響頁(ye)面(mian)加(jia)載的速度(du)），可以把(ba)JS代(dai)(dai)碼(ma)寫在<body></body>的最底下。

ID選擇器

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

類選擇器

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

特殊選擇器

  alert($("input[type=text][name=name]").val()) //輸出類型為text，name為name的(de)input元素的(de)值
        //選中指定的select元素：
        function chekStatus(o) {
            $('#OrderStatus').find('option[value=' + o + ']').attr('selected', true);
            $('#search_btn').trigger();
        }

        //全(quan)選
            $('#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('請選(xuan)擇寶(bao)貝');
                    return false;
                }

     //根據(ju)索引(yin)，選中指定(ding)的option,并為option添加CSS樣式
      function chekStatus(o) {
            $('#OrderStatus').find('option')[o].selected = true;
            $($('#tabs').find('dd').removeClass('cur')[o]).addClass('cur');
            $('#search_btn').trigger('click');
       }

   //為表格(ge)的行加隔行變色特效，單擊(ji)行后，再變色 
    var $trs = $("#baike_div>table>tbody>tr"); //選擇所有行
    $trs.filter(":odd").addClass("odd"); //給奇數行添加(jia)odd樣式
    $trs.filter(":even").addClass("even"); //給偶數行添加odd樣式

下面有(you)一些選擇器的(de)技巧，需要我們去(qu)了解(jie)

            //(1)通配符：      
            $("input[id^='code']"); //id屬性(xing)以code開始的所有input標(biao)簽(qian)      
            $("input[id$='code']"); //id屬性以code結束的所(suo)有(you)input標簽      
            $("input[id*='code']"); //id屬(shu)性(xing)包含(han)code的所有input標簽(qian)      
            //(2)根據(ju)索引選(xuan)擇(ze)      
            $("tbody tr:even"); //選(xuan)擇索引(yin)為偶數的(de)所有tr標簽      
            $("tbody tr:odd");  //選擇索引(yin)為奇數的所有tr標(biao)簽(qian)      
            //(3)獲得(de)jqueryObj下一級節點的input個數      
            jqueryObj.children("input").length;
            //(4)獲得class為main的(de)標(biao)簽的(de)子節(jie)點下所(suo)有<a>標(biao)簽      
            $(".main > a");
            //(5)選(xuan)擇緊鄰標簽      
            jqueryObj.next("div"); //獲取(qu)jqueryObj標簽的(de)(de)后面(mian)緊鄰(lin)的(de)(de)一個div，nextAll獲取(qu)所有      
            // (6)根據索引選擇      
            $("div").eq(0); //獲(huo)取第一個div標簽      
            //篩選器      
            $("#code input:not([id^='code'])"); //id為code標(biao)簽(qian)內不包(bao)含id以code開(kai)始的所有input標(biao)簽(qian)

 

上(shang)面(mian)我(wo)列出了項目中經常用到了一些選(xuan)擇(ze)器，事實(shi)上(shang)只要理解了它們的(de)直正含義，我(wo)們每(mei)個人(ren)都(dou)可以寫了特定的(de)JQ代碼，當然代碼的(de)效率是否高效還(huan)需要我(wo)們自己進一步的(de)努力，

總(zong)之實現基(ji)本(ben)的需求的功能(neng)，只是第一(yi)步！

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

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

回到目錄

 

posted @ 2013-01-15 23:07  張占嶺  閱讀(1368)  評論(0)    收藏  舉報