css选择器学习总结

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
	<title>css选择器</title>
	<style>
		div{
			width: 200px;
			height: 200px;
		}
		.class1{
			background-color: red
		}
		.class2{
			background-color: yellow
		}
		.class3{
			background-color: green
		}
		.class4{
			background-color: blue
		}

	</style>
</head>
<body>
	<span>注意：因为selected = $("div:nth-last-child(8)")类似的语句执行过后符合的元素就已经选出来了，<br/>所以在html文档未加载完就去索引，是有可能出现得不到结果，或得到的结果有偏差的情况的（按倒叙索引，尤其可能出现这种问题）。</span>
	<!-- div#id$.class${div$}*3 -->
	<div id="id1" class="class1">div1</div>
	<div id="id2" class="class2">div2</div>
	<div id="id3" class="class3">div3</div>
	<!-- div#id4.class4{div4}>span{div内的span} -->
	<div >div4<span>div内的span</span></div>
	<!-- span.span$[attr1=val$]#id$@5{span$@1}*4 内容项写在最后，除内容外的变量按起始值从小到大排列元素位置-->
	<span class="span1" attr1="val1" id="id5">span1</span>
	<span class="span2" attr1="val2" id="id6">span2</span>
	<span class="span3" attr1="val3" id="id7">span3</span>
	<span class="span4" attr1="val4" id="id8">span4</span>
	
	<div id="aaa"></div>


	<script type="text/javascript">
		$(function(){
			var selected;
			// *
			selected = $("*")	//选择所有元素
			selected = $(".class1")	//选择类为class1的元素
			selected = $("#id1")	//选择ID为id1的元素
			selected = $("span")	//选择标签为span的元素
			selected = $(":not(span)")	//:not(selector)的使用，选择标签不是span的元素
			// **
			selected = $("div.class1")	//选择div标签下类为class1的元素
			selected = $("div span")	//选择div标签内的span标签后代
			selected = $("div>span")	//选择div标签内的span标签子代
			selected = $("div~div")		//选择div标签的标签为div的弟弟们
			selected = $("div+span")	//选择div标签的第一个标签为span的弟弟
			// ***
			selected = $("[attr1]")		//选择带有属性attr1的元素
			selected = $("[attr1=val1]")	//选择属性attr1值为val1的元素
			selected = $("[attr1$=l1]")		//选择属性attr1值以l1结尾的元素
			selected = $("[attr1^=val]")	//选择属性attr1值以val开头的元素
			selected = $("[attr1*=al]")		//选择属性attr1值包含al的元素
			// ****
			selected = $("div:first-child")	//选择div,该div是父级节点的第一个子节点
			selected = $("div:first-of-type")	//选择div，该div是父级节点同类型（div）的第一个子节点
			selected = $("div:nth-child(2)")		//选择div，该div是父级节点的第二个元素
			selected = $("div:nth-of-type(2)")		//选择div，该div是父级节点中第二个div元素

			selected = $("span:last-child")		//选择div,该div是父级节点的最后一个子节点
			selected = $("span:last-of-type")	//选择span，该span是父级节点同类型（span）的最后一个
			selected = $("div:nth-last-child(8)")		//选择span，该span是父级节点的倒数第八个元素。
			selected = $("span:nth-last-of-type(1)")	//选择span，该span是父级节点span元素中的最后一个

			selected = $("span:only-of-type")		//选择span，同级中span類型的只有一個
			selected = $("span:only-child")			//选择span，同级中只有一个span标签
			selected = $("div:empty")				//选择所有没有子节点的元素
			// *****
			selected = $("div.class1")		//选择类包含class1的div
			selected = $("div.class1.class2")	//选择类包含class1、class2的div
			selected = $("div :not(span:empty)")	//各种选择器的组合使用
		
			console.log(selected.size())
			// for(i in a)遍历的次数可能大于a.size()
			// for(i in selected){
			for(var i=0;i<selected.size();i++){
				console.log("--------------"+i+"---START--------------")
				console.log("节点名称："+selected[i].nodeName)
				console.log("文本内容：\n")
				console.log(selected[i].textContent)
				console.log("--------------"+i+"---END--------------")
			}
			// console.log($(".class1").val())
		})
	</script>
</body>
</html>
css选择器学习总结

猜你喜欢
