6月8號(hào)工作（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">追加列表項(xiàng)</button>
</body>
</html>

append() 方法可以將原本沒(méi)有的html通過(guò)jquery加進(jìn)去只要使用和前面同樣的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">添加列表項(xiàng)</button>
</body>
</html>

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

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() 方法可以把指定的元素通過(guò)remove() 方法給刪除掉在那里面就是把整個(gè)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)容全部清空但是會(huì)保留下當(dāng)前的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>向第一個(gè) div 元素添加類</button>
</body>
</html>

addClass() 方法是可以通過(guò)jquery直接向一個(gè)沒(méi)有class的標(biāo)簽里面添加進(jìn)入一個(gè)帶有屬性的class在里面在點(diǎn)擊按鈕以后原來(lái)的第二行文字會(huì)發(fā)生變化對(duì)應(yīng)$("#div1").addClass("important blue");這條語(yǔ)句的意思是變成藍(lán)色加大

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">標(biāo)題 1</h1>
<h2 class="blue">標(biāo)題 2</h2>
<p class="blue">這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
<br>
<button>從元素上刪除類</button>
</body>
</html>

removeClass() 方法是可以將原本字體的藍(lán)色給刪除掉不是改變是刪除掉

7、toggleClass() 方法

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").toggleClass("blue");
});
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>標(biāo)題 1</h1>
<h2>標(biāo)題 2</h2>
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
<button>切換 CSS 類</button>
</body>
</html>

toggleClass() 方法有著上面兩種效果在沒(méi)有藍(lán)色的字體上加上藍(lán)色在有藍(lán)色的字體上清除藍(lán)色

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：一夜梨花開 > 《Java二期》

舉報(bào)/認(rèn)領(lǐng)