你的位置:首页 > Java教程

[Java教程]新增的querySelector、querySelectorAll测试


从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