小結選擇器--CSS、JavaScript、JQuery
選擇器的重要性,這裡就不說了,因為自己總是對於CSS,JS,JQuery中的選擇器的理解不是很系統,所以這裡做一下小結。
一、CSS的選擇器種類:①ID,②類別③標記
重要的區別一點就是ID選擇器只匹配一個元素,而類選擇器要匹配所有元素。
ID:
類別:
標記:
二、JAvaScript的選擇器:
1、getElementById
這是最常用的選擇器,通過id來定位: 例:
var test=document.getElementById("test").value;//獲取文件中id為test的元素的值,並賦值給test變臉
2、getElementsByName
例: var test=document.getElementByName("test");//獲取文件中name為test的元素的節點,並賦值給test變數,此時test變數是一個數組
3、getElementsByTagName
document.getElementById()方法返回單個DOM元素,而document.getElementsByTagName()方法則返回DOM元素集合。
例: var test=document.getElementsByTagName("test");//獲取文件中class為test的元素的節點,並賦值給test,此時test變數是一個數組 ,這個選擇器在IE5,6,7,8中無法使用
4、getElementsByClassName
這個選擇器在js的API中是找不到的,想要使用必須自己定義方法,通常的原理為先使用getElementsByTagName("*")取出文件中所有元素,然後進行遍歷,使用正則表示式找出匹配的元素放入一個數組返回。
三、JQuery的選擇器:
基本選擇器是最常用的通過id,Class和標籤名來進行查詢
1).“$(“#id”)”,獲取id指定的元素,id是全域性唯一的,所以它只有一個成員。
2).“$(“.class”)”,獲取class指定的元素,不同的元素可以具有相同的class屬性,所以它可能具有多個成員。
3).“$(“element”)”,獲取element(元素名,比如div、table等)指定的元素,它可能具有多個成員。
4).“$(“*”)”,獲取所有元素,相當於document。
5).“$(“selector1,selector2,…,selectorN”)”,將每個選擇器匹配到的元素合併後一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合。
當然JQuery還有一些別的選擇器,這裡就不講解了。<body> <div id="test" class="test">test1</div> <span style="white-space:pre"> </span><div id="test" class="test">test2</div> </body> <script> $(function(){ alert($(".test").size()); alert($("#test").size()); 這是ID的選擇器 alert($("div").hide()); 元素選擇器 $("body *").css("color", "red"); 網頁顯示的效果中test1和test2字型為紅色 }); </script>
這裡只是,讓大家在體系結構上明白一下,清楚一點,如果想具體的使用,還是講義查詢相關的API。