4.复习笔记(这个就是课后习题以及课程所呈现的需求)
1.添加元素
(1)在元素里面添加
(2)在元素外面添加
2.怎么在jquery删除元素
(1)remove方法
(2)empty用法
3.改变颜色的方法
(1)红色,蓝色
(2)红色,去除红色,蓝色,去除蓝色
(3)toggle红色切换
5.自测代码
2.课堂笔记
(1)在元素里面添加
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
(2)在元素外面添加
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p:first").after(" <div>这是新添加的内容</div>");
});
$("#btn2").click(function(){
var p=document.createElement("p");
p.innerHTML="你好";
$("ol").after(p);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
2.怎么在jquery删除元素
(1)remove方法
<style type="text/css">
div
{
width:200px;
height:200px;
background-color:yellow;
}
</style>
<script>
$(function(){
$("button").click(function(){
$("div").remove();
});
});
</script>
</head>
<body>
<div>
<p>这是第一段话</p>
<p>这是第二段话</p>
<button>测试</button>
</div>
</body>
</html>
(2)empty用法
3.改变颜色的方法
(1)红色,蓝色
<style type="text/css">
.red
{
color:red;
}
.blue
{
color:blue;
}
</style>
<script>
$(function(){
$("button:eq(0)").click(function(){
$("p").addClass("red");
});
$("button:eq(1)").click(function(){
$("p").addClass("blue");
});
});
</script>
</head>
<body>
<div>
<p class="a">这是第一段话</p>
<p class="b">这是第二段话</p>
</div>
<button>按钮1</button><button>按钮2</button>
</body>
</html>
(2)红色,去除红色,蓝色,去除蓝色
<script>
$(function(){
$("button:eq(0)").click(function(){
$("p").addClass("red");
});
$("button:eq(1)").click(function(){
$("p").addClass("blue");
});
$("button:eq(2)").click(function(){
$("p").removeClass("red");
});
$("button:eq(3)").click(function(){
$("p").removeClass("blue");
});
});
</script>
</head>
<body>
<div>
<p class="a">这是第一段话</p>
<p class="b">这是第二段话</p>
</div>
<button>红色</button><button>蓝色</button><button>去除红色</button><button>去除蓝色</button>
</body>
</html>
(3)toggle红色切换
<style type="text/css">
.red
{
color:red;
}
.blue
{
color:blue;
}
</style>
<script>
$(function(){
$("button:eq(0)").click(function(){
$("p").addClass("red");
});
$("button:eq(1)").click(function(){
$("p").addClass("blue");
});
$("button:eq(2)").click(function(){
$("p").removeClass("red");
});
$("button:eq(3)").click(function(){
$("p").removeClass("blue");
});
$("button:eq(4)").click(function(){
$("p").toggleClass("red");
});
});
</script>
</head>
<body>
<div>
<p class="a">这是第一段话</p>
<p class="b">这是第二段话</p>
</div>
<button>红色</button><button>蓝色</button><button>去除红色</button><button>去除蓝色</button><button>红色切换</button>
</body>
</html>