接着上面的,今天把自己學習的內容分析一下:
首先得糾正一下上一篇文章的一個錯誤,在上一篇文章的最後,我提到頁面加載就要實現的效果必須要按照:
$(document).ready(function() {
//實現的函數體
});
這樣的模式才能夠進行執行,其實不然,上面我所做的實例,完全是放在完全是把<script>標籤放在html文檔格式的<head>標籤中的。如果這樣,就必須要按照上面的代碼格式才能夠實現效果,否則報錯,但是,如果我們把<script>標籤放置到html文檔的<body>標籤中呢?呵呵,這樣就可以不按照上面的方式,同樣能夠實現效果,例如:今天在學習jQuery的API時,裏面學習addClass() 方法時,jQuery代碼就是放置到<body>標籤中,在頁面加載完畢同樣實現了效果:
以下是頁面的代碼:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>選擇多個css</title>
<style type="text/css">
p { margin: 8px; font-size:16px; }
.selected { color:blue; }
.highlight { background:yellow; }
</style>
<script src="jQuery/jquery-1.4.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="orderedlist">
<p>
Hello</p>
<p>
and</p>
<p>
Goodbye</p>
<script >$("p:last").addClass("selected highlight");</script>
</div>
</form>
</body>
</html>
解釋一下這句“$("p:last").addClass("selected highlight");”代碼,這句代碼就是遍歷body中所有的p標籤,獲取最後一個p標籤,並給它附加已經定義好了的“selected highlight”兩個css樣式,注意,同時附加多個css樣式是以空格隔開的。