<!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选择器学习总结
最新推荐文章于 2023-02-08 18:43:48 发布