一、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()】的更多相关文章

  1. 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

  2. jQuery 第四章 实例方法 DOM操作_基于jQuery对象增删改查相关方法

    .next() .prev() .nextAll() .prevAll() .prevUntil() .nextUntli() .siblings() .children() .parent() .p ...

  3. jquery的ready方法(DOM是否加载完)详解与使用

    jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:

  4. JQuery选择器,事件,DOM操作,动画

    JQuery是一个JavaScript代码库,或者是JavaScript框架: 1.选择器:(和CSS选择器一致) 基本选择器:ID选择器$('#div1');Class选择器('.div1');标签 ...

  5. jQuery 【事件】【dom 操作】

    事件  hover( function(){},function(){})   --  鼠标移入移出事件   toggle(function(){},function(){},function(){} ...

  6. jQuery 第四章 实例方法 DOM操作之data方法

    jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data()  干嘛用的, 看淘宝上 有自定义的属性, 为data -  什么什么,   这是为了dom 跟数据有 ...

  7. 封装的一些常见的JS DOM操作和数据处理的函数.

    //用 class 获取元素 function getElementsByClass(className,context) { context = context || document; if(do ...

  8. jQuery—一些常见方法(1)【filter(),not(),has(),next(),prev(),find(),eq(),index(),attr(),】

    1.filter()和not()方法 filter()和not()是一对反方法,filter()是过滤. filter()方法是针对元素自身.(跟has()方法有区别) <script type ...

  9. 常见的js dom操作

    1.查找  document.getElementById('id属性值');  返回拥有指定id的第一个对象的引用  document/element.getElementsByClassName( ...

随机推荐

  1. 安装builderRobot到Rational Functional Tester和Performance Tester

    最近研究安装builder,稍微总结一下,以后继续补充: 1. Robot采用专业的测试脚本语言, 从而导致需要学习专门的API以及专门的语法外, 用进程化的Visual Basic作为脚本语言, 导 ...

  2. Windows Phone开发-开发环境和结构

    Windows Phone 7.1的开发工具发布了,一直对WP7很关注,现在终于可以开始学习了.其实09年就学习过silverlight,看过3的SDK文档,当时因为工作,断断续续也没有坚持下来,所以 ...

  3. callerloc

    callerloc An Android app to show location info of incoming calls or outgoing calls in a floating win ...

  4. C++ stringstream介绍,使用方法与例子

    From: http://www.usidcbbs.com/read-htm-tid-1898.html C++引入了ostringstream.istringstream.stringstream这 ...

  5. IE jquery mouseenter,mouseover超奇葩问题

    做了个项目,结构很简单 <div class="index-main" data-url="./img/index_default.jpg"> &l ...

  6. 实例源码--Android简单团购应用源码

      下载源码   技术要点: 1.HTTP通信技术 2.XML数据解析 3.控件的简单应用 4.源码带有非常详细的中文 注释 ...... 详细介绍: 1. HTTP通信技术 通 过HTTP通信技术, ...

  7. java_TreeSet 定制排序实例

    package ming; import java.util.Comparator; import java.util.TreeSet; class M { int age; public M(int ...

  8. 【转】 如何利用Cocos2d-x开发一个游戏

    原文:http://blog.csdn.net/honghaier/article/details/7888592 这个问题的结果应该是一个流程.我将从一些长期的PC端游戏开发经验结合Cocos2d- ...

  9. 如何将java代码生成一个bat文件

    java -cp classes;lib/* beans.FileUpload  列出所要带的参数,用空格分开Pause

  10. aggregation 详解2(metrics aggregations)

    概述 权值聚合类型从需要聚合的文档中取一个值(value)来计算文档的相应权值(比如该值在这些文档中的max.sum等). 用于计算的值(value)可以是文档的字段(field),也可以是脚本(sc ...