jQuery 的第一个例子
这是我学习jQuery的第一个例子。通过这个例子可以对jQuery的使用有个基本的认识,jQuery的事件句柄、选择器、基本语法结构。
在做第一个例子之前,你需要先到:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.min.js&downloadBtn=%3CSPAN%3EDownload%3C%2FSPAN%3E下载 jQuery库,它是一个js的文件,非常的小,只有几十KB,下载完成后,就把这个js文件复制到你的项目,用Script附加这个文件就可以了。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
<script src="App_Script/jquery.js" type="text/javascript"></script>
<style type="text/css">
.red
{
background-color: Red;
}
.green
{
background-color: Green;
}
.blue
{
background-color: Blue;
}
</style>
<script type="text/javascript">
$(document).ready(
function() {
$("div").addClass("blue");
//$("#olID>li").addClass("green");
$("#olID>li").hover(
function() {
$(this).addClass("red")
},
function() {
$(this).removeClass("red")
});
$("#olID>li:last").hover(
function() {
$(this).addClass("green");
},
function() {
$(this).removeClass("green");
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ol id="olID">
<li>Sissy.Nong.C</li>
<li>农凤新</li>
<li>nongfengxin@gmail.com</li>
</ol>
</div>
</form>
</body>
</html>
<head id="Head1" runat="server">
<title></title>
<script src="App_Script/jquery.js" type="text/javascript"></script>
<style type="text/css">
.red
{
background-color: Red;
}
.green
{
background-color: Green;
}
.blue
{
background-color: Blue;
}
</style>
<script type="text/javascript">
$(document).ready(
function() {
$("div").addClass("blue");
//$("#olID>li").addClass("green");
$("#olID>li").hover(
function() {
$(this).addClass("red")
},
function() {
$(this).removeClass("red")
});
$("#olID>li:last").hover(
function() {
$(this).addClass("green");
},
function() {
$(this).removeClass("green");
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ol id="olID">
<li>Sissy.Nong.C</li>
<li>农凤新</li>
<li>nongfengxin@gmail.com</li>
</ol>
</div>
</form>
</body>
</html>