星期五, 4月 11, 2008

(簡單範例)jQuery 處理 HTML Elements

今天在處理案子上..需要大量使用javascript去跑..傳統的javascript寫出來的常常"露露長"..Tongue out
所以就把最近在大家稱讚的jquery拿出來跟ajax framework來配合使用..看可以省多少工..

來個簡單的範例..先做一個亂數表

a

然後按下"抓單數"這按鈕..

b

效果就達到啦..
來看一下html原始碼..

<form id="form1" runat="server">
<!--這裡是加入jquery-->
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/js/jquery-1.2.3.js" />
</Scripts>
</asp:ScriptManager>

<!--這裡是簡單的css-->
<style type="text/css">
.tableCss
{
width: 300px;
height: 300px;
border: 1px solid #008000;
border-collapse: collapse;
}
.tableCss td
{
border: 1px solid #008000;
text-align: center;
}
</style>

<!--這裡是簡單的table-->
<table cellpadding="0px" cellspacing="0px" class="tableCss">
<tr>
<td>15</td>
<td>02</td>
<td>07</td>
<td>04</td>
</tr>
<tr>
<td>10</td>
<td>06</td>
<td>03</td>
<td>09</td>
</tr>
<tr>
<td>12</td>
<td>05</td>
<td>11</td>
<td>08</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>01</td>
<td>13</td>
</tr>
</table>

<!--這裡加入button-->
<input id="Button1" type="button" value="抓單數" onclick="singleNum()"/>
<input id="Button2" type="button" value="清除" onclick="clearAll()"/>
</form>

js原始碼

<script type="text/javascript">
function singleNum()
{
//把所有的符合條件element都抓出來
var arr = $('.tableCss td').get();

//用microsoft ajax client的array擴充功能來跑foreach
Array.forEach(arr,function(item){
var elem = $(item);
if(Number.parseInvariant(elem.text()) % 2 ==1)
{
elem.css('background-color','silver');
}
});
}
function clearAll()
{
//把所有的符合條件element都抓出來,然後清除
$('.tableCss td').removeAttr('style');
}
</script>

輕鬆簡單..一下子就做完啦..跟傳統的作法省了蠻多東西的.. 尤其是Intellisense這部份..
是我最想要的..雖然還是跑不了跑迴圈的宿命..Disappointed..但是..爽度增加很多..^^..讚..
不過這樣也有缺點的..就是網頁的基本容量就很大..至少60k起跳..
如果需要簡單的功能的話..直接用傳統的javascript就好啦..不需要這麼麻煩..

沒有留言: