您的位置：首页 > Web前端 > JQuery

JQuery 过滤选择器

2017-12-17 21:01 225 查看

过滤选择器：第一次选择之后，再一次进行选择。
$('div') //选择器，第一次选择
$('div:first') //第一个元素
$('div:last') //最后一个元素
$('div:gt(2)') //下标大于2的所有元素。下标从0开始。
$('div:lt(2)') //下标小于2的所有元素。下标从0开始。前两个元素。
$('div:eq(2)') //下标等于2的元素。
$('div:not(#d1)') //不包含 #d1 的所有元素。
$('div:even') //下标为偶数的所有元素，下标从0开始。(第奇数个)
$('div:odd') //下标为奇数的所有元素，下标从0开始。(第偶数个)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
td {
color: white;
}
</style>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
var list = [
{ id: '1', country: '中国', capital: '北京' },
{ id: '2', country: '美国', capital: '华盛顿' },
{ id: '3', country: '日本', capital: '东京' },
{ id: '4', country: '韩国', capital: '首尔' }
];

$(function () {
//遍历集合，创建tr与td
$.each(list, function(index, item) {
$('<tr><td>' + item.id + '</td><td>' + item.country + '</td><td>' + item.capital + '</td></tr>').appendTo('#list');
});
//为奇偶行指定不同背景色
$('#list tr:even').css('background-color', 'red');
$('#list tr:odd').css('background-color', 'green');
//指定鼠标移上、移开效果
$('#list tr').hover(function() {//鼠标移上
bgColor = $(this).css('background-color');
$(this).css('background-color', 'blue');
}, function() {//鼠标移开
$(this).css('background-color', bgColor);
});
//前三名变粗
$('#list tr:lt(3)').css('font-weight', 'bold');
});
</script>
</head>
<body>
<table border="1">
<thead>
<th width="100">编号</th>
<th width="100">国家</th>
<th width="100">首都</th>
</thead>
<tbody id="list">

</tbody>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航