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

JQuery中添加/删除

2016-02-04 14:50 465 查看

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>

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

标签：

相关文章推荐

新的分享

章节导航