從IE9開始DOM開始支持支持CSS的選擇器了，DOM提供了兩個介面 querySelector 得到一個DOM querySelectorAll 得到一組DOM 一個個的解釋這些選擇器也沒有必要，我們結合前面的數組知識，寫一段代碼來說明。頁面上有一組元素，然後會依據我們數組中的預訂選擇值選擇相應元 ...
從IE9開始DOM開始支持支持CSS的選擇器了，DOM提供了兩個介面
querySelector 得到一個DOM
querySelectorAll 得到一組DOM
一個個的解釋這些選擇器也沒有必要，我們結合前面的數組知識，寫一段代碼來說明。頁面上有一組元素，然後會依據我們數組中的預訂選擇值選擇相應元素，並將背景變紅色，同時提示選擇器的含義。這樣的代碼便於運行理解和擴展。
html的結構部分
<body> <div> <input type="button" value="開始測試" /> <span></span><span></span> </div> <ol> <li title="abc1"> <h2 title="abc"> Hello</h2> </li> <li title="abc2"> <input type="checkbox" checked="checked" /> <input type="checkbox" /> <input type="checkbox" /> </li> <li title="abc3"></li> <li title="abc4"> <ul> <li title="41abc"> <input type="text" readonly="true" /> <input type="text" /> </li> <li title="42abc"> <input type="button" value="disabled" disabled="disabled" /> </li> <li title="43abc4"></li> <li title="44abc4"> <input type="radio" checked="checked" /> <input type="radio" /> <input type="radio" checked="checked" /> </li> </ul> </li> <li title="abc5"></li> <li title="abc6"></li> <li title="abc7"></li> <li title="abc8"><a href="#">go</a></li> <li title="abc9"></li> </ol> <p> text</p> <a href="http://hovertree.com/">何問起</a> </body>
添加一個簡單的樣式
<style> .box { background-color: Red; } </style> <!-- hovertree.com -->
加一個jQuery的腳本
<script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>
然後就是我們的測試代碼了
<script type="text/javascript"> var tip = ["指定元素名稱", "屬性中包含", "屬性開始", "屬性結束", "屬性等於", "html部分", "元素內容為空白", "錨", "子元素", "兄弟元素", "第一個", "最後一個元素", "第2個", "倒數第2個", "奇數", "偶數", "類型一致的奇數", "類型一致的偶數", "從第3個算起， 每隔2個（包含第2個）", "只有一個子元素", "可用狀態", "不可用狀態", "只讀", "非只讀", "選取狀", "非選取狀態", "一半狀態", "不包含" ]; var selectors = ["ol", "[title*=abc]", "[title^=abc]", "[title$=abc]", "[title=abc]", ":root", ":empty", ":target", "ol li", "ol~p", "ol li:first-child", "ol li:last-child", "ol li:nth-child(2)", "ol li:nth-last-child(2)", "ol li:nth-child(odd)", "ol li:nth-child(even)", "ol li:nth-of-type(odd)", "ol li:nth-of-type(even)", "li:nth-child(2n+3)", "ol li:only-child", ":enabled", ":disabled", ":read-only", ":read-write", ":default", ":checked", ":indeterminate", "ol li:not(:first-child)" ]; $( function() { $(":button").click( function() { selectors.forEach( function(item, index) { //把上次有box樣式的元素清空下 Array.prototype.slice.call(document.querySelectorAll(".box")).forEach( function(e, i) { e.className = ""; } ); //本次匹配的元素加入樣式 hovertree.com Array.prototype.slice.call(document.querySelectorAll(item)).forEach( function(e, i) { e.className = "box"; } ); $("span:eq(0)").html(item); $("span:eq(1)").html(tip[index]); alert("next"); } ); } ); } ); </script>
我們準備了兩個數組，一個存放選擇器，一個存放選擇器的說明。對selectors數組多forEach便利，根據選擇器對元素進行添加樣式，以可以看到樣式結果。
需要說明下的是
document.querySelectorAll(".box")得到的不是數組，是nodelist，雖然可以類似數組的for，但真的不是數組，不能直接對其使用數組的方法forEach，如果我們需要轉換為數組，我們可以用Array.prototype.slice.call來輔助就可以了。
更多特效：http://www.cnblogs.com/roucheng/p/texiao.html
