您當前位置：首頁 > web前端 > htmlcss > jQuery學習筆記（一）使用jQuery選擇器（薦）

jQuery學習筆記（一）使用jQuery選擇器（薦）

來源：程序員人生發布時間：2015-01-24 08:40:53 閱讀次數：3873次

jQuery預先的javascript的編程，提供了計劃所有css3下的標準選擇器，開發者可以利用這些選擇器輕松選擇各種元素，供javascript使用。

重要的是jQuery對這些選擇器的兼容性特別好，主流的閱讀器都測試通過，這使得理論上的css3選擇器1下編程了事實。開發者可以依照之前的方法定義各種css種別，然后通過addClass()方法或className屬性將其添加到指定的元素集合中。

1.屬性選擇器

（屬性可以參考jQuery文檔或http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp）

屬性選擇器的語法是在標記的后面用中括號"[" 和"]"添加相干屬性，然后在賦予不同的邏輯關系。

以下為HTML

        <li>第1個</li>
        <li><a href="1⑴.html">第2個</a></li>
        <li><a href="1⑵.html" title="第3個">第3個</a></li>
        <li><a href="1⑶.html">第4個</a></li>
        <li><a href="1⑷.html" title="制作">第5個</a></li>

如果希望選擇設置了title屬性的標記，則使用以下語法

$("a[title]")

給設置了title屬性的兩個超鏈接添加css樣式

<style>
            .altcss {
                /* 設定某個CSS種別 */
                
                background-color: #005890;
                color: #4eff00;
            }
        </style>
<script type="text/javascript">
            $(function() {
                $("a[title]").addClass("altcss")
            });
        </script>

顯示樣式：

屬性選擇器還有很多種，大家可以參考各版本的jQuery的手冊靈活使用，經常使用的有以下幾類。

[attribute]
[attribute=value] //匹配給定的屬性是某個特定值的元素
[attribute!=value] //匹配所有不含有指定的屬性，或屬性不等于特定值的元素。
[attribute^=value] //匹配給定的屬性是以某些值開始的元素
[attribute$=value] //匹配給定的屬性是以某些值結尾的元素
[attribute*=value] //匹配給定的屬性是以包括某些值的元素

例如匹配超鏈接以pdf結尾的元素，可使用

    $(function() {
        $("li a[href$='pdf']")
    });

2.包括選擇器

jQuery還提供了包括選擇器用來選擇包括了某種特殊標記的元素，比如以下代碼：

$("li:has(a)")

表示給包括了超鏈接的li元素

例如

$("div:has(p)").addClass("test");

表示給所有包括 p 元素的 div 元素添加1個 test 類

最后整理了jQuery支持的css3屬性選擇器，貢獻查詢。

選擇器	說明
*	所有的標記
E	所著名稱為E的標記
EF	所著名稱為F的標記，并且是E標記的子標記（包括孫，重孫標記）
E>F	所著名稱為F的標記，并且是E標記的子標記（不包括孫標記）
E+F	所著名稱為F的標記，并且該標記緊接著前面的E標記
E~F	所著名稱為F的標記，并且該標記前面有1個E標記
E:has(F)	所著名稱為E的標記，并且該標記包括F標記
E.C	所著名稱為E的標記，屬性分類為C，如果去掉E，就是屬性選擇器.C
E#I	所著名稱為E的標記，id為I，如果去掉E，就是ＩＤ選擇器I
E[A]	所著名稱為E的標記，并且設置了屬性A
E[A=V]	所著名稱為E的標記，并且屬性A的值等于V
E[A^=V]	所著名稱為E的標記，并且屬性A的值以V開頭
E[A$=V]	所著名稱為E的標記，并且屬性A的值以V結尾
E[A *=V]	所著名稱為E的標記，并且屬性A的值包括V

	純屬手打，如有毛病，請指正

3.位置選擇器

css3還允許通過標記所處的位置來進行選擇，例如選擇第1個li元素

$("li:first-child")

選擇奇數行的li元素

$("li:nth-child(odd)")

需要注意的是:nth-child(odd)的選擇器和li:odd選擇出的結果是1樣的，這是由于：nth-child的相干css 選擇器是從1開始計數的，而其他的選擇器是從0開始計數的。

例如以下

$("p:eq(4)").addClass()

匹配添加className的元素有5個。

以下整理了jQuery支持的css3位置選擇器

選擇器	說明
:first	第1個元素
:last	最后1個元素
:first-child	第1個子元素
:last-child	最后1個子元素
:only-child	所有無兄弟的元素，例如：p:only-child選中所有的p元素，如果該p元素是父元素的唯1子元素
:nth-child(n)	第n個子元素（從1開始計數）
:nth-child(odd/even)	所有奇數號或偶數號子元素（從1開始計數）
:nth-child(nX+Y)	利用公式來計算元素的位置，例如li:nth-child(5n+1)，表示選中所有的li元素，并且這些li元素為父元素的的5n+1個元素（1,6,11,16...）
:odd或:even	奇數或偶數號元素
:eq(n)	第n個元素（從0開始計數）
:gt(n)	第n個以后的所有元素（n從0開始計數，并且計算不包括第n本身）
:lt(n)	第n個之前的所有元素（n從0開始計數，并且計算不包括第n本身）

	純屬手打，如有毛病，請指正

4.過濾選擇器

除css3中的1些選擇器外，jQuery還提供了很多自定義的過濾選擇器，用來處理更復雜的選擇。例如很多時候希望知道用戶所選中的復選框，如果通過屬性值來判斷，那末只能取得初始狀態下選中的情況，而不是真實的選擇情況。利用jQuery的:checked選擇器則可以輕松取得用戶的選擇。

實例代碼以下

<script src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
        <script type="text/javascript">
        function showChecked(oCheckBox){
            //使用checked過濾出被用戶選中的添加altcss
            $("input[name="+oCheckBox+"]:checked").addClass("altcss");
        }
        </script>
        <style>
            .altcss {
                /* 設定某個CSS種別 */
                }
        </style>
<form name="myform">
            <p>
                <label for="football">足球
                    <input type="checkbox" name="like" id="football" />
                </label>
            </p>
            <p>
                <label for="basketball">籃球
                    <input type="checkbox" name="like" id="basketball" />
                </label>
            </p>
            <p>
                <label for="volleyball">排球
                    <input type="checkbox" name="like" id="volleyball" />
                </label>
            </p>
            <p>
                <input type="button" value="顯示選擇" onclick="showChecked('like')">
            </p>
        </form>

另外，過濾器之間可以迭代使用。

:checkbox:checked:enabled

表示input type="checkbox"中所有被用戶選中而且沒有被禁用的。

以下整理了jQuery中經常使用的選擇過濾器

選擇器	說明
:animated	所有處于動畫中的元素
:button	所有按鈕，包括input[type=button]、[type=submit]、[type=reset]和<button>標記
:checkbox	所有復選框，同等于input[type=checkbox]標記
:contains(foo)	選擇了包括文本"foo"的元素
:disabled	頁面中被禁用了的元素
:enabled	頁面中沒有被禁用的元素
:file	上傳文件元素
:header	選中所有的標題元素，如<h1><h6>
:hidden	頁面中被隱藏了的元素
:image	圖片提交按鈕，同等于input[type=image]
:input	表單元素，包括<input>,<select>,<textarea>,<button>
:not(filter)	反向選擇
:parent	選擇所有子元素（包括文本）的元素，空元素將被排除
:password	密碼文本框,同等于input[type=password]
:radio	單選按鈕,同等于input[type=radio]
:reset	重置按鈕，同等于input[type=reset]
:selected	下拉菜單被選中的項
:submit	提交按鈕，包括input[type=submit]和button[type=submit]
:text	文本輸入框，同等于input[type=text]
:visble	頁面中的所有可見元素
	純屬手打，如有毛病，請指正

5.實現反向過濾

上述過濾器中的:not(filter)的過濾器可以進行反向選擇，其中filter參數可以是任意其它的過濾選擇器，例以下面代碼表示<input>標記中所有非radio元素

input:not(:radio)

另外過濾選擇器還可以迭代使用。

以下的例子就是使用jQuery的反向過濾功能。

<script src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                //迭代使用選擇器
                $(":input:not(:checkbox):not(:radio)").addClass("altcss");
            });
        </script>
        <style>
            .altcss {
                background-color: #ffbff4;
                text-decoration: underline;
                border: 1px solid #0000FF;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 12px;
            }
        </style>
        <form method="post" name="myForm1" action="addInfo.aspx">
            <p>
                <label for="name">姓名:</label>
                <input type="text" name="name" id="name">
            </p>
            <p>
                <label for="passwd">密碼:</label>
                <input type="password" name="passwd" id="passwd">
            </p>
            <p>
                <label for="color">最喜歡的色彩:</label>
                <select name="color" id="color">
 生活不易，碼農辛苦

 如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈

  