Jquery 操作DOM元素（3）

╰半夏微凉° 2022-03-17 07:26 307阅读 0赞

> 相比于原生js，Jquery真的给了我们一些新的想法和途径去实现一些功能。关于Jquery dom的第三篇。

代码如下，注释已写：（我博客上的代码基本上除了有其它关联文件都可以直接运行，我用的Jquery库为最新3.1版）

欢迎留言交流

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Jquery dom3</title>
    </head>
    <body>
        <button class="btn">按钮1</button>
        <button class="btn">按钮2</button>
        <button class="btn">按钮3</button>
        <script src="./js/jquery-3.3.1.min.js"></script>
        <script>
            var s=$("<span></span>");//创建span元素
            // wrap  用元素（对象或者字符串）包裹被选择元素  一一对应(一个span对应一个btn)
            // $('.btn').wrap(s);等价于下行代码
            // $('.btn').wrap("<span></span>");
            //  wrapAll   用元素（对象或者字符串）包裹被选择元素  一对多（一个span对应多个btn）
            // $('.btn').wrapAll(s);等价于下行代码
            $('.btn').wrapAll("<span></span>");
            // 移除被包裹元素的父级元素或者包裹标记 unwrap();
            // $('.btn').unwrap();
            // 用包裹元素包裹被选择元素的子元素(即对于btn里面的内容进行包裹)
            // $('.btn').wrapInner(s);
    
            // 元素的遍历 each();
            // $('.btn').click(function(){
            //     console.log(this);
            // })
            // 在each里面return false 提前终止遍历
    /*        $('.btn').each(function(index){
                $(this).click(function(){
                    console.log(index);
                if(index==1){
                    return false;
                }
                console.log('咦？');
                })
                
            })
    */
            $('.btn').each(function(index,ele){
                // js添加事件
                console.log(ele);//ele为js对象，无法直接利用Jquery操作
              /*  ele.addEventListener("click",function(){
                    console.log(index);
                })*/
                // console.log($(ele)); //转Jquery对象
                /*$(ele).click(function(){
                    console.log(index);
                })*//*Jquery事件*/
            //     ele.click(function(){//无效
                    // console.log(index);
                // })
            })
    
        </script>
    </body>
    </html>