jQuery文档处理

最新推荐文章于 2022-12-11 16:00:35 发布

Alex十年

最新推荐文章于 2022-12-11 16:00:35 发布

阅读量172

点赞数

分类专栏： jQuery知识总结

jQuery知识总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、内部插入（插入到div内部，相对于要插入的div来说是父子关系）

append()，appendTo()

<style>
        div{
            width: 500px;
            height: 180px;
            background-color: #a6cbe7;
            cursor: hand;
        }
    </style>
</head>
<body>
<div id="div1">
    <h3>11111111111111</h3>
    <h3>22222222222222</h3>
    <h3>33333333333333</h3>
    <h3>44444444444444</h3>
</div>
<hr>
<div id="div2">
</div>
<script>
    //点击哪个数字，哪个数字就会进入到下面的div中
    //#div1 h3 表示每一个都是可以选择的对象
    $('#div1 h3').click(function () {
        //append中的this表示当前点击的那个h3标签
        $("#div2").append($(this));
        //另一种写法
        //$(this).appendTo($('#div2'));
    });
</script>
//即点击过1后，点击2，2会紧跟在1的后面

向前插入

// $("#div2").prepend($(this));
        //另一种写法
        $(this).prependTo($('#div2'));
//即点过1之后点击2，2会插入到1的前面

二、外部插入（在div之前或者之后插入，相对于div来说，是兄弟关系）

//不会插入到div2中，而是在div2之后
        $("#div2").after($(this));
        //另一种写法
        //$(this).insertAfter($('#div2'));

类似的还有before和insertBefore
三、包围
wrap:外包围 wrapInner:内包围

<body>
    <h3>11111111111111</h3>
    <h3>22222222222222</h3>
    <h3>33333333333333</h3>
    <h3>44444444444444</h3>
<script>
    //网页查看源代码时，每个h3标签外面都有一个i标签
    $('h3').wrap("<i></i>");
    //网页查看源代码时，每个h3标签里面都有一个i标签
    $('h3').wrapInner("<i></i>")
    //在所有的h3标签外值用了一个i标签去包含,如果中间有不是h3标签，会把h3的放到一起去包含页面元素会乱。
    $('h3').wrapAll("<i></i>")
</script>
</body>

四、替换
replaceWith:用后面的替换前面的replaceAll:与上面的相同
替换时会把内容一并换掉

<body>
    <h3>11111111111111</h3>
    <h3>22222222222222</h3>
    <h3>33333333333333</h3>
    <h3>44444444444444</h3>
<script>
//所有的h3会换成h1，其中的内容也变成‘你好’
    $('h3').replaceWith("<h1>你好</h1>")
</script>

要想内容不被换掉

<body>
    <h3>11111111111111</h3>
    <h3>22222222222222</h3>
    <h3>33333333333333</h3>
    <h3>44444444444444</h3>
<script>
    $("h3").click(function () {
    //（下面案例是点击一个，会改变一个）
        var val = $(this).html();
        $(this).replaceWith("<h1>"+val+"</h1>")
    })
    //利用遍历不改变内容
    $("h3").each(function () {
        var val = $(this).html();
        $(this).replaceWith("<h1>"+val+"</h1>")
    })
</script>
</body>

五、删除
empty()：把标签内容清空
remove()：移除标签，他返回一个对象，又给保存下来，但是标签本身所包含的事件等等都会被清除
detach():移除标签
六、克隆
clone();只克隆本身，不克隆事件
clone(true);克隆本身，又克隆事件

<body>
    <img style="width: 60px;height: 20px" src="images/1.jpg">
<script>
    $("img").click(function () {
    //在后面添加他自己，默认是只克隆本身，不克隆事件
        $(this).after($(this).clone());
    })
</script>
</body>