JQuery中添加/删除
来源：互联网 发布：足球训练绘图软件 编辑：程序博客网 时间：2024/05/13 23:21
- 1.添加方法：
append() 表示在元素的结尾插入内容
prepend()表示在元素的开头插入内容
after()表示在元素之后插入内容
before() 表示在元素之前插入内容
addClass() 表示向元素添加一个或多个CSS样式类
2.删除方法:
remove() 表示删除元素及其子元素
empty() 表示删除元素的子元素
removeClass() 表示删除元素一个或多个CSS样式类
3.切换addClass()与removeClass()方法:
toggleClass() 表示对元素进行添加/删除CSS样式类的切换操作
来看以下例子：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("p").addClass("red");
});
$("#button2").click(function(){
$("p").removeClass("red");
});
$("#button3").click(function(){
$("p").toggleClass("red");
});
$("#button4").click(function(){
$("#div1").remove();
});
$("#button5").click(function(){
$("#div1").empty();
});
$("#button6").click(function(){
$("#div1").append("<p>添加的新元素！</p>");
});
$("#button7").click(function(){
$("#div1").prepend("<p>添加的新元素！</p>");
});
$("#button8").click(function(){
$("#div1").before("<p>添加的新元素！</p>");
});
$("#button9").click(function(){
$("#div1").after("<p>添加的新元素！</p>");
});
});
</script>
<style type="text/css">
.red
{
color:blue;
}
</style>
</head>
<body>
<button id="button1">向元素添加类</button><button id="button2">向元素删除类</button><button id="button3">切换元素类</button><br><button id="button4">移除div及子元素</button><button id="button5">移除div的子元素</button><br>
<button id="button6">在div末尾添加元素</button><button id="button7">在div开头添加元素</button><button id="button8">在div之前添加元素</button><button id="button9">在div之后添加元素</button>
<div id="div1" style="border:1px solid red;">
<p>这是一个段落。</p>
</div>
</body>
</html>
0 0
- JQuery中添加/删除
- Jquery 中添加删除样式
- jQuery中动态添加和删除行
- jQuery中添加与删除元素
- jquery中添加属性和删除属性
- JQuery添加删除行
- jQuery添加删除html
- jquery 添加、删除元素
- jquery 添加\删除 cookie
- Jquery添加删除行
- Jquery 添加删除div
- jquery 添加删除元素
- jQuery 添加与删除
- jQuery 添加删除元素
- JQuery添加删除元素
- jQuery删除，添加节点
- JQuery进行添加删除
- JQuery中对option的添加、删除、取值
- Sqlite3 批量插入
- ZwReadFile routine
- Java数字日期时间格式化处理
- 浅谈position、display、float定位属性
- 浅谈android的线程安全和handler处理
- JQuery中添加/删除
- <context:component-scan/> 作用
- 最全Android开发常用工具类
- Hession 异常 com.caucho.hessian.io.HessianProtocolException
- 基于Tcp协议与基于Http协议的RPC简介笔记
- 正则表达式语法
- Simple-Java—Collections（一）Java高效计数器
- iOS两个app之间跳转及其传值
- 不自定义也可更改UITableViewCellSection背景颜色字体颜色
