跟我学jQuery(二) 初识jQuery
跟我學(xué)jQuery教程目錄:
?
?
一.必備條件
1.下載jQuery類庫
??? jQuery的最新類庫放在google code上,下載地址如下:
??? http://code.google.com/p/jqueryjs/downloads/list
?? 里面有很多版本,大致有以下幾種:
?? min:壓縮版本,在項(xiàng)目發(fā)布的時(shí)候使用 jquery-1.3.2.min.js
?? release:未壓縮版本包,包括沒有壓縮的jQuery庫,文檔和相關(guān)事例 jquery-1.3.2-release.zip
?? vsdoc2:此版本是Visual Studio 2008中專門用于智能感應(yīng)的版本(強(qiáng)烈推薦) jquery-1.3.2-vsdoc2.js
?
2.如何使用Visual Studio 2008支持jQuery的智能感應(yīng)
??? 值得欣慰的是在Visual Studio 2008中已經(jīng)支持jQuery的智能感應(yīng),我們后面的例子將使用Visual Studio 2008進(jìn)行書寫,現(xiàn)在我來講解一下jQuery中Visual Studio 2008智能感應(yīng)的配置.當(dāng)然你如果沒有Visual Studio 2008其他的多可以,可以直接省去下面幾個(gè)步驟.
??? 先決條件:
??? 1.下載Visual Studio 2008安裝SP1補(bǔ)丁
????? 下載地址:http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx
?????? [注意]:打了這個(gè)補(bǔ)丁后,有很多以前寫代碼出現(xiàn)的智能感應(yīng)內(nèi)容變成英文的了,這里等裝好SP1補(bǔ)丁后在從這個(gè)地址下載一個(gè)還原補(bǔ)丁(一定要要選擇下VS90SP1-KB957507-v2-CHS-x86.exe這個(gè)文件)http://code.msdn.microsoft.com/KB957507/Release/ProjectReleases.aspx?ReleaseId=1854
??? 2.去google code下載相對(duì)應(yīng)的js文件
??? 3.然后在代碼中引入必須帶vsdoc的jQuery庫(切記)
<script type="text/javascript" src="jquery-1[1].3.2-vsdoc2.js"></script>??? 現(xiàn)在我們來看看VS08里面的智能感應(yīng)效果
呵呵!已經(jīng)出現(xiàn)智能感應(yīng)效果了.
3.書寫第一個(gè)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>
效果如下圖:
上面我們就實(shí)現(xiàn)了表格交替行和光棒效果5行代碼就搞定了,簡(jiǎn)潔吧
上面運(yùn)用到了:
(1)元素選擇器?? $(“tr”)
(2)事件綁定方法 bind()
(3)給元素添加樣式? addClass()
在這里我要提醒大家上面我用$取得的結(jié)果是一個(gè)jQuery對(duì)象,當(dāng)我們想要實(shí)際的操縱在頁面中找到的原始就可以通過jQuery會(huì)非常的簡(jiǎn)單.這里要注意區(qū)別的是jQuery對(duì)象與常規(guī)的DOM對(duì)象是不通的.我們?cè)诤竺鏁?huì)專門講到兩者的區(qū)別,剛?cè)腴T我覺得沒有必要對(duì)這2個(gè)概念扣的太死.
轉(zhuǎn)載于:https://www.cnblogs.com/yoowo/archive/2009/05/19/1460555.html
總結(jié)
以上是生活随笔為你收集整理的跟我学jQuery(二) 初识jQuery的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Sql Prompt使用技巧[通俗易懂]
- 下一篇： 深入理解及配置ISA Server 20