使用HTML5的JavaScript选择器操作页面中的元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用HTML5的JavaScript选择器操作页面中的元素</title>
</head>
<body>
<div>
<!--信息输入标签-->
<h2>兴趣和爱好:<label></label></h2>
<!--复选框列表-->
<input type="checkbox" id="c1"><label for="c1">篮球</label>
<input type="checkbox" id="c2"><label for="c2">唱歌</label>
<input type="checkbox" id="c3"><label for="c3">游泳</label>
<input type="checkbox" id="c4"><label for="c4">桌球</label>
<br><br>
<button>获取兴趣爱好</button>
</div>
<script type="text/javascript">
//监听获取按钮的点击事件(元素选择器)
document.querySelector('button').addEventListener('click',function(e){
//按钮默认事件
e.preventDefault();
//获取所有选中的复选框(伪类选择器)
var checked=document.querySelectorAll('input:checked'),
results=[];//结果数组
//将元素列表转化为数组
checked=Array.prototype.slice.call(checked);
//循环数组,获取选中的值
checked.forEach(function(item){
var id=item.getAttribute('id'),//获取复选框id
//(属性选择器)
label=document.querySelector('label[for="'+id+'"]');//根据id获取对应label元素
results.push(label.innerHTML);//将数值推入数组
});
//(子元素选择器)
document.querySelector('h2>label').innerHTML=results.join(',');//设置显示标签内容
});
</script>
</body>
</html>
使用HTML5的JavaScript选择器操作页面中的元素的更多相关文章
- 使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...
- jQuery基础学习5——JavaScript方法获取页面中的元素
给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- javascript 获取父页面中元素对象方法
父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...
- 控制使用jquery load()方法载入新页面中的元素
最近在项目中用到jquery的load()方法来加载页面,首先简单说一下load()方法. load(url,data,callback);该方法接收三个参数,第一个是载入的页面地址,第二个是要传到服 ...
- javaScript获取文档中所有元素节点的个数
HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 使用jquery操作iframe中的元素
使用jquery操作iframe中的元素<iframe src="/test/demo.htm" width="99%" height="300 ...
- JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- 在浏览器中使用jquery取得iframe中页面中指定元素的值的不同
自己使用aspx页面中嵌套了ascx的页面其中使用了iframe的一些内容,出现了同一个页面的两种取值的方式 1. 在iframe的包含页面,需要使用iframe的页面中的元素,是需要使用$(wind ...
- HTML5的JavaScript选择器介绍
在HTML5出现之前使用JavaScript查找DOM元素,有以下三种原生的方法: getElementById:根据指定元素的id属性返回元素 getElementsByName:返回所有指定nam ...
随机推荐
- 快速玩转linux(4)
websever安装配置 Nginx & Apache 并发量. Apache基本操作 解释 命令 安装 yum install httpd 启动 service httpd start 停止 ...
- yum仓库客户端搭建和NTP时间同步客户端配置
一.yum仓库客户端搭建 yum源仓库搭建分为服务器端和客户端. 服务端主要提供软件(rpm包)和yumlist.也就是提供yum源的位置.一般是通过http或者ftp提供位置. 客户端的配置:yum ...
- Linux中查看已安装内存与交换空间使用情况
目录 1. free查看内存使用量 2. 查看 /proc/meminfo 文件获取物理内存信息 3. top命令获取内存用量 1. free查看内存用量命令 该命令是专门用于查看内存用量 ...
- 前端pc版的简单适配
我们都知道对于前端pc版本的适配是一个难题,大部分都是做的媒体查询.但是有时间公司不要媒体查询 就是需要不管多大的屏幕都是满屏显示.我就在考虑为啥不用rem给pc端做个适配. 我是基于设计图是1920 ...
- Django模板语言(DTL)基础
## 模板变量 - 普通变量 {{ name }} - 对象变量(使用点号访问对象属性和方法,方法不加括号) {{ person.name }} ## 常用模板标签 # if标签,支持and,or,n ...
- 一个好用的C# HttpHelper类
/// <summary> /// 类说明:HttpHelper类,用来实现Http访问,Post或者Get方式的,直接访问,带Cookie的,带证书的等方式,可以设置代理 /// 重要提 ...
- 微信小程序缓存
购物车数据加入缓存,相同的商品值修改数量,然后再次加入缓存中 修改购物车的数据的时候同理,都是修改缓存数据然后加入到缓存中. 具体的使用方法看官方文档,我只是提供思路
- scala成长之路(2)对象和类
scala提供了一种特殊的定义单例的方法:object关键字 scala> object Shabi{ | val age = 0 | val name = "shabi" ...
- hive自定义函数(UDF)
首先什么是UDF,UDF的全称为user-defined function,用户定义函数,为什么有它的存在呢?有的时候 你要写的查询无法轻松地使用Hive提供的内置函数来表示,通过写UDF,Hive就 ...
- 关于实现mybatis order by 排序传递参数实现 问题记录
一 问题场景:本人项目纯纯的后端系统 并且项目前端采用纯纯的原生js 实现 1)表格 通过查询列表数据放入到域中 前段采用 for循环的方式实现遍历生成列表 2)分页实现本人是公司内部自定 ...