css选择器与jQuery选择器总结(部分)
标签选择器
E{css 规则} 以文档元素作为选择器 td{font-size:14px; width:120px;}
ID选择器
#ID{css 规则} 以文档元素的为一标示符号Id这位选择符 #note{font-size:14px; width:120px;}
类选择器(用的很多)
E.className {css 规则} 以文档元素的class 作为选择符 div.note {font-size:14px;}.dream{font-size:14px;}
群组选择器
E1,E2,E3{css 规则} 多个选择符应用同样的样式规则 td,p,div.a {font-size:14px;}
后代选择器
E F {css 规则} 元素E的任意后代元素F #links a{color:red;}
通配选择器
*{css 规则} 以文档的所有元素作为选择符 #{font-size:14px;}
选择器的目的就是查找页面中的元素
----------------------------------我是分隔线------------------------------------------------------
jQuery选择器
$(#id) == document.getElementById()
分类:
-基本选择器(basic)
1) #id 根据给定的id匹配一个元素 单个元素 $(#id)
2) .class 根据给定的类名匹配元素 集合 $(".text")
3) element 给定给定的元素名匹配元素 集合元素 $("p")
4) * 所有的 集合元素 $("*")
5) selector1, selector2 将每一个选择器匹配到的元素合并后一起返回 集合元素 $("div,span,p.myClass")
-层次选择器(level)
$("ancestor descendant") 选取andestor元素里所有的descendant(后代)元素 集合元素 $("div span")选取<div>里的所有<span>元素
$("parent > child") 选取parent下面的子元素,不是所有的后代。 集合元素 $("div > span")选取<div>元素下元素名是<span>的子元素
$("prev + next") 选取紧接在prev元素的next元素 集合元素 $(".test + div")选取class为one的下一个<div>元素
$("prev ~ siblings") 选取prev元素之后的所有的siblings元素 集合元素 $("#two~div")选取id为two的后面所有<div>兄弟元素
-过滤选择器(filter)
-表单选择器(form)
例子:
style.css
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
基本选择器练习:
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.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">
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
$(document).ready(function() {
$("#button1").click(function() {
$("#one").css("background", "red");
});
$("#button2").click(function() {
$(".mini").css("background", "blue");
});
$("#button3").click(function() {
$("div").css("background", "green");
});
$("#button4").click(function() {
$("*").css("background", "yellow");
});
$("#button5").click(function() {
$("span, #two, .mini").css("background", "pink");
});
});
</script>
</head>
<body>
<h3>基本选择其<h3>
<input type="button" value="test1" id="button1">
<input type="button" value="test2" id="button2">
<input type="button" value="test3" id="button3">
<input type="button" value="test4" id="button4">
<input type="button" value="test5" id="button5">
<div class = "one" id = "one" >
id为one,class为one的div
<div class="mini">class 为mini</div>
</div>
<div class="one" id="two" title="text">
id为two,class为one, title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,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 class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="text">class为mini,title为text</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div> 包含input的type为"hidden"的div<input type="hidden" size="8"/></div>
</body>
</html>
层次选择器:
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.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">
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
$(document).ready(function() {
$("#button1").click(function() {
$("body div").css("background", "red");
});
$("#button2").click(function() {
$('body > div').css("background", "red");
});
$("#button3").click(function() {
$(".one + div").css("background", "green");
});
$("#button4").click(function() {
$('.two ~ div').css("background", "orange");
});
});
</script>
</head>
<body class="body">
<h3>基本选择其<h3>
<input type="button" value="test1" id="button1">
<input type="button" value="test2" id="button2">
<input type="button" value="test3" id="button3">
<input type="button" value="test4" id="button4">
<input type="button" value="test5" id="button5">
<div class = "one" id = "one" >
id为one,class为one的div
<div class="mini">class 为mini</div>
</div>
<div class="one" id="two" title="text">
id为two,class为one, title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,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 class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="text">class为mini,title为text</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div> 包含input的type为"hidden"的div<input type="hidden" size="8"/></div>
</body>
</html>