jquery文档操作函数大全

来源：互联网发布：mac os windows双系统编辑：程序博客网时间：2024/05/22 16:38

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>

0 0