jQuery—一些常见方法（2）DOM操作【insertBefore(),insertAfter(),appendTo(),prependTo(),before(),after(),append(),prepend(),remove(),on(),off(),scrollTop()】

一、insertBefore()

如下代码：找到span标签，将span标签剪切到div的前面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="../../jq-practice/jq/jquery-2.2.1.min.js"></script>

    <script>

        $(function(){

           $('span').insertBefore($('div'));

        });

    </script>

</head>

<body>

<div>div</div>

<span>span</span>

</body>

</html>

二、insertAfter()

与insertBefore正好相反

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="../../jq-practice/jq/jquery-2.2.1.min.js"></script>

    <script>

        $(function(){

          // $('span').insertBefore($('div'));

            $('div').insertAfter($('span'));  //与insertBefore正好相反

        });

    </script>

</head>

<body>

<div>div</div>

<span>span</span>

</body>

</html>

三、appendTo()

appendTo()与原生的appendChild()一样，将某个节点变成另一个节点的子节点,并且放在最后！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="../../jq-practice/jq/jquery-2.2.1.min.js"></script>

    <script>

        $(function(){

//           $('span').insertBefore($('div'));

//            $('div').insertAfter($('span'));  //与insertBefore正好相反

            $('div').appendTo($('span'));  //将div变成span的子节点，放在最后

        });

    </script>

</head>

<body>

<div>div</div>

<span>span</span>

</body>

</html>

四、prependTo()

与appendTo()相比，不同点就是将某个节点变成另一个节点的子节点,并且放在最前面！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="../../jq-practice/jq/jquery-2.2.1.min.js"></script>

    <script>

        $(function(){

//           $('span').insertBefore($('div'));

//            $('div').insertAfter($('span'));  //与insertBefore正好相反

          //  $('div').appendTo($('span'));  //将div变成span的子节点，放在最后

            $('div').prependTo($('span'));  //将div变成span的子节点，放在最前

        });

    </script>

</head>

<body>

<div>div</div>

<span>span</span>

</body>

</html>

五、before（）

before()方法跟insertBefore（）方法效果一样，区别在于：后续操作会不一样！

可以将insertBefore()当作动词，before()当作名词!

类似：after()对应insertAfter()、append()对应appendTo()、prepend()对应prependTo()！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="../../jq-practice/jq/jquery-2.2.1.min.js"></script>

    <script>

        $(function(){

//           $('span').insertBefore($('div'));  //找到span，并将span插入到div的前面，动词属性

//            $('div').insertAfter($('span'));  //与insertBefore正好相反

//             $('div').appendTo($('span'));   //将div变成span的子节点，放在最后

//            $('div').prependTo($('span'));  //将div变成span的子节点，放在最前

//            $('div').before($('span'));  //div的前面必须是span，名词属性

            $('div').before($('span')).css('background','red');  //这个方法是针对div，所以后续操作的是div，即div的背景变红

            $('span').insertBefore($('div')).css('background','blue');//这个方法是针对span，所以后续操作的是span，即span的背景变蓝

        });

    </script>

</head>

<body>

<div>div</div>

<span>span</span>

</body>

</html>

六、remove()

remove()方法就是删除节点！

七、on()和off()方法

on()方法和off()方法是一对相反方法，object.on('click',function(){...})就相当于object.click(function(){...})，on()方法更强大一些，不仅可以用于click，而且也可以用于其他自己定义的方法，类似于show等等，on()后面的参数可以同时多个，object.('click mouseover',function(){...}),鼠标移入点击都执行操作，也可以以json格式分别执行不同的操作，类似一下例子，on()相当于开启，off()就相当于关闭.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="../../jq-practice/jq/jquery-2.2.1.min.js"></script>

    <script>

        $(function(){

//           $('span').insertBefore($('div'));  //找到span，并将span插入到div的前面

//            $('div').insertAfter($('span'));  //与insertBefore正好相反

//             $('div').appendTo($('span'));   //将div变成span的子节点，放在最后

//            $('div').prependTo($('span'));  //将div变成span的子节点，放在最前

//            $('div').before($('span'));  //div的前面必须是span

//            $('div').before($('span')).css('background','red');  //这个方法是针对div，所以后续操作的是div，即div的背景变红

//            $('span').insertBefore($('div')).css('background','blue');//这个方法是针对span，所以后续操作的是span，即span的背景变蓝

 //           $('div').remove();  //找到div并且删除此节点

//            $('div').on('click mouseover',function(){

//                alert(123);

//            })

            <!--json格式，鼠标移入弹出456，鼠标点击弹出123-->

            $('div').on({

                'click':function(){

                    alert(123);

                },

                'mouseover':function(){

                    alert(456);

                    $('div').off('mouseover');//执行一次之后就关闭

                }

            })

//            $('div').on('click mouseover',function(){

//               alert(123);

//                $('div').off();

//            })

        });

    </script>

</head>

<body>

<div>div</div>

<span>span</span>

</body>

</html>

八、scrollTop()

获取页面的滚动距离！

巴特西

jQuery—一些常见方法（2）DOM操作【insertBefore(),insertAfter(),appendTo(),prependTo(),before(),after(),append(),prepend(),remove(),on(),off(),scrollTop()】

最新文章

热门文章