一、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()
获取页面的滚动距离!