jQuery入门之选择器

最新推荐文章于 2023-03-29 18:52:35 发布

这个名字真难起

最新推荐文章于 2023-03-29 18:52:35 发布

阅读量163

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45949075/article/details/107430539

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基本选择器&层级选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器（和css语法相似）：
在这里插入图片描述
层级选择器通过 DOM 元素之间的层级关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<input type="text" id="name" value="admin" />
		
		<script>
			//id选择器
			console.log($("#name").val());//获取对应元素的value值
			console.log(jQuery("#name").val());//$等效于jQuery
			
			console.log($("#name"));//该选择器获取的是相应HTML元素对应的jQuery对象
			console.log($("#name")[0]);//jQuery对象->JavaScript原生对象
			
			console.log(document.getElementById("name"));
			console.log($(document.getElementById("name")));//JavaScript原生对象->jQuery对象
		</script>
		
		<div class="z">zzu</div>
		<span class="z">zz</span>
		<b id="time"></b>
		
		<script>
			//类选择器
			var arr = $(".z");
			console.log(arr);
			for (var i=0;i<arr.length;i++) {
				console.log(arr[i]);
			}
			//document.getElementById("time").innerHTML="2020-7-18";
			$("#time").html("2020-7-18");//与上面javascript代码等效
		</script>
		
		<script>
			//标签选择器
			var arr = $("script");
			console.log(arr);
			for (var i=0;i<arr.length;i++) {
				console.log(arr[i]);
			}
		</script>
		
		<script>
			//分组选择器
			var arr = $(".z,#time");
			console.log(arr);
			for (var i=0;i<arr.length;i++) {
				console.log(arr[i]);
			}
			
			//后代选择器
			var arr = $("html body script");
			console.log(arr);
			for (var i=0;i<arr.length;i++) {
				console.log(arr[i]);
			}
		</script>
	</body>
</html>

基本过滤选择器

在这里插入图片描述
将表格相邻两行分为不同颜色（表头除外）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<style>
			table{
				border: 1px solid black;
				border-spacing: none;
				border-collapse: collapse;
			}
			
			th{
				border: 1px solid black;
			}
			
			td{
				border: 1px solid black;
			}
		</style>
		
		<table>
			<thead>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>手机号</th>
					<th>家庭地址</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>001</td>
					<td>Jim</td>
					<td>13537485679</td>
					<td>河南省郑州市</td>
				</tr>
				<tr>
					<td>001</td>
					<td>Jim</td>
					<td>13537485679</td>
					<td>河南省郑州市</td>
				</tr>
				<tr>
					<td>001</td>
					<td>Jim</td>
					<td>13537485679</td>
					<td>河南省郑州市</td>
				</tr>
			</tbody>
		</table>
		<script>
			$("tbody tr:odd").css("background-color","yellow");//除表头外奇数行设置为黄色
			$("tbody tr:even").css("background-color","green");//除表头外偶数行设置为绿色
		</script>
	</body>
</html>

内容过滤选择器

在这里插入图片描述

可见性过滤选择器

在这里插入图片描述
注意：
可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (< input type=“hidden” >)和 visible:hidden 之类的元素。

子元素过滤选择器

在这里插入图片描述
:nth-child() 选择器详解如下：

:nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素；
:nth-child(2): 能选取每个父元素下的索引值为 2 的元素；
:nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素；
:nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素；

表单过滤选择器

在这里插入图片描述

表单对象属性过滤选择器

在这里插入图片描述

属性选择器

在这里插入图片描述

这个名字真难起

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门之选择器

基本选择器&层级选择器基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器（和css语法相似）：层级选择器通过 DOM 元素之间的层级关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/j
复制链接

扫一扫