js原生選擇器： 1、getElementById 用法:document.getElementById("Id");Id為要獲取的元素的id屬性值。 2、getElementsByName 用法:document.getElementsByName("Name");Name為要獲取元素的name屬性值,這個方法一般適用於提交表單數據,當元素為form、img、iframe、applet、embed、object的時候設置name屬性時,會自動在Document對象中創建以該name屬性值命名的屬性。 3、getElementsByTagName 用法:document.getElementsByTagName(TagName);TagName為要獲取元素的標簽名稱,當TagName為*的時候表示獲取所有的元素,document也可以換成DOM元素,但是這樣就只能獲取到該DOM元素后面的子集元素。 4、getElementsByClassName 用法：document.getElementsByClassName(ClassName);ClassName為要獲取元素的CSS類名稱,如果要同時獲取多個的話,在每個CSS類后面用空格隔開。 如document.getElementsByClassName("class1 class2")就會獲取到class1和class2樣式的元素,document也可以換成DOM元素,這樣也是只能獲取到該DOM元素后面的子集元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 id="h101">h1標題</h1> <img src="#" alt="這是圖片" name="img01"> <p>p標簽</p> 輸入框<input type="text" class="int01"/> </body> <script> var hid = document.getElementById("h101") var imgName = document.getElementsByName("img01") var p = document.getElementsByTagName("p") var intByClass = document.getElementsByClassName("int01") </script> </html>
jQuery九大選擇器： 1、基本選擇器 使用方式： 改變 id 為 one 的元素的背景色為 #0000FF 示例： $("#one").css("background","#0000FF"); 改變元素名為 <div> 的所有元素的背景色為 #00FFFF 示例： $("div").css("background","#00FFFF"); 改變 class 為 mini 的所有元素的背景色為 #FF0033 示例： $(".mini").css("background","#FF0033"); 改變所有元素的背景色為 #00FF33 示例：$("*").css("background","#00FF33"); 改變所有的<span>元素和 id 為 two 的元素的背景色為 #3399FF，注意，多個選擇器並列使用時中間用逗號隔開。 示例： $("span,#two").css("background","#3399FF"); 2、層次選擇器 使用方式： 改變 <body> 內所有 <div> 的背景色為 #0000FF 示例： //祖先元素和后代元素的關系 $("body div").css("background","#0000FF"); 改變 <body> 內子 <div> 的背景色為 #FF0033 示例：//父元素和子元素的關系 $("body>div").css("background","#FF0033"); 改變 id 為 one 的下一個 <div> 的背景色為 #0000FF 示例：$("#one+div").css("background","#0000FF"); 改變 id 為 two 的元素后面的所有兄弟<div>的元素的背景色為 #0000FF 示例：//獲取指定元素的后面所有兄弟元素 $("#two~div").css("background","#0000FF"); 改變 id 為 two 的元素所有 <div> 兄弟元素的背景色為 #0000FF 示例： //獲取指定元素的所有兄弟元素 $("#two").siblings("div").css("background","#0000FF"); 3、基礎過濾選擇器 使用方式： 改變第一個 div 元素的背景色為 #0000FF 示例：$("div:first").css("background","#0000FF"); 改變最后一個 div 元素的背景色為 #0000FF 示例：$("div:last").css("background","#0000FF"); 改變class不為 one 的所有 div 元素的背景色為 #0000FF 示例：$("div:not(.one)").css("background","#0000FF"); 改變索引值為偶數的 div 元素的背景色為 #0000FF 示例： $("div:even").css("background","#0000FF"); 改變索引值為奇數的 div 元素的背景色為 #0000FF 示例：$("div:odd").css("background","#0000FF"); 改變索引值為大於 3 的 div 元素的背景色為 #0000FF 示例：$("div:gt(3)").css("background","#0000FF"); 改變索引值為等於 3 的 div 元素的背景色為 #0000FF 示例： $("div:eq(3)").css("background","#0000FF"); 改變索引值為小於 3 的 div 元素的背景色為 #0000FF 示例：$("div:lt(3)").css("background","#0000FF"); 改變所有的標題元素的背景色為 #0000FF 示例： $(":header").css("background","#0000FF"); 改變當前正在執行動畫的所有元素的背景色為 #0000FF" 示例： function mover(){ $("#mover").slideToggle("slow",mover); } mover(); $("#b10").click(function(){ $(":animated").css("background","#0000FF"); }; 4、內容選擇器 使用方式： 改變含有文本 ‘di’ 的 div 元素的背景色為 #0000FF 示例：$("div:contains('di')").css("background","#0000FF"); 改變不包含子元素(或者文本元素) 的 div 空元素的背景色 示例：$("div:empty").css("background","#0000FF"); 改變含有 class 為 mini 元素的 div 元素的背景色為 #0000FF 示例：$("div:has(.mini)").css("background","#0000FF"); 改變含有子元素(或者文本元素)的div元素的背景色為 #0000FF 示例：$("div:parent").css("background","#0000FF"); 改變不含有文本 di 的 div 元素的背景色為 #0000FF 示例：$("div:not(:contains('di'))").css("background","#0000FF"); 5、可見度過濾選擇器 使用方式： 改變所有可見的div元素的背景色為 #0000FF 示例：$("div:visible").css("background","#0000FF"); 選取所有不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來, 並設置其背景色為 #0000FF 示例：$("div:hidden").show().css("background","#0000FF"); 選取所有的文本隱藏域, 並打印它們的值
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.9.1.js"></script> <style type="text/css"> .wrap { width: 500px; padding: 10px; margin: 20px auto; border: 1px solid #ccc; } .wrap div { width: 70px; height: 40px; background: #0083C1; margin: 5px; float: left } span { display: block; clear: left; color: #008000; } .startHidden { display: none; } .startVisibilityHidden { visibility: hidden; } </style> </head> <body> <div class="wrap"> <span></span> <div></div> <div style="display:none">Hider!</div> <div style="visibility:hidden">Hider!</div> <div class="startHidden">Hider!</div> <div class="startVisibilityHidden">Hider!</div> <div></div> <form> <input type="hidden" /> <input type="hidden" /> <input type="hidden" /> </form> <span></span> <button >顯示隱然元素</button> </div> </body> <!--<script>--> <!-- $(document).ready(function(){--> <!-- $("span:first").text("Found " + $(":hidden",document.body).length + " hidden elements total.");//在第一個span標簽中增加文本，顯示body中有多少個元素隱藏--> <!-- $("div:hidden").show("3000");//顯示所有隱藏的div元素--> <!-- $("span:last").text("Found " + $("input:hidden").length + " hidden inputs");//在最后一個span標簽中增加文本，顯示有多少input隱藏--> <!-- });--> <!--</script>--> <script type="text/javascript"> $(document).ready(function(){ $("div:visible").click(function(e){ //可見DIV元素綁定一個單擊事件 $(this).css("border","2px solid red"); //給可見的DIV元素增加一個2px的紅色邊框 e.stopPropagation();//停止事件冒泡 }); $("button").click(function(e){ //給button綁定一個單擊事件 $("div:hidden").show("fast").css("background","red");//隱然的元素顯示出來，並把背景變成紅色 e.stopPropagation();//停止事件冒泡 }); }); </script> </html>
6、屬性過濾器 使用方式： 含有屬性title 的div元素 $("div[title]").css("background","#0000FF"); 屬性title值等於test的div元素 $("div[title=test]").css("background","#0000FF"); 屬性title值不等於test的div元素(沒有屬性title的也將被選中) $("div[title!=test]").css("background","#0000FF"); 屬性title值 以te開始 的div元素 $("div[title^=te]").css("background","#0000FF"); 屬性title值 以est結束 的div元素 $("div[title$=est]").css("background","#0000FF"); 屬性title值 含有es的div元素 $("div[title*=es]").css("background","#0000FF"); 選取有屬性id的div元素，然后在結果中選取屬性title值含有“es”的 div 元素 //多個屬性過濾選擇器並列使用，就這樣並列放置就OK $("div[id][title*=es]").css("background","#0000FF"); 7、子元素過濾選擇器 每個class為one的div父元素下的第2個子元素 :nth-child()子元素過濾選擇器，使用時需在其前面增加空格 :nth-child()子元素過濾選擇器，其索引值是從"1"開始 $("div[class=one] :nth-child(2)").css("background","#0000FF"); 每個class為one的div父元素下的第一個子元素 $("div[class=one] :first-child").css("background","#0000FF"); 每個class為one的div父元素下的最后一個子元素 $("div[class=one] :last-child").css("background","#0000FF"); 如果class為one的div父元素下的僅僅只有一個子元素，那么選中這個子元素" $("div[class=one] :only-child").css("background","#0000FF"); 8、表單對象屬性過濾器 利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值 <input type="text" value="不可用值1" disabled="disabled"> <input type="text" value="可用值1" > <input type="text" value="不可用值2" disabled="disabled"> <input type="text" value="可用值2" > $("input[type=text]:enabled").val("xxx"); 利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值 $("input[type=text]:disabled").val("xxx"); 利用 jQuery 對象的 length 屬性獲取多選框選中的個數 <input type="checkbox" name="items" value="美容" >美容 <input type="checkbox" name="items" value="IT" >IT <input type="checkbox" name="items" value="金融" >金融 <input type="checkbox" name="items" value="管理" >管理 alert($("input[type=checkbox]:checked").length); 利用 jQuery 對象的 text() 方法獲取下拉框選中的內容" <select name="job" id="job" multiple="multiple" size=4> <option >程序員</option> <option>中級程序員</option> <option>高級程序員</option> <option>系統分析師</option> </select> <select name="edu" id="edu"> <option>本科</option> <option>博士</option> <option>碩士</option> <option>大專</option> </select> $("select option:selected").each(function(index,domEle){ alert($(domEle).text()); }; 9、表單選擇器 $(":image")匹配所有的圖像域 $(":reset")匹配所有重置按鈕 $(":button")匹配所有按鈕 $(":file")匹配所有文件域 $("input:hidden")匹配所有不可見元素，或type為hidden的元素，這個選擇器不限於表單標簽，那些style為hidden的元素也會被匹配。 $("input:enabled")匹配所有可用的input元素，即不帶屬性disabled="disabled" $("input:disabled")和上面相反 $("input:checked")匹配所有選擇的元素（包括，復選框，單選框，但不包括select的option） $("select option:selected")匹配所有選擇的option元素。