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()

获取页面的滚动距离！