<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基本选择器.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../jquery-1.7.1.js"></script>
</head>
<style type="text/css">
div,span,p{
width: 170px;
height:170px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-family: cursive;
font-size: 17px;
}
div.mini{
width: 60px;
height:60px;
background-color:#aaa;
font-size: 12px;
}
div.hide{
display: none;
}
</style>
此处是css样式
<body>
<div class ="one" id = "one">
id 为one ,class为one 的div
<div class = "mini">class为mini</div>
</div>
<div class = "one" id = "two" title="test">
id 为one ,class为one 的div
<div class = "mini" title="other">class为mini,title为other</div>
<div class = "mini" title="test">class为mini,title为test</div>
</div>
<div class = "one">
<div class = "mini"> class为mini</div>
<div class = "mini"> class为mini</div>
<div class = "mini"> class为mini</div>
<div class = "mini">
</div>
</div>
<div style="display: none;" class="none">
style的dispaly为none, class为none
</div>
<div class = "hide">class为hide</div>
<div>
包含input的type为“hidden”的div
<input type = "hidden" size = "8" >
</div>
<span id = "move" > 正在执行动画的span元素</span>
</body>
<script type="text/javascript">
/* $(function(){ //后代元素
$('div div').css("background","dodgerblue");
//$(ancestor descendant) 选取ancestor(祖先)元素
// 里的所有 dodgerblue(孙子) 返回集合
// 看好 中间有空格 $('div div') 意思是 选取大div中的所有小div
$('body div').css("background","#fff"); //选取 body中的所有div 并改变颜色
});
*/
/* $(function(){ //子元素
$('body > div').css("background","dodgerblue");
//$(parent > chard) 选取parent 元素下的所有 子元素 返回集合 $(ancestor descendant)选择的是后代元素
//选取 body下面所有 div 的 元素
});*/
/* $(function(){ //相邻元素
$('.one + div').css("background","dodgerblue");
//$(prev + next) 选取紧接着 prev 元素 后的next 元素 返回集合
//选取类 one 下面的一个 元素体 并且 包含自己
});*/
$(function(){ //兄弟 元素
$('#two ~ div').css("background","dodgerblue");
//$(prev ~ siblings) 选取紧接着 prev 元素 后的所有 兄弟（siblings）元素 返回集合
//改变ID two 后面所有 div元素
});
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
