接着上面的,今天把自己学习的内容分析一下:
首先得纠正一下上一篇文章的一个错误,在上一篇文章的最后,我提到页面加载就要实现的效果必须要按照:
$(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样式是以空格隔开的。