您的位置：首页 > Web前端 > JQuery

jquery文档操作函数大全

2015-12-09 20:47 796 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航