jQuery經常使用的基本過濾選擇器

經常使用基本過濾選擇器javascript

手機品牌

  • 蘋果
  • 華爲
  • vivo

電腦品牌

  • 蘋果
  • 聯想
  • 戴爾

銷量排行

  1. vivo
  2. 蘋果
  3. 華爲
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>經常使用基本過濾選擇器</title>
    <script src="scripts/jquery-3.1.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            //:first 選取全部知足的第一個
            // text()彈出裏面的文本
           /* alert($("h3").text());
            alert($("h3:first").text());*/
            //last()選取全部知足的最後一個
            //alert($("h3:last").text());
            //not 排除掉括弧裏面匹配到的內容就是要獲得的
             //alert($("li:not(ul li)").length);//3
            //even 匹配下標是偶數的 下標從0開始 odd 匹配下標是奇數的
            //alert($("li:even").text());
            //eq(index) 符合的全部中的第一個
            alert($("ol li:eq(0)").text());
            //gt(index) 大於下標的所有
            alert($("ol li:gt(0)").text());
            //lt(index) 小於下標的所有
            alert($("ol li:lt(1)").text());
        });
    </script>
</head>
<body>
<div>
    <div id="div1">
        <h3>手機品牌</h3>
        <ul>
            <li class="one">蘋果</li>
            <li>華爲</li>
            <li class="one">vivo</li>
        </ul>
        <h3>電腦品牌</h3>
        <ul>
            <li>蘋果</li>
            <li>聯想</li>
            <li>戴爾</li>
        </ul>
    </div>
    <div>
        <h3>銷量排行</h3>
        <ol>
            <li>vivo</li>
            <li>蘋果</li>
            <li>華爲</li>
        </ol>
    </div>
</div>
</body>
</html>
相關文章
相關標籤/搜索