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