6月8號工作（jQuery

一夜梨花開 2014-07-30

展開全文

今天的工作

1、append() 方法

Html5代碼

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <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>

append() 方法可以將原本沒有的html通過jquery加進去只要使用和前面同樣的class就可以在添加的瞬間完成style的設(shè)置

2、prepend() 方法

Html5代碼

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>Prepended text</b>. ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>Prepended 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>

prepend() 方法跟前面的元素添加是一樣的效果但是一樣的在于在面的方法是在默認的到最后進行添加但是prepend() 方法是可以在最前面開始進行添加

3、remove() 方法

Html5代碼

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>刪除 div 元素</button>
</body>
</html>

remove() 方法可以把指定的元素通過remove() 方法給刪除掉在那里面就是把整個div給全部刪除掉

4、empty() 方法

Html5代碼

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>清空 div 元素</button>
</body>
</html>

empty() 方法同樣是刪除但是不一樣的事前者是全部刪除連div自身一起刪除但是empty() 方法不一樣empty() 方法是清空意思就是可以把指定的div里面的內(nèi)容全部清空但是會保留下當前的div

5、addClass() 方法

Html5代碼

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").addClass("important blue");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<div id="div1">這是一些文本。</div>
<div id="div2">這是一些文本。</div>
<br>
<button>向第一個 div 元素添加類</button>
</body>
</html>

addClass() 方法是可以通過jquery直接向一個沒有class的標簽里面添加進入一個帶有屬性的class在里面在點擊按鈕以后原來的第二行文字會發(fā)生變化對應(yīng)$("#div1").addClass("important blue");這條語句的意思是變成藍色加大

6、removeClass() 方法

Html5代碼

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">標題 1</h1>
<h2 class="blue">標題 2</h2>
<p class="blue">這是一個段落。</p>
<p>這是另一個段落。</p>
<br>
<button>從元素上刪除類</button>
</body>
</html>