跟我学jQuery(二) 初识jQuery
跟我學jQuery教程目錄:
?
?
一.必備條件
1.下載jQuery類庫
??? jQuery的最新類庫放在google code上,下載地址如下:
??? http://code.google.com/p/jqueryjs/downloads/list
?? 里面有很多版本,大致有以下幾種:
?? min:壓縮版本,在項目發布的時候使用 jquery-1.3.2.min.js
?? release:未壓縮版本包,包括沒有壓縮的jQuery庫,文檔和相關事例 jquery-1.3.2-release.zip
?? vsdoc2:此版本是Visual Studio 2008中專門用于智能感應的版本(強烈推薦) jquery-1.3.2-vsdoc2.js
?
2.如何使用Visual Studio 2008支持jQuery的智能感應
??? 值得欣慰的是在Visual Studio 2008中已經支持jQuery的智能感應,我們后面的例子將使用Visual Studio 2008進行書寫,現在我來講解一下jQuery中Visual Studio 2008智能感應的配置.當然你如果沒有Visual Studio 2008其他的多可以,可以直接省去下面幾個步驟.
??? 先決條件:
??? 1.下載Visual Studio 2008安裝SP1補丁
????? 下載地址:http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx
?????? [注意]:打了這個補丁后,有很多以前寫代碼出現的智能感應內容變成英文的了,這里等裝好SP1補丁后在從這個地址下載一個還原補丁(一定要要選擇下VS90SP1-KB957507-v2-CHS-x86.exe這個文件)http://code.msdn.microsoft.com/KB957507/Release/ProjectReleases.aspx?ReleaseId=1854
??? 2.去google code下載相對應的js文件
??? 3.然后在代碼中引入必須帶vsdoc的jQuery庫(切記)
<script type="text/javascript" src="jquery-1[1].3.2-vsdoc2.js"></script>??? 現在我們來看看VS08里面的智能感應效果
呵呵!已經出現智能感應效果了.
3.書寫第一個jQuery程序
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>表格交替行和光棒效果</title>
<style type="text/css">
.odd{ background-color:#fcc;}
.even{ background-color:#cef;}
.light{ background-color:#dfc;}
</style>
<script language="javascript" type="text/javascript" src="jquery-1[1].3.2-vsdoc2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
$("tr:odd").bind("mouseout", function(event) { $(this).addClass("odd"); $(this).removeClass("light"); });
$("tr:even").bind("mouseout", function(event) { $(this).addClass("even"); $(this).removeClass("light"); });
$("tr").bind("mouseover", function(event) { $(this).addClass("light"); });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="tbTest" width="300px" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
</form>
</body>
</html>
效果如下圖:
上面我們就實現了表格交替行和光棒效果5行代碼就搞定了,簡潔吧
上面運用到了:
(1)元素選擇器?? $(“tr”)
(2)事件綁定方法 bind()
(3)給元素添加樣式? addClass()
在這里我要提醒大家上面我用$取得的結果是一個jQuery對象,當我們想要實際的操縱在頁面中找到的原始就可以通過jQuery會非常的簡單.這里要注意區別的是jQuery對象與常規的DOM對象是不通的.我們在后面會專門講到兩者的區別,剛入門我覺得沒有必要對這2個概念扣的太死.
轉載于:https://www.cnblogs.com/yoowo/archive/2009/05/19/1460555.html
總結
以上是生活随笔為你收集整理的跟我学jQuery(二) 初识jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Sql Prompt使用技巧[通俗易懂]
- 下一篇： Q学习（Q-learning）入门小例子