我是如何去瞭解jquery的(二),復雜選擇符 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

在上一節裡,我們已經瞭解到瞭關於jquery的一些基礎知識和基礎查詢DOM語句。今天,我們來聊聊稍微復雜的查詢語句,說復雜瞭,其實也不復雜,還是在CSS3的標準上來的,重點說下我們日常工作中會比較常用的,其餘和可以參考手冊。歡迎前端工作者加入Q群:70210212

 

本文的案例請點擊這裡。

在說這個課題時,我覺得有必要講另外一些上一次沒講到的東西,比如上一節有說到給段落添加class樣式類用到的是addClass("even"),就有人說瞭,我隻想寫很簡單的樣式,沒必要新加個class,這個時候我們就可以使用$("").css("color","red")這種寫法瞭,很一目瞭然,如果有多個,你可以連續往後點下去,因為它都是返回的jquery對象,所以都有這個css()方法,代碼如下:

$(":button").css({"background-color":"gray","color":"white"}).css("font-size","24px").addClass("even");

這裡有兩種方法編寫多個樣式的,一種就是剛才說的連續點擊加方法,還有一種就是以json格式,看上面這個例子,很容易看懂,它以大括號開始,然後是屬性加冒號對應屬性的值,多個用逗號分隔。這些都是設置html元素的style,如果我們要得到style裡的值的話,應該這麼寫$("#id").css("fontsize"),這樣就得到字體瞭,這就好像是一個動態參數,你如果隻傳第一個參數,它就是返回(getter)值,如果你傳瞭第二個參數,它就是設置(setter)值。第二個參數還可以是一個函數,隻要你返回正確的值就行瞭,如:

$(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;//這裡要記得return 值;
      }
});

在jquery裡的,隻不是有返回字符串的,基本上都是可以連點方法名的,就是你可以$("#id").css(…).html(…).find(…)….這樣一直點下去。

言歸正傳,說說今天的主題,關於復雜的匹配符有哪些呢,請看大屏幕↓ 

 這裡面應該有十幾二十個吧,我就不一一列舉瞭,我隻說其中的三兩個,首先要說的就是屬性選擇符,[]它以中括號括起來,裡面是屬性名='屬性值',比如你想要找type="button"的控件的值,你可以這樣寫:

$("[type='button']").val();

  val()方法就是取表單控件裡的value或text值的,它隻取第一個值,所以如果是集合的話,就要進行each循環瞭,既然是表單控件,所以jquery又有對表單更簡約的寫法:

$(":button").val()

  這個冒號選擇符也是很常見,這裡它取的是input裡的type屬性,但如果我要根據其他屬性查找控件的話,還是得用中括符,html是可以任意定義一些屬性的,比如我的HTML裡這樣寫:

 <input ref='xxx' type="checkbox" name="newsletter" value="Hot Fuzz" />

 這裡的ref="xxx"就是我自己隨便寫的一個屬性,如果我要查找頁面裡有ref這個屬性的所有控件的話,可以這樣寫:

console.log($("[ref]"))

 這樣我們在firebug的控制臺裡就可以看到凡是包含ref屬性的節點瞭,如果再繼續加條件,比如,我要查找input控制裡的ref等於xxx的並且class等myclassName的dom節點的話,就可以這樣寫:

console.log($("input[ref='xxx'].myclassName:eq(0)"));

 

甚至你可以把其他更多的條件加起來,比如我要滿足以上條件的第一個節點,是不是越來越不順眼瞭,要是能把這些條件像方法那樣點出來該多好,正巧,jquery團隊也是這麼做的,它同樣可以把它們以方法的形式展現出來:

$("*").find("input").filter("[ref='xxx']").filter(".myclassName").first()

代碼是變長瞭,但更好理解瞭,你可以適當的把它寫的剛好既好理解,又代碼量不大,這個分寸就看你的把握瞭,這裡的find是查找後代元素,filter是篩選出符合條件的元素,first()是取第一個jquery對象,和get(0)不一樣,get(0)或[0]的意思是取出第一個dom對象,它就變成瞭"原生"的Js瞭,上一節裡提到過原生的和jquery對象間的轉換不要忘記瞭。

講瞭這麼多,也寫瞭這麼多代碼,可能把你們也看糊塗瞭,這些東西有鳥用啊,我一直用$("#id")不就好瞭,反正我要寫js的地方都會寫上id,實則不然,下面我就演示一個全選和多選的例子,來說明下它的作用:

html:

<p id="myp">
  <input ref='xxx' type="checkbox" name="newsletter" value="Hot Fuzz" />
  <input type="checkbox" name="newsletter" id="newsletter" value="Cold Fusion" />
  <input type="checkbox" name="accept" value="Evil Plans" />
  <input type="text" id="mytxt" value="xxxx"/>
<input type="checkbox" value="全選/反選" name="checkAll"/>全選/反選
<input type="button" id="btn_first" value="第1個checkbox的值" onclick="alert($(':checkbox:eq(0)').val());console.log($(':checkbox').first().val())"/>
<input type="button" id="btn_select" value="選中checkbox的值" onclick="showArrValue($(':checkbox:checked'))"/>
  </p>

 

 JS:

$(function(){
$("[ref='xxx']").attr("title","這是TITLE")
    //console.log($("#mytxt").val())
    $("[name='checkAll']").click(checkAll)
    function checkAll(){
        $("[type='checkbox']:not([name='checkAll'])").each(function(){
            $(this).attr("checked", !$(this).attr("checked"));
        });
        return true;
    }
});

這裡的全選checkbox是name='checkAll',它點擊後我們要把頁面裡的其他checkbox選中或反選, $("[type='checkbox']:not([name='checkAll'])")在這裡,為什麼我要這樣去查,為什麼會用:not去掉checkAll這個呢,你可以自己試下,如果不去掉的話,全選這個它自己就永遠選不中。這個功能就算基本完成瞭,反選就是把它的checked的屬性改成它自身相反的屬性.

但這個功能是不是最優解決方案呢,顯然不是,如果我先選中瞭其中的一些checkbox,再選中全選的話,它會把我選中的變成未選中,雖然合乎邏輯,但不合情理,所以我們要把它改善一下,變成隻全選/反選勾上,就是全選,沒勾就是反選。代碼如下:

function checkAll(){
        $(":checkbox").attr("checked", $("[name='checkAll']").attr("checked"));
        return true;
    }

這裡沒有用到each,是因為我們對象每一項都是用一樣的值去填充,它內部會自動完成each的操作,這樣是不是會比剛才好那麼一點呢,或者你還覺得不夠,還希望更進一步,隻要選中所有的其他checkbox,全選就自動選中,或者隻要選中一個或以上,全選就選中,再點就是反選,這些解決方案都不錯,你可以自己動手試試。前端是一個為人服務的職業,隻有更貼近人的習慣,才叫good,正所謂大傢好才是真的好!

OK,今天就到此為止,大傢有任何疑問都不要問我,請反復閱讀這兩篇文章!本文的案例請點擊這裡

發佈留言