jquery基本选择器和属性选择器的案例

最新推荐文章于 2024-08-29 14:33:40 发布

锅絮不是我

最新推荐文章于 2024-08-29 14:33:40 发布

阅读量239

点赞数

文章标签： jquery html css

本文链接：https://blog.csdn.net/myx20220713/article/details/126292613

版权

基本选择器案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.min.js"></script>
		<style type="text/css">
			.div_0{
				width: 200px;
				height: 50px;
				background-color: aqua;
				color: blue;
			}
		</style>
	</head>
	<body>
		<input type="text" id="one">+
		<input type="text" id="two">=
		<input type="text" id="result" disabled>
		<input type="button" value="计算" class="btn">
		<hr>
		<input type="button" value="改变" id="btn2"><br />
		<div class="div_0">这是一个div标签</div>
		<p class="div_0">这是一个p标签</p>
		<script type="text/javascript">
			$(function(){
				//绑定点击事件
				$(".btn").click(function(){
					//实现加法运算
					//
					var first=$("#one").val()
					var second =$("#two").val()
					var result=parseInt(first)+parseInt(second)
					$("#result").val(result)
				})
				
				
			})
			$("#btn2").click(function(){
				//
				$("div,p").css("color","yellow")
				//
				$("p.div_0").css("background-color","red")
			})
			
		</script>
	</body>
</html>

效果图

属性选择器案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.min.js"></script>
		<style type="text/css">
			td{
				/* border: 1px solid black; */
				
				
			}
			th{
				/* border: 1px solid black; */
			}
		</style>
	</head>
	<body>
		<table border="1" width="200"  cellspacing="1" >
			<thead >
				<tr>
					<th>
						<input type="checkbox" id="selectAll">
					</th>
					<th>课程名称</th>
					<th>所属</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>html</td>
					<td>web前端</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>css</td>
					<td>web前端</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>js</td>
					<td>web前端</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>jquery</td>
					<td>web前端</td>
				</tr>
			</tbody>
			<input type="button" value="隔行变色" id="btn1">
			<input type="button" value="标题文本变色" id="btn2">
			<input type="button" value="改变第一行的样式" id="btn3">
			<input type="button" value="改变最后一行" id="btn4">
		</table>
		<script type="text/javascript">
			$("#selectAll").click(function(){
				//
				var isChecked=$("#selectAll").prop("checked")
				console.log(isChecked)
				//
				$("tbody input[type='checkbox']").prop("checked",isChecked)
			})
			//
			$("tbody input[type='checkbox']").click(function(){
				var length =$("tbody input[type='checkbox']").length
				var count=$("tbody input[type='checkbox']:checked").length
				
				if (count==length) {
					$("#selectAll").prop("checked",true)
				}else{
					$("#selectAll").prop("checked",false)
				}
			})
			
			//反转
			$("tbody tr").mousemove(function(){
				$(this).attr("class","hover")
			})
			$("tbody tr").mouseout(function(){
				$(this).removeAttr("class","hover")
			})
			
			//隔行变色
			$("#btn1").click(function(){
				$("tbody tr:odd").css("background-color","green")
			})
			$("#btn2").click(function(){
				$("tbody tr:eq()").css("background-color","yellow")
			})
			$("#btn3").click(function(){
				$("tbody tr:first").css("color","green")
			})
			$("#btn4").click(function(){
				$("tbody tr:gt(1):not(:last)").css("color","red")
			})
			
			
		</script>
	</body>
</html>

第二个效果不太好，但大体还可以

效果图