Web开发基础_JQuery学习_0003_jQuery选择器

最新推荐文章于 2024-04-27 02:33:39 发布

Coder_Boy_

最新推荐文章于 2024-04-27 02:33:39 发布

阅读量197

点赞数

分类专栏： Web开发

本文链接：https://blog.csdn.net/Coder_Boy_/article/details/81294363

版权

Web开发专栏收录该内容

108 篇文章 0 订阅

订阅专栏

jQuery选择器

案例演示

需要引用 jquery-1.11.1.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery选择器</title>
		<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			//页面加载后
			window.onload = function(){
				
				//1.基本选择器
				console.log($("#gd"));
				
				//2.层次选择器
				console.log($("#gd~"));//所以弟弟元素
				
				//3.过滤选择器
				//3.1 基本过滤(*)
				console.log($("li:last"));//最后一个 <li> 元素
				console.log($("li:odd"));//所有奇数 <li> 元素
				console.log($("li:eq(3)"));//列表中的第四个元素（index 从 0 开始）
				console.log($("li:not(li:eq(3))"));
				//3.2 内容过滤
				console.log($("li:contains('西')"));
				//3.3 可见性过滤
				console.log($("p:hidden"));
				//3.4 属性过滤
				console.log($("li[id!='gd']"));
				//3.5 状态过滤
				console.log($("input:disabled"));
				console.log($("input:checked"));
				//4.表单选择器
				//根据type属性选择对应的input
				console.log($(":password"));
				
			}
			
/* 			$('#id').siblings() 当前元素所有的兄弟节点
			$('#id').prev() 当前元素前一个兄弟节点
			$('#id').prevaAll() 当前元素之前所有的兄弟节点
			$('#id').next() 当前元素之后第一个兄弟节点
			$('#id').nextAll() 当前元素之后所有的兄弟节点 */
		
		</script>
	</head>
	<body>
		<ul>
			<li>山东省</li>
			<li>山西省</li>
			<li id="gd">广东省</li>
			<li>广西省</li>
			<li>台湾省</li>
			<li>河北省</li>
			<li>河南省</li>
		</ul>
		<p>苍老师</p>
		<p>王老师</p>
		<p>范老师</p>
		<p>李老师</p>
		<p style="display:none;">程老师</p>
		<p style="display:none;">梁老师</p>
		<!-- 
			任何表单控件都有2中状态：可以/不可以。
			所有控件默认为可以态，加disabled则不可用。
			readonly：只读，但框中数据可以提交给服务器。
			disabled：不可用，框中数据无法提交给服务器。
		
		 -->
		<div>
			账单：<input type="text">
		</div>
		<div>
			密码：<input type="password" disabled>
		</div>
		<div>
			<input type="checkbox" checked>篮球
			<input type="checkbox" checked>足球
			<input type="checkbox" >排球
		</div>
	</body>

</html>

最新页面显示效果：