1. append()方法
1.1. append(content)方法在每一个匹配元素的结尾(仍然在内部)插入内容。
1.2. 语法
$(selector).append(content)1.3. 参数
1.4. append()使用函数来附加内容
1.4.1. append(function(index,origHtml))方法使用函数在所有匹配元素中指定坐标元素的结尾(仍然在内部)插入内容。
1.4.2. 语法
$(selector).append(function(index,origHtml))1.4.3. 参数
1.5. append()添加若干新元素
1.5.1. append(content1,content2,content3...)方法能够通过接收无限数量的参数在每一个匹配元素的结尾(仍然在内部)插入若干新元素。
1.5.2. 语法
$(selector).append(content1,content2,content3...)2. appendTo()方法
2.1. appendTo()方法在每一个匹配元素的结尾(仍然在内部)插入内容。
2.2. append()和appendTo()方法执行的任务相同。不同之处在于: 内容和选择器的位置, 以及append()能够使用函数来附加内容, 还不能同时添加若干元素。
2.3. 语法
$(content).appendTo(selector)2.4. 参数
2.5. 例子
2.5.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>append和appendTo添加元素</title>
<style type="text/css">
div {
width: 900px;
height: 320px;
}
div:nth-child(1) { background-color: red; }
div:nth-child(2) { background-color: green; }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
$("div").append("<p>Append Text.</p>");
});
$('#btn2').click(function(){
$("div").append(function(index, origHtml){
if(index == 0) return "<p>Function Append Text.</p>";
});
});
$('#btn3').click(function(){
var txt1 = "<p>以html创建新元素.</p>"; // 以html创建新元素
var txt2 = $("<p>以jQuery创建新元素.</p>"); // 以jQuery创建新元素
var txt3 = document.createElement("p"); // 以DOM创建新元素
txt3.innerHTML = "以DOM创建新元素.";
$("div").append(txt1, txt2, txt3);
});
$('#btn4').click(function(){
$("<p>append()和appendTo()方法执行的任务相同。不同之处在于: 内容和选择器的位置, 以及append()能够使用函数来附加内容。</p>").appendTo("div");
});
});
</script>
</head>
<body>
<div><p>append(content)方法在每一个匹配元素的结尾(仍然在内部)插入内容。</p></div>
<div><p>append(function(index,origHtml))方法使用函数在所有匹配元素中指定坐标元素的结尾(仍然在内部)插入内容。</p></div>
<br /><button id="btn1">append添加元素</button> <button id="btn2">append使用函数来附加内容</button>
<button id="btn3">append添加若干新元素</button> <button id="btn4">appendTo添加元素</button>
</body>
</html>2.5.2. 效果图
3. prepend()方法
3.1. prepend(content)方法在每一个匹配元素的开头(仍位于内部)插入指定内容。
3.2. 语法
$(selector).prepend(content)3.3. 参数
3.4. 使用函数来附加内容
3.4.1. prepend(function(index,origHtml))方法使用函数在所有匹配元素中指定坐标元素的开头(仍然在内部)插入内容。
3.4.2. 语法
$(selector).prepend(function(index,origHtml))3.4.2. 参数
3.5. prepend()添加若干新元素
3.5.1.prepend(content1,content2,content3...)方法能够通过接收无限数量的参数在每一个匹配元素的开头(仍然在内部)插入若干新元素。
3.5.2. 语法
$(selector).prepend(content1,content2,content3...)4. prependTo()方法
4.1. prependTo()方法在每一个匹配元素的开头(仍位于内部)插入指定内容。
4.2. prepend()和prependTo()方法作用相同。差异在于语法: 内容和选择器的位置, 以及prepend()能够使用函数来插入内容, 还不能同时添加若干元素。
4.3. 语法
$(selector).prependTo(content)4.4. 参数
4.5. 例子
4.5.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>prepend和prependTo添加元素</title>
<style type="text/css">
div {
width: 900px;
height: 320px;
}
div:nth-child(1) { background-color: red; }
div:nth-child(2) { background-color: green; }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
$("div").prepend("<p>Append Text.</p>");
});
$('#btn2').click(function(){
$("div").prepend(function(index, origHtml){
if(index == 0) return "<p>Function Append Text.</p>";
});
});
$('#btn3').click(function(){
var txt1 = "<p>以html创建新元素.</p>"; // 以html创建新元素
var txt2 = $("<p>以jQuery创建新元素.</p>"); // 以jQuery创建新元素
var txt3 = document.createElement("p"); // 以DOM创建新元素
txt3.innerHTML = "以DOM创建新元素.";
$("div").prepend(txt1, txt2, txt3);
});
$('#btn4').click(function(){
$('<p>prepend()和prependTo()方法作用相同。差异在于语法: 内容和选择器的位置, 以及prepend()能够使用函数来插入内容。</p>').prependTo("div");
});
});
</script>
</head>
<body>
<div><p>prepend(content)方法在每一个匹配元素的开头(仍位于内部)插入指定内容。</p></div>
<div><p>prependTo()方法在每一个匹配元素的开头(仍位于内部)插入指定内容。</p></div>
<br /><button id="btn1">prepend添加元素</button> <button id="btn2">prepend使用函数来附加内容</button>
<button id="btn3">prepend添加若干新元素</button> <button id="btn4">prependTo添加元素</button>
</body>
</html>4.5.2. 效果图
5. after()方法
5.1. after(content)方法在每一个匹配元素后面(外部)插入内容。
5.2. 语法
$(selector).after(content)5.3. 参数
5.4. 使用函数来插入内容
5.4.1. after(function(index, origHtml))方法使用函数在所有匹配元素中指定坐标元素后面插入内容。
5.4.2. 语法
$(selector).after(function(index, origHtml))5.4.3. 参数
5.5. after()添加若干新元素
5.5.1. after(content1,content2,content3...)方法能够通过接收无限数量的参数在每一个匹配元素的后面插入若干新元素。
5.5.2. 语法
$(selector).after(content1,content2,content3...)6. before()方法
6.1. before(content)方法在每一个匹配元素前面(外部)插入内容。
6.2. 语法
$(selector).before(content)6.3. 参数
6.4. 使用函数来插入内容
6.4.1. before(function(index, origHtml))方法使用函数在所有匹配元素中指定坐标元素前面插入内容。
6.4.2. 语法
$(selector).before(function(index, origHtml))6.4.3. 参数
6.5. before()添加若干新元素
6.5.1. before(content1,content2,content3...)方法能够通过接收无限数量的参数在每一个匹配元素的前面插入若干新元素。
6.5.2. 语法
$(selector).before(content1,content2,content3...)6.6. 例子
6.6.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>after和before添加元素</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
$("div").after("<p>after添加元素。</p>");
});
$('#btn2').click(function(){
$("div").after(function(index, origHtml){
if(index == 0) return "<p>after使用函数来附加内容。</p>";
});
});
$('#btn3').click(function(){
var txt1 = "<p>以html创建新元素.</p>"; // 以html创建新元素
var txt2 = $("<p>以jQuery创建新元素.</p>"); // 以jQuery创建新元素
var txt3 = document.createElement("p"); // 以DOM创建新元素
txt3.innerHTML = "以DOM创建新元素.";
$("div").after(txt1, txt2, txt3);
});
$('#btn4').click(function(){
$("div").before("<p>before添加元素。</p>");
});
$('#btn5').click(function(){
$("div").before(function(index, origHtml){
if(index == 0) return "<p>before使用函数来附加内容。</p>";
});
});
$('#btn6').click(function(){
var txt1 = "<p>以html创建新元素.</p>"; // 以html创建新元素
var txt2 = $("<p></p>").text("以jQuery创建新元素."); // 以jQuery创建新元素
var txt3 = document.createElement("p"); // 以DOM创建新元素
txt3.innerHTML = "以DOM创建新元素.";
$("div").before(txt1, txt2, txt3);
});
});
</script>
</head>
<body>
<div style="background-color: red;"><p>after(content)方法在每一个匹配元素后面(外部)插入内容。</p></div>
<div style="background-color: green;"><p>before(content)方法在每一个匹配元素前面(外部)插入内容。</p></div>
<button id="btn1">after添加元素</button> <button id="btn2">after使用函数来附加内容</button> <button id="btn3">after添加若干新元素</button>
<br /><br />
<button id="btn4">before添加元素</button> <button id="btn5">before使用函数来附加内容</button> <button id="btn6">before添加若干新元素</button>
</body>
</html>6.6.2. 效果图
7. insertAfter()方法
7.1. insertAfter()方法在每一个匹配元素之后插入html标记或已有的元素。
7.2. 如果insertAfter()方法用于已有元素, 这些元素会被从当前位置移走, 然后被添加到被选元素之后。
7.3. 语法
$(content).insertAfter(selector)7.4. 参数
8. insertBefore()方法
8.1. insertBefore()方法在每一个匹配元素之前插入html标记或已有的元素。
8.2. 如果insertBefore()方法用于已有元素, 这些元素会被从当前位置移走, 然后被添加到被选元素之前。
8.3. 语法
$(content).insertBefore(selector)8.4. 参数
8.5. 例子
8.5.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>insertAfter和insertBefore添加元素</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
$("<p>insertAfter添加元素。</p>").insertAfter("div");
});
$('#btn2').click(function(){
$("h2").insertAfter("div");
});
$('#btn3').click(function(){
$("<p>insertBefore添加元素。</p>").insertBefore("div");
});
$('#btn4').click(function(){
$("h3").insertBefore("div");
});
});
</script>
</head>
<body>
<h2>如果insertAfter()方法用于已有元素, 这些元素会被从当前位置移走, 然后被添加到被选元素之后。</h2>
<h3>如果insertBefore()方法用于已有元素, 这些元素会被从当前位置移走, 然后被添加到被选元素之后。</h3>
<div style="background-color: red;"><p>insertAfter()方法在所有匹配元素之后插入html标记或已有的元素。</p></div>
<div style="background-color: green;"><p>insertBefore()方法在所有匹配元素之前插入html标记或已有的元素。</p></div>
<br /><button id="btn1">insertAfter添加元素</button> <button id="btn2">insertAfter添加已存在元素</button>
<button id="btn3">insertBefore添加元素</button> <button id="btn4">insertBefore添加已存在元素</button>
</body>
</html>8.5.2. 效果图
9. clone()方法
9.1. clone()方法生成每一个匹配元素的副本, 包含子节点、文本和属性。参数传入true, 事件也被赋值, 反之忽略事件。
9.2. 语法
$(selector).clone(includeEvents)9.3. 参数
9.4. 例子
9.4.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>clone元素</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var myDiv = $("div");
$('#btn1').click(function(){
myDiv.after($("div").clone(true));
});
$('#btn2').click(function(){
myDiv.before($("div").clone());
});
$("div").mouseover(function(){
$(this).css({"font-size": "2em"});
});
$("div").mouseleave(function(){
$(this).css({"font-size": "1em"});
});
});
</script>
</head>
<body>
<div style="width: 500px; height: 100px; background-color: red;">
<p>clone()方法生成被选元素的副本, 包含子节点、文本和属性。</p>
</div> <br />
<button id="btn1">clone元素</button> <button id="btn2">clone元素忽略事件</button>
</body>
</html>9.4.2. 效果图
扫一扫
1917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
