使用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 ...
随机推荐
- jQuery 打气球小游戏 点击气球爆炸效果
最近在学习前端,看到偶尔看到前端小游戏,就想自己写一个小游戏,奈何水平有限,只能写打气球这种简单的,所有的气球都是动态生成的,气球的颜色也是随机的 html部分 <div class=" ...
- scrapy框架爬取笔趣阁
笔趣阁是很好爬的网站了,这里简单爬取了全部小说链接和每本的全部章节链接,还想爬取章节内容在biquge.py里在加一个爬取循环,在pipelines.py添加保存函数即可 1 创建一个scrapy项目 ...
- 爬虫之requests模块基础
一.request模块介绍 1. 什么是request模块 - python中原生的基于网络请求的模块,模拟浏览器发起请求. 2. 为什么使用request模块 - urllib需要手动处理url编码 ...
- CopyArrays
import java.util.Arrays; public class CopyArrays { public static void main(String args[]) { int []a ...
- stm32+lwip(三):TCP测试
我是卓波,很高兴你来看我的博客. 系列文章: stm32+lwip(一):使用STM32CubeMX生成项目 stm32+lwip(二):UDP测试 stm32+lwip(三):TCP测试 stm32 ...
- Educational Codeforces Round 47 (Rated for Div. 2) ：C. Annoying Present（等差求和）
题目链接:http://codeforces.com/contest/1009/problem/C 解题心得: 题意就是一个初始全为0长度为n的数列,m此操作,每次给你两个数x.d,你需要在数列中选一 ...
- php curl 登陆百度贴吧（经历记录）
这两天,因为公司需要,所以研究了一下百度文库的登陆方案.因为账号是购买的,只有一部分cookie值,所以不能通过正常的渠道登陆,所以只有通过curl模拟直接进行后台登陆.那么,问题来了.按照人家说的, ...
- js倒计时页面跳转
HTML: <p><span id="timer">60</span>s 后跳转到百度首页</p> JS: //倒计时方法 func ...
- 13 ThreadLocal
ThreadLocal 在多线程环境下,每个线程都有自己的数据.一个线程使用自己的局部变量比使用全局变量好,因为局部变量只有线程自己能看见,不会影响其他线程,而全局变量的修改必须加锁. 1. 使用函数 ...
- LeetCode：7. Reverse Integer（Easy）
题目要求:将给出的整数进行逆序输出 注意:整数的最大范围-2147483648-2147483647,当翻转后的数超出范围后返回0 思路:对给出的整数除以10,取余和取整:然后对取整部分继续取余和取整 ...