jQuery系列02---jQuery基本选择器与层次选择器-CSDN博客

本文链接：https://blog.csdn.net/daijope/article/details/7016592

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>