方法 |
例句 |
描述 |
性质 |
after() |
$("button").click(function(){
$("p").after("<p>Hello world!</p>");
});
|
|
增加 |
append() |
$("button").click(function(){
$("p").append(" <b>Hello world!</b>");
});
//添加到p标签内,相当于增加儿子
|
- 匹配元素向下添加指定HTML元素
- 向匹配元素集合中的每个元素结尾插入由参数指定的内容。
- appendTo方法执行任务相同,不同之处在于,内容的位置和选择器
|
增加 |
before() |
$("button").click(function(){
$("p").before("<p>Hello world!</p>");
});
|
|
增加 |
clone() |
$("button").click(function(){
$("body").append($("p").clone());
});
|
- 生成被选元素的副本,包含子节点、文本和属性
- 横向进行副本创建
|
增加 |
detach() |
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p").detach());
});
//当点击button事件发生后,先是删除body中的p标签
//然后再body后增加一个原来的p元素。
|
- 移除被选元素,包括所有文本和子节点
- 会保留jQuery对象中的匹配的元素,因而可以在将来再使用这些匹配的元素
- 会保留所有绑定的事件、附加的事件,这点与remove不同,remove会将节点和事件一并删除。
- 可用于将元素从一端删除后,在另一端重新添加。
|
删除 |
empty() |
$(".btn1").click(function(){
$("p").empty();
});
|
|
删除 |
insertAfter() |
$(document).ready(function(){
$("button").click(function(){
$("h1").insertAfter("p");
});
//在匹配的元素横向进行添加,就相当于找哥们
|
- 对匹配所有元素的横向后进行添加
- 如果需要添加一个空标签,并且该标签已经存在时,将会把已有标签和内容移走至匹配元素后再进行添加。
|
添加 |
prepend() |
$(".btn1").click(function(){
$("p").prepend("<b>Hello world!</b>");
});
|
- 向匹配元素集合中的每个元素开头插入由参数指定的内容。
|
添加 |
replaceAll() |
$(".btn1").click(function(){
$("p").replaceAll("<b>Hello world!</b>");
});
|
- 用匹配的元素替换所有匹配到的元素。
- replaceWith可以使用函数进行替换。
|
替换 |
text() |
$(document).ready(function(){
$(".btn1").click(function(){
$("p").text("Hello world!");
});
});
|
- 替换或增加匹配元素的内容
- 空元素匹配后,也可进行添加
|
替换 |
unwrap() |
$("button").click(function(){
$("p").unwrap();
});
|
|
删除 |
wrap() |
$(document).ready(function(){
$(".btn1").click(function(){
$("p").wrap("<div></div>");
});
});
|
- 把匹配的元素用指定的内容或元素包裹起来。
- 进行逐一包裹
|
添加 |
wrapinner() |
$(".btn1").click(function(){
$("p").wrapInner("<b></b>");
});
//查找p标签,在p标签内加入b标签。
|
- 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。
|
添加 |