jquey学习2之jquery动态添加页面片段
第一个方法：append()方法
【1】$(selector).append(content)//向匹配的所有标签中的内容末尾处添加Html代码，会编译成页面显示。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>Hello world!</b>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>
【2】$(selector).append(function(index,html))//利用函数，向匹配的所有标签中的内容末尾处添加html代码。会编译成页面显示。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(function(n){
return "<b>This p element has index " + n + "</b>";
});
});
});
</script>
</head> <body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>
第二个方法：appendTo()方法
【1】$(content).appendTo(selector)//在匹配的标签中的内容末尾处添加html代码，会编译显示
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function testAppendTo(){
$("<b>我是一只狼</b>").appendTo("p");
}
</script> </head> <body >
“欢迎来到主页”
<input type="button" value="p的结尾处添加内容" onclick="testAppendTo();">
<p>我isgu中国ibggyi热播</p>
朗朗上口
</body>
第三个方法：after()方法
【1】$(selector).after(content)//在匹配的元素的后边添加内容，不是元素内容的后边，【而是元素结尾处，意味着添加的内容会变成兄弟标签。】
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function testAfter(){
$("p").after("<b>我是一只狼</b>");
}
</script> </head> <body >
“欢迎来到主页”
<input type="button" value="p后边添加内容" onclick="testAfter();">
<p>我isgu中国ibggyi热播</p>
朗朗上口
</body>
</html>
【2】$(selector).after(function(index))//在匹配元素的后边。利用函数添加内容
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").after(function(n){
return "<p>The p element above has index " + n + "</p>";
});
});
});
</script>
</head> <body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素后插入内容</button>
</body>
</html>
第四个方法：before()方法
【1】$(selector).before(content)//在匹配的元素的前边添加内容。【不是元素内容的开始处，而是意味着添加的内容会变成兄弟标签】
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function testBefore(){
$("p").before("<b>我是一只狼</b>");
}
</script> </head> <body >
“欢迎来到主页”
<input type="button" value="p的前边添加内容" onclick="testBefore();">
<p>我isgu中国ibggyi热播</p>
朗朗上口
</body>
【2】$(selector).before(function(index))//在匹配的元素的前边添加内容。利用函数的方式.
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").before(function(n){
return "<p>The p element below has index " + n + "</p>";
});
});
});
</script>
</head> <body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">在每个段落前面插入新的段落</button>
</body>
</html>
第五个方法：clone()方法
【1】$(selector).clone(includeEvents)//将匹配的元素进行克隆出一个副本。includeEvents.可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p").clone());
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>复制每个 p 元素，然后追加到 body 元素</button>
</body>
</html>
第六个方法：empty()方法
【1】$(selector).empty()//移除匹配元素的内容（包括子节点和文本内容）元素本身还存在
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function testEmty(){
$("p").empty();
}
</script> </head> <body >
“欢迎来到主页”
<input type="button" value="移除p中的内容" onclick="testEmty();">
<p>我isgu中国ibggyi热播</p>
朗朗上口
</body>
功能类似，但实现的目的或细节存在差异的方法：
【2】$(selector).remove()//移除所有匹配的元素。元素本身已经不存在
【3】$(selector).detach()//移除所有匹配的元素。
detach() 方法移除被选元素，包括所有文本和子节点。
这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。
移动元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p").detach());
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>移动 p 元素</button>
</body>
</html>
删除元素，还能恢复元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var x;
$("#btn1").click(function(){
x=$("p").detach();
});
$("#btn2").click(function(){
$("body").prepend(x);
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button id="btn1">删除 p 元素</button>
<button id="btn2">恢复 p 元素</button>
</body>
</html>
移动元素，并保留其click事件
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p").detach());
});
$("p").click(function(){
$(this).animate({fontSize:"+=1px"})
});
});
</script>
</head>
<body>
<p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>
<button>移动 p 元素</button>
</body>
</html>
第七个方法：prepend()方法
【1】$(selector).prepend(content)//方法在被选元素的开头（仍位于内部）插入指定内容。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").prepend("<b>Hello world!</b> ");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的开头插入内容</button>
</body>
</html>
【2】$(selector).prepend(function(index,html))//利用函数，在匹配元素的内容的开始处添加新的内容
必需。规定返回待插入内容的函数。
- index - 可选。接受选择器的 index 位置。
- html - 可选。接受选择器的当前 HTML。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").prepend(function(n){
return "<b>这个 p 元素的 index 是：" + n + "</b> ";
});
});
});
</script>
</head> <body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素的开头插入内容</button>
</body>
</html>
第八个方法：prependTo()方法
【1】$(content).prependTo(selector)//在匹配元素的开头（仍位于内部）插入指定内容。和prepend()方法功效一样，不一样在选择器和添加内容的位置
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("<b>Hello World!</b>").prependTo("p");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">在每个 p 元素的开头插入文本</button>
</body>
</html>
第九个方法：replaceAll()方法
【1】$(content).replaceAll(selector)//用指定的内容替换所有的匹配元素（包括文本和子节点）
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function testReplaceAll(){
$("<b>我是一只狼</b>").replaceAll("p");
}
</script> </head> <body >
“欢迎来到主页”
<input type="button" value="replaceAll" onclick="testReplaceAll();">
<p>我isgu中国ibggyi热播</p>
<p>sdafgyi热播</p> 朗朗上口
</body>
第十个方法：replaceWith()方法
【1】$(selector).replaceWith(content)//将所有匹配的元素替换成指定的内容
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function testReplaceWith(){
$("p").replaceWith("<b>我是一只狼</b>");
}
</script> </head> <body >
“欢迎来到主页”
<input type="button" value="replaceWith" onclick="testReplaceWith();">
<p>我isgu中国ibggyi热播</p>
<p>sdafgyi热播</p> 朗朗上口
</body>
【2】$(selector).replaceWith(function())//使用指定的函数替换匹配元素的内容
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").replaceWith(function(){
return "<p>Hello World!</p>";
});
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button class="btn1">用新的 p 元素替换所有段落</button>
</body>
</html>
dsf
jquey学习2之jquery动态添加页面片段的更多相关文章
- 给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
- [转载]给Jquery动态添加的元素添加事件
原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...
- jquery 动态添加和删除 ul li列表
今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
- JQuery动态添加控件并取值
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- jQuery动态添加删除select项
// 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- JQuery - 动态添加Html后，如何使CSS生效，JS代码可用？
今天在开发JQuery Mobile程序时候,需要从服务器取得数据,随后显示在页面上的Listview控件中,数据完整获取到了,也动态添加到Listview控件中,但是数据对应的CSS没有任何效果了, ...
随机推荐
- Android程序员眼中世界上最遥远的距离
世界上最遥远的距离,是我在if里你在else里,似乎一直相伴又永远分离: 世界上最痴心的等待,是我当case你是switch,或许永远都选不上自己: 世界上最真情的相依,是你在try我在catch. ...
- robot framework学习笔记1之_环境安装（win7）
一.简介 Robotframework是基于Python的自动化测试框架.使用关键字驱动的测试方法,自带丰富的库函数可直接引用,可使用Java/Python进行功能库扩展,测试用例使用TSV/HTML ...
- bzoj2242: [SDOI2011]计算器 BSGS+exgcd
你被要求设计一个计算器完成以下三项任务: 1.给定y,z,p,计算Y^Z Mod P 的值:(快速幂) 2.给定y,z,p,计算满足xy≡ Z ( mod P )的最小非负整数:(exgcd) 3.给 ...
- IDEA搭建ssm框架测试衍生出的问题The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: D:\Develop\jdk7\jdk1.7.0_79\bin;
最近玩起IDEA这开发工具,搭建ssm框架测试时,部署项目出现如下问题: 信息: The APR based Apache Tomcat Native library which allows opt ...
- thinkphp3.2分页
在ThinkPHP 3.1及之前,分页功能可能是放在/Lib/Org/Util中的,到了ThinkPHP 3.2后,分页功能已经整合到了Library/Think中了.而且ThinkPHP 3.2已经 ...
- Oracle11g温习-第五章：数据字典
1.数据字典(Data dictionary)的功能 1) central of oracle database 每个oracle数据库的核心 2) descr ...
- 11g adg 环境搭建实施手册-0908
11g adg 环境搭建实施手册-0908 2017年8月30日 9:16 11g adg 环境搭建实施手册-0824 2017年8月24日 10:18 ####################### ...
- SpringMVC RESTful风格URL处理带点的参数
使用了RESTful风格的URL.但是在处理带点的搜索参数,比如baidu.com的时候,后台就取不到正确的参数了. 搜索了下原因,原来是SpringMVC将点号看作扩展分隔符号了,因此后台没法拿到正 ...
- Linux磁盘管理，vi编辑器以及包管理器
一.Linux磁盘管理 Linux磁盘管理常用的三个命令为df,du,fdisk df:列出文件系统的整体磁盘使用量,利用这个命令来获取磁盘被占用了多少空间,,目前还剩下多少空间用法:df [-ahi ...
- [Vue warn]: Invalid prop: custom validator check failed for prop "xxx".问题
在用vue+ui框架(iview.elementui等)做项目,会遇到这种问题 这样的,点那都报错,千辛万苦的付出,却找不到问题在哪 其实很简单,报错都显示出那个组件的问题了 ‘<Form&g ...