jQuery其他选择器

最新推荐文章于 2022-10-12 10:48:51 发布

微风吹过李子树

最新推荐文章于 2022-10-12 10:48:51 发布

阅读量102

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_43171186/article/details/103689455

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

直接复制粘贴到自己的编辑软件内运行即可得到结果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>其他选择器</title>
	</head>
	<body>
		姓名:<input type="text" id="uname" name="uname" /><br />
				密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
				年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
					 <input type="radio" name="uage" value="1"/>你懂得  <br /> 
				爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
					 <input type="checkbox" name="ufav" value="游戏" checked="checked" />游戏
					 <input type="checkbox" name="ufav" value="代码"  checked="checked" />代码<br />
				来自:<select id="ufrom" name="ufrom">
						<option value="-1" selected="selected">请选择</option>
						<option value="0">北京</option>
						<option value="1">上海</option>
					</select><br />
	</body>
	<!-- 
		属性选择器
			属性名选择器  $("[属性名]") 获取所有设置过指定属性名的元素
			属性名与属性值选择器  $("[属性名=属性值]")  获取所有设置过属性名等于属性值的元素
		
		过滤选择器
			选择被选择的元素（单选框，多选框，下拉框）
			$(":checked")
			$(":checkbox:checked")
			$(":selected"):获取下拉框被选中的项
			大于指定下标的：$(":gt(下标)")
			匹配指定下标的：$(":eq(下标)")
			所有奇数行下标：%(":odd")
			所有偶数行下标：$(":even")
	 -->
	 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	 <script type="text/javascript">
	     console.log("=======属性选择器=========");
		var ids =$("[id]");
		console.log(ids);
		var names=$("[name='ufav']");
		console.log(names);
		 console.log("=======获取所有被选中的选项=========");
	 	var chk=$(":checked");
		console.log(chk);//包括单选 复选 下拉列表
		console.log("=======获取所有下拉列表被选中的选项=========");
		var sel=$(":selected");
		console.log(sel);//只会选择被选中的option
		console.log("=======获取大于指定下标=========");
		var gt=$(":checked:gt(1)");
		console.log(gt);//checked 一共有四个下标从0开始，所以选中的是后两个
		console.log("=======获取指定下标=========");
		var ep=$(":checked:eq(3)");
		console.log(ep);//选中的就是最后一个option
		console.log("=======获取奇数下标=========");
		var odd=$(":checked:odd");
		console.log(odd);//选中的是1,3含有option
		console.log("=======获取偶数下标=========");
		var even=$(":checked:even");
		console.log(even);//选中的是0,2
	 </script>
	 
</html>

运行结果（浏览器鼠标右键选择：查看元素/检查或者直接按F12：选择控制台/console进行查看）：
在这里插入图片描述

微风吹过李子树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery其他选择器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>其他选择器</title> </head> <body> 姓名:<input type="text" id="uname" name="uname" />...
复制链接

扫一扫