(簡單範例)jQuery 處理 HTML Elements

2008-04-12

3645
0

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

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

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

效果是這樣.. 來看一下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就好啦..不需要這麼麻煩..

回首頁