jquery获取子元素的一些方法

1.通过id,class等选择器

2.通过父元素进行find查找

3.通过父元素的children进行查找

注意:find和children的区别,代码已给出详细解释,想要真正理解,还是得靠代码.光看不练那都是纸上谈兵

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>jQuery获取子元素的一些方法</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script>
            $(function() {
                /* 1. 常用的 通过id,class选择器*/
                /* 
                 * 2. 使用遍历的方法,通过find,find会跨越层级查找,一直找到
                 * 没有为止,但是children只会查找直接子元素
                 * */
                $("button").on("click", function() {
                    var str = $(".div1").find("p").eq(0).html(); /*这里取到的是 <p>我是间接的p元素</p>*/
                    $(".s1").html(str);
                    /*
                     * 通过children,下标从0开始,是取直接子元素,间接元素并不会遍历,
                     * 也就是div1中的第一个p元素是间接子元素,并不会遍历到
                     * */
                    var str2 = $(".div1").children("p").eq(0).html(); /*这里取到的是 <p>上海<p/>*/
                    $(".s2").html(str2);
                })
 
            })
        </script>
    </head>
 
    <body>
        <div class="div1">
            <div>
                <p>我是间接的p元素</p>
            </div>
            <p>1.上海</p>
            <p>2.广州</p>
            <p>3.北京</p>
            <p>4.深圳</p>
            <p>5.中山</p>
            <hr />
            <span class="s1"></span><br/>
            <span class="s2"></span><br/>
            <span class="s3"></span><br/>
            <button>确定</button>
        </div>
    </body>
 
</html>

# jquery # 前端 # javascript
Logo
广州城市开发者社区

欢迎加入我们的广州开发者社区，与优秀的开发者共同成长！

更多推荐

cover

基于Python+SSM的新闻个性化采集推荐系统

avatar 广州城市开发者社区
cover

【前沿模型解析】一致性模型CM 1 | 离散时间模型到连续时间模型数学推导

avatar 广州城市开发者社区

Llama3-Tutorial之LMDeploy高效部署Llama3实践

模型在运行时，占用的显存可大致分为三部分：模型参数本身占用的显存、KV Cache占用的显存，以及中间运算结果占用的显存。LMDeploy的KV Cache管理器可以通过设置--cache-max-entry-count参数，控制KV缓存占用剩余显存的最大比例。默认的比例为0.8。下面通过几个例子，来看一下调整--cache-max-entry-count参数的效果。Llama 3 近期重磅发布，

avatar 广州城市开发者社区