实例
1
----
淘宝列表
问题
1
：隔行变色处理
因为后面删除行后，要再次调用，所以将其封装为函数。
处理方式一：奇数偶数行分别加背景色。
$("#taobao_tabletr:gt(0):odd").css("background"
，
"#066");
$("#taobao_tabletr:gt(0)
:even
").css("background"
，
"#FFF");
注意：如果只对奇数或只对偶数进行处理的话，删除某行后，虽然奇偶重新排列，但是后来
的样式不能覆盖原样式。
解决方法：对新的奇偶重新进行设置。
处理方式二：对奇数或偶数行加样式。
$("#taobao_tabletr:gt(0)
:even
").removeClass("bgColor");
$("#taobao_tabletr:gt(0):odd").addClass("bgColor");
注意：如果只是对奇数或偶数行加样式的话，删除某行后，只是在新的奇数或偶数行上加上
样式，原有的
样式
未删除。
解决
方法：
删除原所有行的样式，再对新的奇数或偶数行加样式。
定位
tr
时从
<table>
向下找子孙结点，使用重叠选择器
E
F
或者
find()
函数。
function
changeColor(){
//
（
1
）奇数
/
偶数分别背景色
//$("#taobao_tabletr:gt(0)
:even
").css("background"
，
"#FFF");
//$("#taobao_tabletr:gt(0):odd").css("background"
，
"#066");
//
（
2
）使用样式控制隔行变色
$("#
taobao_tabletr:gt(0)").removeClass("bgColor");
$("#taobao_tabletr:gt(0):odd").addClass("bgColor");
}
问题
2
：全选和全不选
的处理
（
1
）找到第一个
checkbox
：
$(":checkbox:first")
或者
$(":checkbox:
eq(0)
")
（
2
）获取
checkbox
的当前状态：
prop()
函数（
cf
：
attr()
函数）
checkbox
状态为
true/false
1
（
3
）根据当前的状态，设置其
他
checkbox
状态
如果
true
：把下面的
checkbox
都选中（设置为
true
）；
如果
false
：把下面的
checkbox
都不选中（设置为
false
）
if($(this).is(":checked")){
$(":checkbox:gt(0)").prop("checked"
，
true);
}else{
$(":checkbox:gt(0)").prop("checked"
，
false);
}
简化为：
$(":checkbox:gt(0)").prop("checked"
，
$(this).is(":checked"));
代码如下：
$(":checkbox:first").click(function(){//:eq(0)
$(":checkbox:gt(0)").prop("checked"
，
$(this).is(":checked"));
})
问题
3
：计算总价
因为在多处需要调用计算总价的功能，所以将其封装为一个函数。
（
1
）统计总价的依据是所有被选中的
checkbox
：
$(":checkbox:gt(0):checked")
（
2
）价格位于
<span><
/span>
标签内
<tr>
<td
align="center"
width="60"><input
type="checkbox"/></td>
<td
align="center">¥
<span>59.00</span>
</td>
<td
align="center">
北京
</td>
<td
align="center"><input
type="button"
value="
删除
"/></td>
</tr>
找
<span>
时，从
this
（
checkbox
）出发，向上找到
<tr>
，再向下找到
<
span>
。向上找祖先结点
时
可以
使用
parents()
函数
，指定祖先的名字“
tr
”
（
parent()
函数只能取到双亲）
（
3
）价格的提取
2