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

时间:2022-11-28 16:51:46

一、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>

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

二、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>

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

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

获取页面的滚动距离!