<!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. 【Js】Jquery遍历-each(function(e){})中的e和$(this)的区别

    $("selector").each(function(e){ console.log($(e)); console.log($(this)); console.log(e); c ...

  2. JavaSE 第二次学习随笔(三)

    * 常见异常 * 数组越界异常 * 空指针异常 * * * 特点: 当程序出现异常的时候, 程序会打印异常信息并中断程序 * 所以当同时出现多个异常的时候只能执行第一个, 后边的用不到 * * 单异常 ...

  3. 程序设计的SOLID原则

    要想设计一个良好的程序,建议采用SOLID原则,若考虑了SOLID,可以使程序在模块内具有高内聚.而模块间具有低耦合的特点. SOLID原则包括5方面的内容: S---单责任原则(SRP) 一个模块只 ...

  4. 实用脚本 4 -- Makefile(不同文件下的多个可执行文件or静态库编译到同一目录下)

    不同文件下的多个可执行文件编译到同一目录下,这样方便观察编译结果,从而方便进程操作.使用时根据自己的需要在进行局部修改(如 链接库.目标文件等等). 1..bashrc 中设置编译主目录(例如) ex ...

  5. ubuntu下安装redis及在php中使用

    一.安装redis sudo apt-get install redis-server 安装完成后,Redis服务器会自动启动,我们可以通过下面的命令行检查一下: # redis-cli > p ...

  6. Oracle 学习笔记（四）

    ​oracle表查询 使用逻辑操作符号  查询工资高于 500 或者是岗位为 MANAGER 的雇员,同时还要满足他们的姓名首字母为大写 J SELECT * FROM emp WHERE (sal ...

  7. 命令行下对apk签名

    l创建key,需要用到keytool.exe (位于jdk安装目录\bin目录下),使用产生的key对apk签名用到的是jarsigner.exe (位于jdk安装目录\bin目录下),把上两个软件所 ...

  8. OpenCV入门：（三：图片Mask operations）

    Mask operations 翻译为中文应该是掩模操作,具体操作步骤就是根据一个操作矩阵(又名kernel)处理图片中的每一个像素点,操作矩阵会根据当前像素点的周围像素来调整当前像素值. 1.示例 ...

  9. Android Open Source Projects(汇总与整理)

    Android Open Source Projects 目前包括: Android开源项目第一篇——个性化控件(View)篇  包括ListView.ActionBar.Menu.ViewPager ...

  10. 实现网页布局的自适应 利用@media screen

    利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen /*1280分辨率以上(大于1200px)*/ @media screen and (min-widt ...