jquery学习笔记2-1：jquery基本选择器

最新推荐文章于 2017-06-30 01:12:00 发布

原创最新推荐文章于 2017-06-30 01:12:00 发布 · 734 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用jQuery基本选择器的示例，演示了如何通过ID、类名及元素名称来选择并显示HTML页面中的特定元素。示例中包含了不同类型的元素，并使用jQuery进行操作以展示它们。

<html>
  <head>
    <title>2-1 jquery基本选择器</title>
    
    <!-- 根据获取的页面 中元素的不同，可以将jquery选择器分为：基本选择器，层次选择器，过滤选择器（简单过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单对象属性），表单选择器四类 -->
    <!-- 使用jquery基本选择器 -->
    <!-- 功能描述 -->
    <!-- 一个页面包含两个div 一个用于设置Id属性，一个用于设置class属性，在增加一个span标记，全部元素初始值设置为隐藏，通过jquery选择器显示相应标记-->
	<script language="javascript" type="text/javascript" src="../javaScriptSrc/jquery-1.9.1.min.js"></script>
	
	<style type="text/css">
		body{font-size:12px;text-align:center}
		.class0{width:300px;height:100px}
		.class0 div,span{display:none;float:left;
				width:65px;height:65px;border:solid 2px #222;
				margin:8px}
		.class1{background-color:#eee}
	</style>
	
	<script type="text/javascript">
	/*$(function(){//id匹配元素
		$("#Id1").css("display","block");
	});
	$(function(){//元素名匹配元素
		$("div span").css("display","block");
	});
	$(function(){//类匹配元素
		$(".class0 .class1").css("display","block");
	});
	$(function(){//匹配所有元素
		$("*").css("display","block");
	});*/
	$(function(){//合并匹配所有元素
		$("#Id1,span").css("display","block");
	});
	</script>
	
  </head>
  
  <body>
    <div class="class0">
   		<div id="Id1">ID</div>
   		<div class="class1">CLASS</div>
  		<span>span</span>
  </div>
 </body>
</html>