Jquery 操作DOM元素（3）

相比于原生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>

Jquery 操作DOM元素（3）

猜你喜欢