一、内容操作的三种方式

、 详情看第一篇

innerText

innerHtml

、

value ==》表单类的标签

input >text

passwd

textarea

、

checkbox

   value

   checked

radio

   value

    checked

select

    value  当前选中的项

    selectedIndex

第二种方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <input id="i1" type="text" value=""/>

    <input  id="i2" type="password" value=""/>

    <textarea id="i3"></textarea>

<script>

    var l1=document.getElementById("i1");

    //获取值

    document.write(l1.value);

    //设置值

    l1.value=;

    var c1=document.getElementById("i2");

    document.write(c1.value);

    c1.value=;

    var d1=document.getElementById("i3");

    document.write(d1.value)

    d1.value=;

</script>

</body>

</html>

第三种方式 之一 checkbox 的value

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <h1>爱好</h1>

    <div id="l1">

    <ul>

            <li><input type="checkbox" value=""/>篮球</li>

            <li><input type="checkbox" value=""/>足球</li>

            <li><input type="checkbox" value=""/>去秋</li>

        </ul>

    </div>

        <div id="l2">

    <ul>

            <li><input type="checkbox" value=""/>篮球</li>

            <li><input type="checkbox" value=""/>足球</li>

            <li><input type="checkbox" value=""/>去秋</li>

        </ul>

    </div>

<script>

     var l3=document.getElementById("l1");

     var checks=l3.getElementsByTagName("input");

     document.write(checks[],checks[],checks[]);

     document.write(checks[].value,checks[].value);

     //在代码中直接选中

     checks[].checked =true;

</script>

</body>

</html>

第三种方式之一 checkbox的checked

实例：多选和取消以及反选

<input type=”checkbox”/>

<input type=”button” value=””/>

多选：一个按键全部选中

取消：把选中的全部取消

反选：选中的取消，没选中的选中

写表的时候在表的开头和结尾最好要加上表头和身体

<thead></thead>

<tbody></tbody>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div>

        <input type="button" value="全选" ondblclick="CheckAll();"/>

        <input type="button" value="取消" ondblclick="CancleAll();"/>

        <input type="button" value="反选" ondblclick="Reverse();"/>

    </div>

    <table>

        <thead>

            <tr>

                <th>序号</th>

                <th>用户名</th>

                <th>年龄</th>

            </tr>

        </thead>

        <tbody id="tb">

            <tr >

                <td><input class="c1" type="checkbox"/></td>

                <td>pyrene</td>

                <td></td>

            </tr>

            <tr >

                <td><input class="c1"  type="checkbox"/></td>

                <td>pyrene</td>

                <td></td>

            </tr>

            <tr >

                <td><input  class="c1" type="checkbox"/></td>

                <td>pyrene</td>

                <td></td>

            </tr>

        </tbody>

    </table>

<script>

    function CheckAll(){

        var tb=document.getElementById("tb");

        var checks=tb.getElementsByClassName("c1");

        for(var i=;i<checks.length;i++){

            var current_check=checks[i];

            current_check.checked=true;

        }

    }

    function CancleAll(){

         var tb=document.getElementById("tb");

        var checks=tb.getElementsByClassName("c1");

        for(var i=;i<checks.length;i++){

            var current_check=checks[i];

            current_check.checked=false;

        }

    }

    function Reverse(){

        var tb=document.getElementById("tb");

        var checks=tb.getElementsByClassName("c1");

        for(var i=;i<checks.length;i++){

            var current_check=checks[i];

            if(current_check.checked){

                current_check.checked=false;

            }else{

                current_check.checked=true;

            }

        }

    }

</script>

</body>

</html>

第三种方式之二 radio

例子单选框

<input type=”radio”/>

radios[0].checked=true   如果等于false就是不选中   选中值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <ul>

        <li><input type="radio" name="g" value=""/>男</li>

        <li><input type="radio" name="g" value=""/>女</li>

    </ul>

    <script>

        var radios=document.getElementsByTagName("input")

        //获取值

        var val=radios[].value;

        console.log(val);

        //选中

        radios[].checked=true;

    </script>

</body>

</html>

第三种方式之三、select

实例、下拉框

两个问题

1、这里的value怎么用

默认选中谁在当前页面就在里面加入selected=”selected”

value   当前选中的项

2、checked怎么用

如果不知道value，那么怎么才能指定值呢？

用索引的方式  selectedIndex

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <select id="sel">

        <option value="">北京</option>

        <option value="" selected="selected">上海</option>

    </select>

<script>

    var sell=document.getElementById("sel");

    document.write(sell.value);

    //通过设置value来指定一个项,这里本来显示的是上海，但是设置为11之后就显示为北京

    sell.value=;

    //如果不知道value的值。可以用索引selectIndex的方法来指定一个项

    //首先先获取现在的索引

    document.write(sell.selectedIndex);

    //之后指定要选中的项的索引

    sell.selectedIndex=;

</script>

</body>

第二篇 dom内容操作之value的更多相关文章

  1. Python全栈开发记录_第二篇（文件操作及三级菜单栏增删改查）

    python3文件读写操作(本篇代码大约100行) f = open(xxx.txt, "r", encoding="utf-8") 不写“r”(只读)默认是只 ...

  2. DOM内容操作

    <table border="2"> <thead id="1" class="c1 c2"> <tr> ...

  3. Python 基础【第二篇】python操作模式

    一.交互模式 #python Python 2.6.6 (r266:84292, Jan 22 2014, 09:42:36) [GCC 4.4.7 20120313 (Red Hat 4.4.7-4 ...

  4. DOM内容操作和自定义、样式改变

    自定义 function 方法名或函数名(参数1,参数2,...) { 方法体: return返回值:(可不写) } function abc() { alert("123"); ...

  5. MySQL 第二篇：库操作

    一 系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信息等performance_schema: MyS ...

  6. 第二篇 Mysql常用操作记录（转载）

    我们在创建网站的时候,一般需要用到数据库.考虑到安全性,建议使用非root用户.常用命令如下: 1.新建用户 //登录MYSQL@>mysql -u root -p@>密码//创建用户my ...

  7. 第二篇 Linux 虚拟机操作

    下一个虚拟机  Oracle VM 新建一个 空间啥都给大点, 然后下一个Ubuntu镜像 然后打开 试用 try  然后进入后安装就可以用Linux 啦 发现Linux还是看着蛮牛逼,单纯的用于编程 ...

  8. 初学Python——文件操作第二篇

    前言:为什么需要第二篇文件操作?因为第一篇的知识根本不足以支撑基本的需求.下面来一一分析. 一.Python文件操作的特点 首先来类比一下,作为高级编程语言的始祖,C语言如何对文件进行操作? 字符(串 ...

  9. 【开源.NET】 轻量级内容管理框架Grissom.CMS（第二篇前后端交互数据结构分析）

    这是 CMS 框架系列文章的第二篇,第一篇开源了该框架的代码和简要介绍了框架的目的.作用和思想,这篇主要解析如何把sql 转成标准 xml 配置文件和把前端post的增删改数据规范成方便后台解析的结构 ...

随机推荐

  1. 【Lucene】Apache Lucene全文检索引擎架构之入门实战1

    Lucene是一套用于全文检索和搜寻的开源程式库,由Apache软件基金会支持和提供.Lucene提供了一个简单却强大的应用程式接口,能够做全文索引和搜寻.在Java开发环境里Lucene是一个成熟的 ...

  2. asp.net core mvc视频A：笔记3-5.视图数据共享之TempData

    前几节讲的都是单页面数据共享,从本节开始讲跨页面数据共享 创建项目3.5,新建控制器 代码 控制器 设置TempData 另一个视图中读取TempData数据 运行 此时如果刷新页面,页面中的内容“张 ...

  3. nginx 使用ngx_cache_purge清除缓存

    location ~ ^/myclear(/.*) { allow 10.0.0.0/8; allow 10.28.100.0/24; allow 127.0.0.1; deny all;   pro ...

  4. Junit内部解密之三： 单元测试用例运行的全过程

    转自:http://blog.sina.com.cn/s/blog_6cf812be0100x8sb.html 我们以一个非常简单的TestCalculator类为例,只有一个测试方法: Public ...

  5. Linux_经常使用命令

    1. ls显示文件夹文件夹及文件使用方式: ls -lt -a 显示文件夹下全部文件及文件夹包括 . 与 .. -A 显示文件夹下全部文件及文件夹不包括 . 与 .. -l 显示文件夹下全部文件及文件 ...

  6. centos7 安装postgresql10

    https://blog.csdn.net/rudy5348/article/details/79299162

  7. spring mvc数据验证

    今天来说一下.前段验证,与后端数据验证.大家都知道.在我们.注册与登陆的时候,往往需要对数据进行效验.那么前段我们都知道,可以使用,js去做处理. 今天主要讲解.后端的数据效验.这里我们采用Hiber ...

  8. 安装Hadoop 1.1.2 （一 安装JDK）

    1 下载jdk1.7 xxx .rpm 2 以Root权限登陆 3 修改文件权限  chmod +x jdk-7u25-linux-x64.rpm 4 安装 JDK  rpm -ivh jdk-7u2 ...

  9. 闪屏Flash动画

    这个也比较简单,之前也做过不少 今天这个就为了方便日后使用,希望大家都可以借鉴借鉴啊! @ViewInject(R.id.linMain) private LinearLayout linMain; ...

  10. mongo explain分析详解

    1 为什么要执行explain,什么时候执行 explain的目的是将mongo的黑盒操作白盒化. 比如查询很慢的时候想知道原因. 2 explain的三种模式 2.1 queryPlanner 不会 ...