新增的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
新增的querySelector、querySelectorAll测试的更多相关文章
- HTML5中DOM元素的querySelector/querySelectorAll的工作机制
在HTML5中,提供了强大的DOM元素选择API querySelector/querySelectorAll,允许使用JavaScript代码来完成类似CSS选择器的DOM元素选择功能.通常情况下, ...
- javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
- 两款JSON类库Jackson与JSON-lib的性能对比(新增第三款测试)
本篇文章主要介绍了"两款JSON类库Jackson与JSON-lib的性能对比(新增第三款测试)",主要涉及到两款JSON类库Jackson与JSON-lib的性能对比(新增第三款 ...
- html5 新选择器 querySelector querySelectorAll
querySelector 返回满足条件的单个元素 使用实例 HTML <div id="main">主体布局</div> JS var main =doc ...
- Fundebug前端JavaScript插件更新至1.6.0,新增test()方法用于测试
摘要: 1.6.0新增fundebug.test()方法用于测试,请大家及时更新. 默认情况下,Fundebug 插件能够自动捕获未处理的错误(uncaught error).另外,开发者也可以通过使 ...
- CSS选择器比较:queryselector queryselectorall
官网解释: querySelector() and querySelectorAll() are two JavaScript functions very useful when working w ...
- querySelector/querySelectorAll
querySelector获取页面I属性D为test的元素: document.getElementById("test"); //or document.querySelecto ...
- (getElementBy**)与 querySelector(querySelectorAll) 的区别
1. 通过类似于 document.getElementByTagName('div') 这种方式获取到的类数组,无法通过 forEach 进行遍历(可以通过for循环):而通过document.qu ...
- 重要选择器querySelector和querySelectorAll
他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...
随机推荐
- ASP lable标签显示过长,自动换行。
<asp:Label ID="lab_BeforPostR" runat="server" CssClass="labSty" Wid ...
- Initialize the Storage Emulator by Using the Command-Line Tool
http://msdn.microsoft.com/en-us/library/azure/gg433132.aspx To initialize the storage emulator Click ...
- Android xml 格式 随笔
打包的时候Android xml文件会由字符格式(utf-8编码)转换为二进制格式.具体如:http://blog.csdn.net/jiangwei0910410003/article/detail ...
- 第 3 章 MySQL 存储引擎简介
第 3 章 MySQL 存储引擎简介 前言 3.1 MySQL 存储引擎概述 MyISAM 存储引擎是 MySQL 默认的存储引擎,也是目前 MySQL 使用最为广泛的存储引擎之一.他的前身就是我们在 ...
- oracle 中触发器增加存储过程commit问题
触发器无需commit也不能写commit触发器和触发它的DML是同一个事务DML提交了,触发器的操作也提交了,要不就一起回滚了 当然,如果你一定要在触发器里写COMMIT那就用自治事务相当于一个事务 ...
- floor相关
select floor(@f*0.22) -- 直接可显示结果 create table demo( id ,), id1 int ) select * from demo insert into ...
- [AX 2012] Woker user request
在HR模块和System administrator模块下都能找到Woker user request这个功能,它的作用是为员工创建一个AX账号.比如我们创建一个这样的user request: 注意 ...
- android自定义viewgroup实现等分格子布局
先上效果图: 实现这样的效果: 一般的思路就是,直接写布局文件,用LinearLayout 嵌套多层子LinearLayout,然后根据权重layout_weight可以达到上面的效果 还有就是利用g ...
- struts1的ActionForm的作用域(生命周期)
转自:http://biancheng.dnbcw.info/java/240347.html 今天查找一个问题:我在列表页面添加一个查询条件,然后查询符合条件的数据.查询结果正确.然后我进入其它菜单 ...
- 安卓开发笔记——自定义广告轮播Banner(实现无限循环)
关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...