jQuery笔记

一、给列表添加不同的图片元素
脚本:
$(function(){
  $(".ranking ul li").each(function(i){ //给第一个li添加执行函数
    var no = $(this).index() + 1; //index() 方法返回指定元素相对于其他指定元素的 index 位置。
    $(this).html("<img src='images/Temp/Number/" + no + ".gif' />"+$(this).html()); //文件名称为1.gif,2.gif...
  });
})
页面代码:
<div class="ranking">
  <b>本周畅销排行榜</b>
  <table class="Separator"><tr><td></td></tr></table>
  <ul>
    <li>关于积分换礼的规则说明</li>
    <li>关于积分返还的通知</li>
    <li>关于积分换礼的规则说明</li>
    <li>关于积分返还的通知</li>
    <li>关于积分换礼的规则说明</li>
    <li>关于积分返还的通知</li>
    <li>关于积分换礼的规则说明</li>
    <li>关于积分返还的通知</li>
  </ul>
</div>
二、根据table中的状态栏决定文本框及提交按钮是否可用
脚本:
页面代码:
//当订单的领取状态为"已领取"时,用脚本将兑换密码区的文本框及确认按钮设为不可用。
$(function(){
  $("table:eq(1) td:nth-child(4n)").each(function(i){
    if ($(this).text()=="已领取")
    {
      $(this).css({"color":"#f00"});
      $(this).parent().find(":submit").attr("disabled", "disabled");   
      $(this).parent().find(":password").attr("disabled", "disabled");              
    }
  })
})
asp.net页面源码:
<table>
  <tr><th>奖品名称</th><th>订单号</th><th>兑换密码</th><th>领取状态</th></tr>
  <asp:Repeater ID="repPrizeList" runat="server">
    <ItemTemplate>
      <tr>
<td><img src='<%# Eval("PirzePicture") %>' alt="image" /><%# Eval("PirzeName")%></td>
<td><b><%# Eval("OrderNo")%></b></td>
<td>
  <asp:TextBox ID="txtExchangePass" runat="server" Text="pass123456" TextMode="Password"></asp:TextBox>
  <asp:Button ID="btnExchange" runat="server" OnClick="btnExchange_Click" CommandArgument='<%# Eval("Id") %>' Text="确认" />
</td>
<td><asp:Literal ID="litStatus" runat="server" Text='<%# Eval("ReceiveState") %>'></asp:Literal></td>
      </tr>
    </ItemTemplate>
  </asp:Repeater>
</table>
三、一些jQuery选择技巧
$("#content img:eq(0)").css({"margin-left":"10px","margin-bottom":"10px"});   
$("#content table th:eq(1)").css({"width":"10%"});
$("#content table td:nth-child(2n)").css({"text-align":"center"});
$("#content table td:nth-child(3n)").css({"padding-left":"10px"});
$("#content table td:nth-child(3n-1) b").css({"color":"#B8061E"});
$("#content table th:eq(2)").css({"width":"40%"});
$("#content table tr:last-child").css({"line-height":"60px","background-color":"#eee"});
$("#content table tr td input[id$=btnClearChoppingCart]").addClass("btnClearChoppingCart");   
$("#content table tr td span[id$=lbCountIntegral]").addClass("lbCountIntegral");