<!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选择器操作页面中的元素的更多相关文章

  1. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  2. jQuery基础学习5——JavaScript方法获取页面中的元素

    给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  3. javascript 获取父页面中元素对象方法

    父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...

  4. 控制使用jquery load()方法载入新页面中的元素

    最近在项目中用到jquery的load()方法来加载页面,首先简单说一下load()方法. load(url,data,callback);该方法接收三个参数,第一个是载入的页面地址,第二个是要传到服 ...

  5. javaScript获取文档中所有元素节点的个数

    HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. 使用jquery操作iframe中的元素

    使用jquery操作iframe中的元素<iframe src="/test/demo.htm" width="99%" height="300 ...

  7. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  8. 在浏览器中使用jquery取得iframe中页面中指定元素的值的不同

    自己使用aspx页面中嵌套了ascx的页面其中使用了iframe的一些内容,出现了同一个页面的两种取值的方式 1. 在iframe的包含页面,需要使用iframe的页面中的元素,是需要使用$(wind ...

  9. HTML5的JavaScript选择器介绍

    在HTML5出现之前使用JavaScript查找DOM元素,有以下三种原生的方法: getElementById:根据指定元素的id属性返回元素 getElementsByName:返回所有指定nam ...

随机推荐

  1. nginx 只允许域名访问，禁止IP访问

    在nginx中为了防止,通过ip地址或者没有备案的域名代理到nginx上,可以在nginx中配置来阻止这一操作 #只可以用域名访问(此处的server是新增,并不是在原有的server基础上修改),默 ...

  2. docker 启动 nginx 访问不了的问题

    使用版本:nginx version: nginx/1.13.8 正使用docker启动nginx容器的时候,一切都很正常,容器也起来了 docker run -dit -p 80:80 --name ...

  3. pyqt 多窗口跳转

    今天在做pyqt5的多页面跳转时遇到问题,一点击button按钮,程序会崩溃.在网上查了下,应该是当窗口A调用窗口B的时候,两个窗口不能是同一类型.我写的时候把A.B同时写成了QWidget.把窗口B ...

  4. python与mysql的连接过程

    1.cmd---pip3 install PyMySQL2.>>>import pymysql3.mysql>create database bookdb character ...

  5. python装饰器+递归+冒泡排序

    冒泡排序 li = [33, 2, 10, 1,23,23523,5123,4123,1,2,0] for k in range(1,len(li)): for i in range(len(li) ...

  6. C++ 指针初始化要注意的地方

    1. 声明多个指针的时候: int* P1,P2; 如上所示,声明的是创建一个指针P1和一个int型的变量P2.而不是声明的两个指针. 对每个指针变量名,都需要使用一个*. 在C++中,int* 是一 ...

  7. R语言绘图：时间序列分析

    ggplot2绘制 arima诊断图 library(ggfortify) autoplot(acf(gold[,2], plot = FALSE)) ggtsdiag(auto.arima(gold ...

  8. git删除本地及远程分支

    1. 删除本地分支: git branch -d branchName 2. 删除远程分支: // 方法一:将删除的本地分支推到远程(要删除的远程分支在本地有映射) git push origin : ...

  9. P1855 榨取kkksc03

    P1855 榨取kkksc03 题目描述 以下皆为真实的故事. 洛谷2的团队功能是其他任何oj和工具难以达到的.借助洛谷强大的服务器资源,任何学校都可以在洛谷上零成本的搭建oj并高效率的完成训练计划. ...

  10. "Cannot open source file "Wire.h" " in Arduino Development

    0. Environment Windows 8 x64 Arduino 1.0.5 Visual studio 2012 Visual micro Arduino 1. Steps Add &quo ...