<!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選擇器學習總結
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.