Jquery基本選擇器 層次選擇器 過濾選擇器 表單選擇器使用示例 帶註釋

[html]
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Jquery示例</title> 
    <style type="text/css"> 
    #menu {  
        width:300px;  
    } 
    .has_children{ 
        background : #555; 
        color :#fff; 
        cursor:pointer; 
    } 
    .highlight{ 
        color : #fff; 
        background : green; 
    } 
    p{ 
        padding:0; 
    } 
    p a{ 
        background : #888; 
        display : none; 
        float:left; 
        width:300px; 
    } 
    </style> 
    <!– 引入 jQuery –> 
    <script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
        //等待dom元素加載完畢. 
        $(document).ready(function () { 
            $(".has_children").click(function () { 
                $(this).addClass("highlight")           //為當前元素增加highlight類 
                .children("a").show().end()         //將子節點的a元素顯示出來並重新定位到上次操作的元素 
            .siblings().removeClass("highlight")        //獲取元素的兄弟元素，並去掉他們的highlight類 
                .children("a").hide();          //將兄弟元素下的a元素隱藏 
            }); 
 
            //—————————————————————— 
            //在一個id為table的表格的tbody中，如果每行最後一列中的checkbox沒有被禁用 
            //則把這行的背景設為紅色 
            $("#table>tbody>tr:has(td:last:has(:checkbox:enabled))").css("background", "red"); 
            //—————————————————————— 
            var obj = $("#cr");  //jQuery對象 
            obj.click(function () { 
                if (obj.is(":checked")) { //jQuery方式判斷是否選中 
                    alert("感謝你的支持!你可以繼續操作！"); 
                } 
            }) 
 
            //———————–基本選擇器———————————- 
            // 所有的span元素和id為two的p元素 
            $('#btn5').click(function () { 
                $('span,#two').css("background", "#bfa"); 
            }); 
 
            //———————–層次選擇器——————————- 
            // 選擇 body內的所有p元素. 
            $('#btn1').click(function () { 
                $('body p').css("background", "#bbffaa"); 
            }) 
            //在body內的選擇 元素名是p 的子元素. 
            $('#btn2').click(function () { 
                $('body > p').css("background", "#bbffaa"); 
            }) 
            //選擇 所有class為one 的下一個p元素. 
            $('#btn3').click(function () { 
                $('.one + p').css("background", "#bbffaa"); 
            }) 
            //選擇 id為two的元素後面的所有p兄弟元素. 
            $('#btn4').click(function () { 
                $('#two ~ p').css("background", "#bbffaa"); 
            }) 
            //————————過濾選擇器——————————– 
            //選擇第一個p元素. 
            $('#btn1').click(function () { 
                $('p:first').css("background", "#bfa"); 
            }) 
            //選擇最後一個p元素. 
            $('#btn2').click(function () { 
                $('p:last').css("background", "#bfa"); 
            }) 
            //選擇class不為one的 所有p元素. 
            $('#btn3').click(function () { 
                $('p:not(.one)').css("background", "#bfa"); 
            }) 
            //選擇 索引值為偶數 的p元素。 
            $('#btn4').click(function () { 
                $('p:even').css("background", "#bfa"); 
            }) 
            //選擇 索引值為奇數 的p元素。 
            $('#btn5').click(function () { 
                $('p:odd').css("background", "#bfa"); 
            }) 
            //選擇 索引等於 3 的元素 
            $('#btn6').click(function () { 
                $('p:eq(3)').css("background", "#bfa"); 
            }) 
            //選擇 索引大於 3 的元素 
            $('#btn7').click(function () { 
                $('p:gt(3)').css("background", "#bfa"); 
            }) 
            //選擇 索引小於 3 的元素 
            $('#btn8').click(function () { 
                $('p:lt(3)').css("background", "#bfa"); 
            }) 
            //選擇 所有的標題元素.比如h1, h2, h3等等… 
            $('#btn9').click(function () { 
                $(':header').css("background", "#bfa"); 
            }) 
            //選擇 當前正在執行動畫的所有元素. 
            $('#btn10').click(function () { 
                $(':animated').css("background", "#bfa"); 
            }); 
 
            //————————內容過濾選擇器—————————— 
            //選取含有文本"di"的p元素. 
            $('#btn1').click(function () { 
                $('p:contains(di)').css("background", "#bbffaa"); 
            }) 
            //選取不包含子元素(或者文本元素)的p空元素. 
            $('#btn2').click(function () { 
                $('p:empty').css("background", "#bbffaa"); 
            }) 
            //選取含有class為mini元素 的p元素. 
            $('#btn3').click(function () { 
                $('p:has(.mini)').css("background", "#bbffaa"); 
            }) 
            //選取含有子元素(或者文本元素)的p元素. 
            $('#btn4').click(function () { 
                $('p:parent').css("background", "#bbffaa"); 
            }) 
 
            //————————可見過濾選擇器—————————— 
            //選取所有不可見的元素.包括<input type="hidden"/>. 
            $('#btn_hidden').click(function () { 
                alert("不可見的元素有：" + $('body :hidden').length + "個!\n" + 
           "其中不可見的p元素有:" + $('p:hidden').length + "個!\n" + 
           "其中文本隱藏域有:" + $('input:hidden').length + "個!"); 
                $('p:hidden').show(3000).css("background", "#bbffaa"); 
            }) 
            //選取所有可見的元素. 
            $('#btn_visible').click(function () { 
                $('p:visible').css("background", "#FF6500"); 
            }) 
 
            //————————屬性過濾選擇器—————————— 
            //選取含有 屬性title 的p元素. 
            $('#btn1').click(function () { 
                $('p[title]').css("background", "#bbffaa"); 
            }) 
            //選取 屬性title值等於 test 的p元素. 
            $('#btn2').click(function () { 
                $('p[title=test]').css("background", "#bbffaa"); 
            }) 
            //選取 屬性title值不等於 test 的p元素. 
            $('#btn3').click(function () { 
                $('p[title!=test]').css("background", "#bbffaa"); 
            }) 
            //選取 屬性title值 以 te 開始 的p元素. 
            $('#btn4').click(function () { 
                $('p[title^=te]').css("background", "#bbffaa"); 
            }) 
            //選取 屬性title值 以 est 結束 的p元素. 
            $('#btn5').click(function () { 
                $("p[title$=est]").css("background", "#bbffaa"); 
            }) 
            //選取 屬性title值 含有 es  的p元素. 
            $('#btn6').click(function () { 
                $("p[title*=es]").css("background", "#bbffaa"); 
            }) 
            //組合屬性選擇器,首先選取有屬性id的p元素，然後在結果中 選取屬性title值 含有 es 的元素. 
            $('#btn7').click(function () { 
                $("p[id][title*=es]").css("background", "#bbffaa"); 
            }) 
 
            //————————子元素過濾選擇器—————————— 
            //選取每個父元素下的第2個子元素 
            $('#btn1').click(function () { 
                $('p.one :nth-child(2)').css("background", "#bbffaa"); 
            }) 
            //選取每個父元素下的第一個子元素 
            $('#btn2').click(function () { 
                $('p.one :first-child').css("background", "#bbffaa"); 
            }) 
            //選取每個父元素下的最後一個子元素 
            $('#btn3').click(function () { 
                $('p.one :last-child').css("background", "#bbffaa"); 
            }) 
            //如果父元素下的僅僅隻有一個子元素，那麼選中這個子元素 
            $('#btn4').click(function () { 
                $('p.one :only-child').css("background", "#bbffaa"); 
            }) 
     
        }); 
    </script> 
</head> 
<body> 
<p id="menu"> 
    <p class="has_children"> 
        <span>第1章-認識jQuery</span> 
        <a>1.1-JavaScript和JavaScript庫</a> 
        <a>1.2-加入jQuery</a> 
        <a>1.3-編寫簡單jQuery代碼</a> 
        <a>1.4-jQuery對象和DOM對象</a> 
        <a>1.5-解決jQuery和其它庫的沖突</a> 
        <a>1.6-jQuery開發工具和插件</a> 
        <a>1.7-小結</a> 
    </p> 
    <p class="has_children"> 
        <span>第2章-jQuery選擇器</span> 
        <a>2.1-jQuery選擇器是什麼</a> 
        <a>2.2-jQuery選擇器的優勢</a> 
        <a>2.3-jQuery選擇器</a> 
        <a>2.4-應用jQuery改寫示例</a> 
        <a>2.5-選擇器中的一些註意事項</a> 
        <a>2.6-案例研究——類似淘寶網品牌列表的效果</a> 
        <a>2.7-還有其它選擇器麼？</a> 
        <a>2.8-小結</a> 
    </p> 
    <p class="has_children"> 
        <span>第3章-jQuery中的DOM操作</span> 
        <a>3.1-DOM操作的分類</a> 
        <a>3.2-jQuery中的DOM操作</a> 
        <a>3.3-案例研究——某網站超鏈接和圖片提示效果</a> 
        <a>3.4-小結</a> 
    </p> 
</p> 
<p><input type="checkbox" id="cr"/><label for="cr">我已經閱讀瞭上面制度.</label></p> 
</body> 
</html> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Jquery示例</title>
    <style type="text/css">
    #menu {
     width:300px;
    }
    .has_children{
     background : #555;
     color :#fff;
     cursor:pointer;
    }
    .highlight{
     color : #fff;
     background : green;
    }
    p{
     padding:0;
    }
    p a{
     background : #888;
     display : none;
     float:left;
     width:300px;
    }
    </style>
    <!– 引入 jQuery –>
    <script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        //等待dom元素加載完畢.
        $(document).ready(function () {
            $(".has_children").click(function () {
                $(this).addClass("highlight")   //為當前元素增加highlight類
       .children("a").show().end()   //將子節點的a元素顯示出來並重新定位到上次操作的元素
      .siblings().removeClass("highlight")  //獲取元素的兄弟元素，並去掉他們的highlight類
       .children("a").hide();    //將兄弟元素下的a元素隱藏
            });

            //——————————————————————
            //在一個id為table的表格的tbody中，如果每行最後一列中的checkbox沒有被禁用
            //則把這行的背景設為紅色
            $("#table>tbody>tr:has(td:last:has(:checkbox:enabled))").css("background", "red");
            //——————————————————————
            var obj = $("#cr");  //jQuery對象
            obj.click(function () {
                if (obj.is(":checked")) { //jQuery方式判斷是否選中
                    alert("感謝你的支持!你可以繼續操作！");
                }
            })

            //———————–基本選擇器———————————-
            // 所有的span元素和id為two的p元素
            $('#btn5').click(function () {
                $('span,#two').css("background", "#bfa");
            });

            //———————–層次選擇器——————————-
            // 選擇 body內的所有p元素.
            $('#btn1').click(function () {
                $('body p').css("background", "#bbffaa");
            })
            //在body內的選擇 元素名是p 的子元素.
            $('#btn2').click(function () {
                $('body > p').css("background", "#bbffaa");
            })
            //選擇 所有class為one 的下一個p元素.
            $('#btn3').click(function () {
                $('.one + p').css("background", "#bbffaa");
            })
            //選擇 id為two的元素後面的所有p兄弟元素.
            $('#btn4').click(function () {
                $('#two ~ p').css("background", "#bbffaa");
            })
            //————————過濾選擇器——————————–
            //選擇第一個p元素.
            $('#btn1').click(function () {
                $('p:first').css("background", "#bfa");
            })
            //選擇最後一個p元素.
            $('#btn2').click(function () {
                $('p:last').css("background", "#bfa");
            })
            //選擇class不為one的 所有p元素.
            $('#btn3').click(function () {
                $('p:not(.one)').css("background", "#bfa");
            })
            //選擇 索引值為偶數 的p元素。
            $('#btn4').click(function () {
                $('p:even').css("background", "#bfa");
            })
            //選擇 索引值為奇數 的p元素。
            $('#btn5').click(function () {
                $('p:odd').css("background", "#bfa");
            })
            //選擇 索引等於 3 的元素
            $('#btn6').click(function () {
                $('p:eq(3)').css("background", "#bfa");
            })
            //選擇 索引大於 3 的元素
            $('#btn7').click(function () {
                $('p:gt(3)').css("background", "#bfa");
            })
            //選擇 索引小於 3 的元素
            $('#btn8').click(function () {
                $('p:lt(3)').css("background", "#bfa");
            })
            //選擇 所有的標題元素.比如h1, h2, h3等等…
            $('#btn9').click(function () {
                $(':header').css("background", "#bfa");
            })
            //選擇 當前正在執行動畫的所有元素.
            $('#btn10').click(function () {
                $(':animated').css("background", "#bfa");
            });

            //————————內容過濾選擇器——————————
            //選取含有文本"di"的p元素.
            $('#btn1').click(function () {
                $('p:contains(di)').css("background", "#bbffaa");
            })
            //選取不包含子元素(或者文本元素)的p空元素.
            $('#btn2').click(function () {
                $('p:empty').css("background", "#bbffaa");
            })
            //選取含有class為mini元素 的p元素.
            $('#btn3').click(function () {
                $('p:has(.mini)').css("background", "#bbffaa");
            })
            //選取含有子元素(或者文本元素)的p元素.
            $('#btn4').click(function () {
                $('p:parent').css("background", "#bbffaa");
            })

            //————————可見過濾選擇器——————————
            //選取所有不可見的元素.包括<input type="hidden"/>.
            $('#btn_hidden').click(function () {
                alert("不可見的元素有：" + $('body :hidden').length + "個!\n" +
     "其中不可見的p元素有:" + $('p:hidden').length + "個!\n" +
     "其中文本隱藏域有:" + $('input:hidden').length + "個!");
                $('p:hidden').show(3000).css("background", "#bbffaa");
            })
            //選取所有可見的元素.
            $('#btn_visible').click(function () {
                $('p:visible').css("background", "#FF6500");
            })

            //————————屬性過濾選擇器——————————
            //選取含有 屬性title 的p元素.
            $('#btn1').click(function () {
                $('p[title]').css("background", "#bbffaa");
            })
            //選取 屬性title值等於 test 的p元素.
            $('#btn2').click(function () {
                $('p[title=test]').css("background", "#bbffaa");
            })
            //選取 屬性title值不等於 test 的p元素.
            $('#btn3').click(function () {
                $('p[title!=test]').css("background", "#bbffaa");
            })
            //選取 屬性title值 以 te 開始 的p元素.
            $('#btn4').click(function () {
                $('p[title^=te]').css("background", "#bbffaa");
            })
            //選取 屬性title值 以 est 結束 的p元素.
            $('#btn5').click(function () {
                $("p[title$=est]").css("background", "#bbffaa");
            })
            //選取 屬性title值 含有 es  的p元素.
            $('#btn6').click(function () {
                $("p[title*=es]").css("background", "#bbffaa");
            })
            //組合屬性選擇器,首先選取有屬性id的p元素，然後在結果中 選取屬性title值 含有 es 的元素.
            $('#btn7').click(function () {
                $("p[id][title*=es]").css("background", "#bbffaa");
            })

            //————————子元素過濾選擇器——————————
            //選取每個父元素下的第2個子元素
            $('#btn1').click(function () {
                $('p.one :nth-child(2)').css("background", "#bbffaa");
            })
            //選取每個父元素下的第一個子元素
            $('#btn2').click(function () {
                $('p.one :first-child').css("background", "#bbffaa");
            })
            //選取每個父元素下的最後一個子元素
            $('#btn3').click(function () {
                $('p.one :last-child').css("background", "#bbffaa");
            })
            //如果父元素下的僅僅隻有一個子元素，那麼選中這個子元素
            $('#btn4').click(function () {
                $('p.one :only-child').css("background", "#bbffaa");
            })
 
        });
    </script>
</head>
<body>
<p id="menu">
 <p class="has_children">
  <span>第1章-認識jQuery</span>
  <a>1.1-JavaScript和JavaScript庫</a>
  <a>1.2-加入jQuery</a>
  <a>1.3-編寫簡單jQuery代碼</a>
  <a>1.4-jQuery對象和DOM對象</a>
  <a>1.5-解決jQuery和其它庫的沖突</a>
  <a>1.6-jQuery開發工具和插件</a>
  <a>1.7-小結</a>
 </p>
 <p class="has_children">
  <span>第2章-jQuery選擇器</span>
  <a>2.1-jQuery選擇器是什麼</a>
  <a>2.2-jQuery選擇器的優勢</a>
  <a>2.3-jQuery選擇器</a>
  <a>2.4-應用jQuery改寫示例</a>
  <a>2.5-選擇器中的一些註意事項</a>
  <a>2.6-案例研究——類似淘寶網品牌列表的效果</a>
  <a>2.7-還有其它選擇器麼？</a>
  <a>2.8-小結</a>
 </p>
 <p class="has_children">
  <span>第3章-jQuery中的DOM操作</span>
  <a>3.1-DOM操作的分類</a>
  <a>3.2-jQuery中的DOM操作</a>
  <a>3.3-案例研究——某網站超鏈接和圖片提示效果</a>
  <a>3.4-小結</a>
 </p>
</p>
<p><input type="checkbox" id="cr"/><label for="cr">我已經閱讀瞭上面制度.</label></p>
</body>
</html>

 

Related posts:

  1. jquery CSS選擇器
  2. jQuery選擇器
  3. 使用jQuery基本過濾選擇器
  4. jQuery:掌握選擇器
  5. jquery選擇器總結[初步]
  6. jquery內容過濾選擇器
  7. Jquery的選擇器
  8. 雙項選擇器javascript

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *