尚硅谷：jQuery选择器的练习 -

lipiaoshui2015

浏览: 101376 次

最近访客更多访客>>

damin

让蛋蛋飞_007

wang_eye

xiaoweishu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

尚硅谷：jQuery选择器的练习

博客分类：

jquery

尚硅谷：jQuery选择器的练习

1、代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery选择器的练习</title>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//1.给网页中所有的p元素添加onclick事件
				$("p").click(function() {
					//alert(this.firstChild.nodeValue);
					alert($(this).text());
				});
				//2.使一个特定的表格隔行变色
				$("table:first tr:even").css("background","red");
				//3.对多选框进行操作, 输出选中的多选框的个数
				$(":button").click(function() {
					alert("选中的个数为："+$(":checkbox[name='items']:checked").length);
				});
			})
		</script>
		
	</head>
	<body>
		<h2>1.给网页中所有的p元素添加onclick事件</h2>
		<p>段落1</p>
		<p>段落2</p>
		<h2>2.使一个特定的表格隔行变色</h2>
		<table 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>
			<tr>
				<td>第六行</td>
				<td>第六行</td>
			</tr>
		</table>
		<table></table>
		<h2>3.对多选框进行操作, 输出选中的多选框的个数</h2>
		<input type="checkbox" name="items" checked/>test1
		<input type="checkbox" name="items"/>test2
		<input type="checkbox" name="items" checked/>test3
		<input type="checkbox" name="items"/>test4
		<input type="button" value="你选中的个数"/>
	</body>
</html>

2、练习1