jq的简单练习

最新推荐文章于 2022-11-11 19:58:14 发布

远山精灵

最新推荐文章于 2022-11-11 19:58:14 发布

阅读量338

点赞数

文章标签： jq

本文链接：https://blog.csdn.net/weixin_43693216/article/details/88682385

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jq/jquery-1.12.4.js"></script>
</head>
<body>
<p>1</p>
<p>2</p>
<p><span>3</span></p>
<p><span>4</span></p>
<input id="btn1" type="button" value="按钮1">
<input id="btn2" type="button" value="按钮2">
<input id="btn3" type="button" value="按钮3">
<input id="btn4" type="button" value="按钮4">
<input id="btn5" type="button" value="按钮5">
</body>
</html>
<script>
    var a;
    $('#btn1').click(function () {
       $('body :nth-child(4)').after('<div>55555</div>');
    });
    $('body>p>span').click(function () {
       $(this).css('color','red')
    });
    $('#btn2').click(function () {
        a = $('body>:nth-child(3)>span').detach();
    });
    $('#btn3').click(function () {
        $('body>:nth-child(3)').append(a);
    });
    $('#btn4').click(function () {
        $('body>:nth-child(4)>span').insertBefore('body>:nth-child(4)');
    });
    $('#btn5').click(function () {
        $('body>:nth-child(1)').wrap('<div></div>');
        // $('body>p').wrapAll('<div></div>');
    });

远山精灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq的简单练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jq/jquery-1.12.4.js"></script></head&gt...
复制链接

扫一扫