<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>