addClass();向选定的元素添加指定的类名(添加一个或多个类,添加多个类中间用空格隔开);
after();在被选元素后面插入指定的内容
append();在元素结尾处添加内容
appendTo();向目标结尾插入匹配元素集合中的每个元素
attr(); 方法设置或返回被选元素的属性值。
before();在每个匹配的元素之前插入内容。
clone() 方法生成被选元素的副本,包含子节点、文本和属性。
empty() 方法从被选元素移除所有内容,包括所有文本和子节点。
hasClass() 方法检查被选元素是否包含指定的 class。
prepend() ,prependTo()方法在被选元素的开头(仍位于内部)插入指定内容.
removeAttr() 从所有匹配的元素中移除指定的属性
removeClass() 从所有匹配的元素中删除全部或者指定的类。
replaceAll() 用匹配的元素替换所有匹配到的元素。
replaceWith() 用新内容替换匹配的元素。
toggleClass() 从匹配的元素中添加或删除一个类。
unwrap() 移除并替换指定元素的父元素。
wrap() 把匹配的元素用指定的内容或元素包裹起来。
wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。
鉴于时间关系就不一一举例了,感兴趣的同学可以根据下面的例子自己写实例
语法:
$(selector).addClass(class);
$(selector).after(content);
$(selector).append(content);
$(selector).clone(includeEvents);
实例:
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用函数addClass()</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#bt1").click(function(){
$("p").addClass(function(index,oldclass){
// alert(n);
//n++;
oldclass='par';
return oldclass+index;
});
});
//显示after和append的区别和appendTo的差异
$("#bt2").click(function(){
$("p").after("aaaa");
});
$("#bt3").click(function(){
$("p").append("aaaaa")
});
$("#bt4").click(function(){
$("<b>ascac></b>").appendTo("p");
});
$("#bt5").click(function(){
$("body").append($("#bt1").clone(true) );
});
$("#bt6").click(function(){
$("p").detach("p");
});
});
</script>
<style type="text/css">
.par0{
color:green;
}
.par1{
color:red;
}
.par2{
color:blue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>aaaaaaaaaa</p>
<button id="bt1">向 p 元素添加类</button>
<button id="bt2">向p元素后面添加内容after</button>
<button id="bt3">向p元素后面添加内容append</button>
<button id="bt4">向p元素后面添加内容appendTo</button>
<button id="bt5">克隆元素副本clone</button>
<button id="bt6">移除p元素</button>
</body>
</html>