jQuery选择器

最新推荐文章于 2024-01-14 11:54:30 发布

qq_45926670

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量62

点赞数

本文链接：https://blog.csdn.net/qq_45926670/article/details/105144273

版权

1.选择器

给按键定义方法

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>练习01</title>
	<script src="jQuery/jquery-1.11.2.min.js"></script>
	<script type="text/javascript">
		$(function(){//入口函数
			$("#btn").on("click",function(){//id选择器
				var input = $("input:checked");
				console.debug(input);
				$.each(input,function(n,e){
					$(e).val();
				});
			});
			
			$("p").on("click",function(){//标签选择，选择p标签
				$(this).hide(600);
			});
			
			$("#btn2").on("click",function(){
				$("p").show(200);
			});
			
			$("table tr:even").css("background","orange");//选择table下面的偶数索引的tr
			$("table tr:odd").css("background","blue");//选择table下面的奇数索引的tr
		});
		
	</script>
</head>
<body>
	篮球 <input type="checkbox" name="hobbies" value="篮球" /> 
	足球 <input type="checkbox" name="hobbies" value="足球"/> 
	羽毛球 <input type="checkbox" name="hobbies" value="羽毛球"/>

	<input value="点击获取选中个数" type="button" id="btn" />

	<br />点击p标签隐藏 <button id="btn2"> 显示隐藏的 p </button>
	<br />
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>

	<br />
		奇数行绿色
		偶数行粉红色
	<br/>
	<table border="1" width="200px">
		<tr>
			<td>item1</td>
		</tr>
		<tr>
			<td>item2</td>
		</tr>
		<tr>
			<td>item3</td>
		</tr>
		<tr>
			<td>item4</td>
		</tr>
		<tr>
			<td>item5</td>
		</tr>
	</table>
</body>
</html>