使用HTML5的JS选择器操作页面中的元素
文件命名为：querySelector.html，可在Chrome浏览器中预览效果。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>使用HTML5的JS选择器操作页面中的元素</title>
6 </head>
7 <body>
8 <div>
9 <!--信息输入标签-->
10 <h2>兴趣爱好：<label></label></h2>
11 <!--复选框列表-->
12 <input type="checkbox" id="c1"><label for="c1">篮球</label>
13 <input type="checkbox" id="c2"><label for="c2">唱歌</label>
14 <input type="checkbox" id="c3"><label for="c3">游泳</label>
15 <input type="checkbox" id="c4"><label for="c4">桌球</label>
16 <br><br>
17 <button>获取兴趣爱好</button>
18 </div>
19
20 <script>
21 //监听获取按钮的点击事件
22 document.querySelector('button').addEventListener('click',function(e){
23 //按钮默认事件
24 e.preventDefault();
25 //获取所有选中的复选框
26 var checked = document.querySelectorAll('input:checked'),
27 results = [];//结果数组
28 //将元素列表转化为数组
29 checked = Array.prototype.slice.call(checked);
30 //循环数组，获取选中的值
31 checked.forEach(function(item){
32 var id = item.getAttribute('id'), //获取复选框id
33 label = document.querySelector('label[for="'+ id +'"]'); //根据id获取对应label元素
34 results.push(label.innerHTML); //将数值推入数组
35 });
36 document.querySelector('h2 > label').innerHTML = results.join(',');//设置显示标签内容
37 });
38 </script>
39 </body>
40 </html>
示例中，第22、26、33、36行分别使用了元素选择器、伪类选择器、属性选择器和子元素选择器。
使用HTML5的JS选择器操作页面中的元素的更多相关文章
- 使用HTML5的JavaScript选择器操作页面中的元素
<!doctype html><html lang="en"> <head> <meta charset="UTF-8& ...
- js Dom为页面中的元素绑定键盘或鼠标事件
html鼠标事件 onload 页面加载 onclick 鼠标单击 onmouseover 鼠标移入 onmouseout 鼠标移出 onfocus 获取焦点 onblur 失去焦点 onchange ...
- JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- 如何使用Web3.js API 在页面中进行转账
本文介绍如何使用Web3.js API 在页面中进行转账,是我翻译的文档Web3.js 0.2x 中文版 及 区块链全栈-以太坊DAPP开发实战 中Demo的文章说明. 写在前面 阅读本文前,你应该对 ...
- 控制使用jquery load()方法载入新页面中的元素
最近在项目中用到jquery的load()方法来加载页面,首先简单说一下load()方法. load(url,data,callback);该方法接收三个参数,第一个是载入的页面地址,第二个是要传到服 ...
- Js脚本选取iframe中的元素
遇到个小问题,需要用到原生Js处理页面中的元素,以往一个document.getElementById就完活的选取元素,这次却不好使了.. 仔细看代码发现要选取元素外面多了一个iframe标签 < ...
- 使用jquery操作iframe中的元素
使用jquery操作iframe中的元素<iframe src="/test/demo.htm" width="99%" height="300 ...
- Js/Jquery获取iframe中的元素
转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...
- 在浏览器中使用jquery取得iframe中页面中指定元素的值的不同
自己使用aspx页面中嵌套了ascx的页面其中使用了iframe的一些内容,出现了同一个页面的两种取值的方式 1. 在iframe的包含页面,需要使用iframe的页面中的元素,是需要使用$(wind ...
随机推荐
- libevent 定时器timer
libevent是一个基于事件触发的网络库,memcached底层也是使用libevent库. 总体来说,libevent有下面一些特点和优势:* 事件驱动,高性能:* 轻量级,专注于网络: * 跨平 ...
- org.opencv.android.JavaCameraView 摄像机方向的问题
——> org.opencv.android.JavaCameraView 摄像机方向的问题 ref: http://www.tuicool.com/articles/q6vUvqB 注意:一般 ...
- zabbix接口调用注意事项--Python
不知道该怎么写,但是明显得写点什么,担心时间长了,忘记,再回顾时又要重新摸索一遍 一.Request:post params: 1. 第一层的参数处理: 第一层的参数设置为变量 2. 其他层参数格式不 ...
- BZOJ 1415 聪聪和可可（概率DP）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1415 题意:一个无向图,一个猫.一只老鼠.在任意时刻猫知道老鼠在哪个顶点上.每次移动猫先 ...
- Unit Test with VS.NET
Unit Test with VS.NET 2014-10-30 定义单元测试框架Visual Studio 2008提供的单元测试框架参考 定义[1] 返回 传统的单元测试:是一段代码(通常一个方法 ...
- 视觉（3）blepo
视觉(3)blepo 把matlab转成c程序有好办法了,从网上下载了一个函数库blepo,转换为c几乎是一行对一行,openCv经常涉及到的内存申请和释放这里都不用管.高兴!看看这段程序比较一下差别 ...
- 转:ORACLE的JDBC连接方式:OCI和THIN
oracle的jdbc连接方式:oci和thin oci和thin是Oracle提供的两套Java访问Oracle数据库方式. thin是一种瘦客户端的连接方式,即采用这种连接方式不需要安装oracl ...
- 在blade中定义一个可以被模版使用的变量
laravel的blade中的数据一般由控制器传入,但是有没有什么办法临时在blade模版中创建并且被blade所使用吗? 答案是肯定的,不过语法稍微复杂一点 {{-- */$variableAvai ...
- PHP开发调优clockwork工具
clockwork对于曾经做过C,c++代码调优的工程师并不会陌生,它可以指出代码中的潜在问题,比如内存泄漏,数组越界等.他也可以做profiler动作,指出系统各个函数的执行时间,性能瓶颈到底在哪里 ...
- laravel下的团队开发
当你的团队在开发一个大型应用时,该应用的不同部分可能以不同的速度前进.比如,设想下面的场景:一个开发热源被分配 数据层 的backend工作,而另外一个开发人员做front-end和web/contr ...