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");