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

jQuery11(过滤器的3个练习)

2016-02-06 00:07 591 查看

过滤器练习1

题目:点击按钮变色,改变字体大小.

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//因为采用链式编程,可以直接在后面继续点 .last
$('table tr:first').css('fontSize', '30px');
$('table tr:last').css('color', 'red');
$('table tr:gt(0):lt(3)').css('fontSize', '28px');
//在这里fontSize 是大写的,需要注意
//table中th标签中的字体居中加粗
});
});
</script>
</head>
<body>
<input type="button" name="name" value="改变" id='btn' />
<table border="1px">
<tr>
<td>
姓名
</td>
<td>
成绩
</td>
</tr>
<tr>
<td>
tom
</td>
<td>
100
</td>
</tr>
<tr>
<td>
jim
</td>
<td>
99
</td>
</tr>
<tr>
<td>
john
</td>
<td>
98
</td>
</tr>
<tr>
<td>
jason
</td>
<td>
97
</td>
</tr>
<tr>
<td>
aaa
</td>
<td>
97
</td>
</tr>
<tr>
<td>
平均分
</td>
<td>
98
</td>
</tr>
</table>
</body>
</html>

知识点:table中th标签中的字体居中并且加粗.fontSize中s为大写,注意.

过滤器练习2

题目:前三名粗体

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('ul li:lt(3)').css('fontWeight', 'bolder');
});
</script>
</head>
<body>
<p id='p1'>
前三名变成粗体</p>
<ul>
<li>乔峰</li>
<li>郭晶</li>
<li>卡西</li>
<li>梅西</li>
<li>喜洋洋</li>
<li>熊大</li>
<li>西瓜</li>
</ul>
</body>
</html>

知识点:改变字体粗细:fontWeight 粗体:bolder.

过滤器练习3

题目:点谁谁变黄

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#tb tr').click(function () {
//注意,这里链式编程 sibling('标签').css
$(this).css('backgroundColor', 'yellow').siblings('tr').css('backgroundColor', '');
});
});
</script>
</head>
<body>
<table id='tb' border="1">
<tr>
<td>
芙蓉姐姐
</td>
<td>
凤姐
</td>
</tr>
<tr>
<td>
芙蓉姐姐
</td>
<td>
凤姐
</td>
</tr>
<tr>
<td>
芙蓉姐姐
</td>
<td>
凤姐
</td>
</tr>
<tr>
<td>
芙蓉姐姐
</td>
<td>
凤姐
</td>
</tr>
<tr>
<td>
芙蓉姐姐
</td>
<td>
凤姐
</td>
</tr>
</table>
</body>
</html>

知识点:siblings括号内可以写元素.除了点击的tr不改变,其他的tr都恢复默认颜色

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

标签：

相关文章推荐

新的分享

章节导航