jQuery經常使用子元素過濾選擇器

時間  2019-12-14
標籤 jquery 經常 使用 元素 過濾 選擇器 欄目 JQuery 简体版
原文   原文鏈接 
!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">
        //:first-child 當前元素是父親的第一個兒子
        //這個排行不包括文本
        $(function(){
            /*alert($("li:first-child").length);
            alert($("li:first-child").text());
            //first-of-type 是當前元素父親的當前類型兒子中的一個
            alert($("li:first-of-type").length);*/
            //:only-child 是父親惟一的兒子
            //alert($("span:only-child").length);//1
            //only-of-type 是父親當前類型的惟一的兒子
            //alert($("span:only-of-type").length)
            //nth-child(index/odd/even)
            //是父親的奇數個孩子   下標從1開始
            alert($("ul li:nth-child(odd)").length);
        });

    </script>
</head>
<body>
<div>
    <div id="div1">
        <h3 class="one">手機品牌</h3>
        <ul class="one">
            <span>test11</span>
            <li class="one">蘋果</li>
            <li class="one">華爲</li>
            <li class="one">vivo</li>
        </ul>
        <p>
            <span>test22</span>
        </p>
        <h3>電腦品牌</h3>
        <ul class="one">
            <span>test</span>
            <li>聯想</li>
            <li>蘋果</li>
            <li hidden="true">戴爾</li>
            <li hidden="true">東芝</li>
            <span>test</span>
        </ul>
    </div>
    <div>
        <h3>銷量排行</h3>
        <ol>
            <li>vivo</li>
            <li>蘋果</li>
            <li>華爲</li>
        </ol>
    </div>
    hahafinish
</div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程