jQuery經常使用的層次選擇器

時間 2019-12-11

標籤 jquery 經常使用層次選擇器欄目 JQuery 简体版

原文原文鏈接

經常使用層次選擇器javascript

兒子

手機品牌

蘋果
華爲
vivo

電腦品牌

蘋果
聯想
戴爾

銷量排行

vivo
蘋果
華爲

<!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(){
            //選擇ul下的全部的li
            //var $li = $("ul li");
            //alert($li.length);
            //alert($li.html());

            /*for(var i=0;i<$li.length;i++){
                var li = $li[i];
                alert(li.innerHTML);
            }*/
            //s1>s2  s1匹配的元素下的匹配的s2 只找第一個 不找後面的
            /*var $h3 = $("body>h3");
            alert($h3.length);*/
            //pre+next緊接在h3後面的ul
            /*var $ul = $("h3+ul");
            alert($ul.length);*/
            //pre~所有的 重複的默認算一次
            var $all = $("h3~ul");
            alert($all.length);
        });

    </script>
</head>
<body>
    <h3>兒子</h3>
    <div>
        <div>
            <h3>手機品牌</h3>
            <ul>
                <li>蘋果</li>
                <li>華爲</li>
                <li>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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。