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()
获取页面的滚动距离！
jQuery—一些常见方法（2）DOM操作【insertBefore(),insertAfter(),appendTo(),prependTo(),before(),after(),append(),prepend(),remove(),on(),off(),scrollTop()】的更多相关文章
- 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
- jQuery 第四章 实例方法 DOM操作_基于jQuery对象增删改查相关方法
.next() .prev() .nextAll() .prevAll() .prevUntil() .nextUntli() .siblings() .children() .parent() .p ...
- jquery的ready方法（DOM是否加载完）详解与使用
jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:
- JQuery选择器，事件，DOM操作,动画
JQuery是一个JavaScript代码库,或者是JavaScript框架: 1.选择器:(和CSS选择器一致) 基本选择器:ID选择器$('#div1');Class选择器('.div1');标签 ...
- jQuery 【事件】【dom 操作】
事件 hover( function(){},function(){}) -- 鼠标移入移出事件 toggle(function(){},function(){},function(){} ...
- jQuery 第四章 实例方法 DOM操作之data方法
jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上 有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...
- 封装的一些常见的JS DOM操作和数据处理的函数.
//用 class 获取元素 function getElementsByClass(className,context) { context = context || document; if(do ...
- jQuery—一些常见方法（1）【filter(),not(),has(),next(),prev(),find(),eq(),index(),attr(),】
1.filter()和not()方法 filter()和not()是一对反方法,filter()是过滤. filter()方法是针对元素自身.(跟has()方法有区别) <script type ...
- 常见的js dom操作
1.查找 document.getElementById('id属性值'); 返回拥有指定id的第一个对象的引用 document/element.getElementsByClassName( ...
随机推荐
- php开发环境配置 web UI模板
web ui 能快速的整合进来?dwz? easyui? bootstrap 在Apache 中配置: 在http.conf中加入php的设置 #php5_startphpIniDir " ...
- Dubbo架构设计详解--转载
原文地址:http://shiyanjun.cn/archives/325.html Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解 ...
- android开发之路01
一.android系统被分为4个层次:1.最下层的是linux核心,包括多个驱动程序,提供了操作系统应该具备的核心功能:2.在linux核心之上,包括两个部分,一部分是Android Runtime( ...
- multiple build commands for output file
在项目中 我们经常会碰到图片这方面的警告 虽然不影响运行 但是警告太多了也不是很好 其中 图片方面遇到的警告以下面的警告偏多:multiple build commands for output ...
- CentOS 简单命令
一.启动级别 Linux系统设置系统启动模式的方式可以修改(必须要以root身份登录才能修改).修改系统启动模式的配置文件是 /etc/inittab. 我们在切换到root用户后,然后 vi / ...
- （转）CentOS 6.5下Redis安装详细步骤
Redis简介:Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发工作 ...
- 解决myeclipse过期问题
一般myeclise使用期限为30天,超过之后,会频繁的提醒你,购买软件,很讨厌,有个这个小工具,,以后再也不怕啦!!! 使用方法: 1:将这个类导入到myeclipse包中 2:运行main方法,提 ...
- MSP430常见问题之开发工具类
Q1:我自己做了一块MSP430F149的试验板,以前用下载线进行调试没有出现过问题,但是,最近我每次make后用下载线调试时,总是弹出一个窗口,给我提示:Could not find target ...
- readint writeint
inline int readint() { char c = getchar(); while(!isdigit(c)) c = getchar(); ; while(isdigit(c)) { x ...
- Java多线程中的join()方法
一.join()方法介绍 join() 定义在Thread.java中.join()方法把指定的线程加入到当前线程,可以将两个交替执行的线程合并为顺序执行的线程.比如在线程B中调用了线程A的join( ...