H5表单基础知识（二）

表单新增属性



<form action="" >
<fieldset>
<legend>表单属性</legend>
<label for="">
用户名：<input type="text" placeholder="例如：李狗蛋" autofocus name="userName" autocomplete="on" required/>
</label>

<input type="file" name="file" multiple/>

表单事件

<input type="submit" />
</fieldset>
</form>
<script>
//表单事件： oninput　当用户输入的时候
// oninvalid 当验证不通过是触发
var txt1=document.getElementById('txt1');
var txt2=document.getElementById('txt2');
var num=0;

txt1.oninput=function(){
num++;
// 将字数显示在txt2中
txt2.value=num;
}
// oninvalid 当验证不通过是触发
// 一般用于设置验证不通过时的提示文字
txt1.oninvalid=function(){
// 用于设置验证不通过时的提示文字
this.setCustomValidity('亲，请输入正确的邮箱格式！');
}

</script>

类名操作

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .box{

            width: 300px;

            height: 100px;

            margin:10px auto;

            border: 1px solid #000;

        }

        .active{

            border-radius: 50%;

            background-color: pink;

        }

    </style>

</head>

<body>

    <div class="box box1 "></div>

    <div class="box box2"></div>

    <div class="box box3"></div>

    <div class="box box4"></div>

    <button>切换</button>

    <script>

        var box1=document.querySelector('.box1');

//        box1.className="";

//        juqery

//        addClass()  removeClass()  hasClass()  toggleClass();

//        h5新增的操作类名的方式 和jq一样好用

      var box1=  document.querySelector('.box1');

//       添加类名

        box1.classList.add('active');

//        alert('ok');

//        删除类名

//        box1.classList.remove('active');

//         contains:包含

//        判断是否包含某个类名  返回结果 true/false

        var f=box1.classList.contains('active');

        console.log(f);

//        切换类名

        document.querySelector('button').onclick=function(){

            document.querySelector('.box3').classList.toggle('active');

        }

//

    </script>

</body>

</html>

自定义属性

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <!-- 给标签添加自定义属性 必须以data-开头 -->

    <div class="box" title="盒子" data-my-name="zs"  data-content="我是一个div">div</div>

    <!-- made-in-china-->

    <script>

        var box=document.querySelector('.box');

        //        js里面的自定义属性

        //        box.index=100;

//        console.log(box.className);

//        console.log(box.title);

//        如何获取标签的自定义属性

//        console.log(box.dataname);

//    自定义的属性 需要通过 dateset[]方式来获取

//        console.log(box.dataset['content']);

//        设置自定义属性的值

        var num=100;

        num.index=10;

        box.index=100;

        box.dataset['content']='aaaa';

//        data-my-name="zs" 如何获取

        console.log(box.dataset['myName']);

    </script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Tab 标签</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            background-color: #F7F7F7;

        }

        .tabs {

            width: 400px;

            margin: 30px auto;

            background-color: #FFF;

            border: 1px solid #C0DCC0;

            box-sizing: border-box;

        }

        .tabs nav {

            height: 40px;

            text-align: center;

            line-height: 40px;

            overflow: hidden;

            background-color: #C0DCC0;

            display: flex;

        }

        nav a {

            display: block;

            width: 100px;

            border-right: 1px solid #FFF;

            color: #000;

            text-decoration: none;

        }

        nav a:last-child {

            border-right: 0 none;

        }

        nav a.active {

            background-color: #9BAF9B;

        }

        .cont {

            overflow: hidden;

            display: none;

        }

        .cont ol {

            line-height: 30px;

        }

    </style>

</head>

<body>

<div class="tabs">

    <nav>

        <a href="javascript:;" data-cont="local">国内新闻</a>

        <a href="javascript:;" data-cont="global">国际新闻</a>

        <a href="javascript:;" data-cont="sports">体育新闻</a>

        <a href="javascript:;" data-cont="funny">娱乐新闻</a>

    </nav>

    <section class="cont" id="local" >

        <ol>

            <li>河感在生矿难，死伤在全10</li>

            <li>禽流感在感在广1处继续蔓延，温家宝指示</li>

            <li>南方大旱，农作物减产绝收面积上亩</li>

            <li>猪流感在广在全国暴发</li>

            <li>禽流感在全国多处继续蔓延，温家宝指示</li>

            <li>南方大旱，农作物减产绝收面积上亩</li>

            <li>猪流感在广东群体性暴发</li>

        </ol>

    </section>

    <section class="cont" id="global">

        <ol>

            <li>河南再次发生矿难，死伤人数超过100</li>

            <li>禽流感次发生蔓延，温家宝指示</li>

            <li>南方大旱，农作物减产绝收面积上亩</li>

            <li>猪流感在广减产绝收发</li>

            <li>禽流感在全国多作物减产绝收面积上亩</li>

            <li>猪流感在广东群体性暴发</li>

        </ol>

    </section>

    <section class="cont" id="sports">

        <ol>

            <li>333河南再次发生矿难，死伤人数超过100</li>

            <li>禽流感在全国多处农作物农延，温家宝指示</li>

            <li>南方大旱，农作物减产绝收面积上亩</li>

            <li>猪流感在广东群体性暴发</li>

            <li>禽流感在全农作物继续蔓延，温家宝指示</li>

            <li>南方大农作物减产绝收面积上亩</li>

            <li>猪流感在广东群体性暴发</li>

        </ol>

    </section>

    <section class="cont" id="funny">

        <ol>

            <li>福建发生血腥命案:两女遭割喉 1男孩被砍数刀</li>

            <li>四川原副省长李成云被查 5年前曾违纪又复出</li>

            <li>胡歌反对粉丝探班：以前请吃饭现在会黑脸</li>

            <li>曝郑爽爸爸歌厅撩妹 与女子勾肩搭背显亲密</li>

            <li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>

            <li>国子监大街门匾现错字 已悬挂近10年(图)</li>

            <li>猪流感在广东群体性暴发</li>

        </ol>

    </section>

</div>

<script>

    // 目标： 默认显示一个 当前的样式

    //  点击导航，实现切换

    //  key 表示的当前显示的是第几个

    (function(key){

//         获取所有的导航

        var navs=document.querySelectorAll('nav a');

//         遍历 给导航 绑定事件，并且添加当前样式

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

//            如果是用户指定的当前样式

            if(key==i){

                navs[i].classList.add('active');

//              拿到要显示内容section的id

                var secId=navs[i].dataset['cont'];

//               获取对应的section标签

                document.querySelector('#'+secId).style.display='block';

            }

//            给每一个导航绑定点击事件

            navs[i].onclick=function(){

            // 排他

            // 之前有active样式的清除, 之前显示的section 隐藏

                var  currentNav=document.querySelector('.active');

//                获取对应的内容区域 ，让其隐藏

                var currentId=currentNav.dataset['cont'];

//                去掉导航的active 样式

                currentNav.classList.remove('active');

//                对应的内容区域

                document.querySelector('#'+currentId).style.display='none';

            //   突出显示自己 导航添加样式  对应的section 显示

//                给自己添加active样式

                this.classList.add('active');

//                对应的section模块显示出来

                var myId=this.dataset['cont'];

                document.querySelector('#'+myId).style.display='block';

            }

        }

    })(0);

</script>

</body>

</html>

自定义属性-tab栏操作

H5表单基础知识（二）的更多相关文章

《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本
在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 ...
easyUI表单基础知识
easyUI创建异步提交表单我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单 ...
form表单基础知识
form 元素是块级元素 ------------------- ------------------- ----------------------------------------------- ...
form 表单基础知识
<form method=" name="one" action="http://www.battlenet.com.cn/zh/"> & ...
[SQL]SQL Server数据表的基础知识与增查删改
SQL Server数据表的基础知识与增查删改由张晨辉(学生) 于19天前发表 | 阅读94次一.常用数据类型 .整型:bigint.int.smallint.tinyint .小数:decim ...
java 基础知识二基本类型与运算符
java 基础知识二基本类型与运算符 1.标识符定义:为类.方法.变量起的名称由大小写字母.数字.下划线(_)和美元符号($)组成,同时不能以数字开头 2.关键字 java语言保留特殊含义或者 ...
菜鸟脱壳之脱壳的基础知识(二) ——DUMP的原理
菜鸟脱壳之脱壳的基础知识(二)——DUMP的原理当外壳的执行完毕后,会跳到原来的程序的入口点,即Entry Point,也可以称作OEP!当一般加密强度不是很大的壳,会在壳的末尾有一个大的跨段,跳向O ...
H5表单
H5表单 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range ...
Javascript高级编程学习笔记（73）—— 表单（1）表单基础
表单 JS最初的一个用途就是帮助服务器分担处理表单的责任时至今日,虽然web应用以及JS都有了长足的发展,但是表单依然是现在web应用中比较重要的部分. 因为默认的表单控件很丑,所以有时候我们会使用 ...

随机推荐

python进程、多进程
进程: 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本执行实体:在当 ...
Linux中Postfix邮件发送配置（三）
部署DNS服务器 postfix根据域名和地址做一个MX记录,A记录,PTR记录(一般在互联网上邮件服务器都要反解,没有PTR记录会认为是垃圾邮件) $ service iptables stop $ ...
python之路----面向对象的封装特性
封装 [封装] 隐藏对象的属性和实现细节,仅对外提供公共访问方式. 广义上面向对象的封装 :代码的保护,面向对象的思想本身就是一种只让自己的对象能调用自己类中的方法狭义上的封装 —— 面向对象的三大 ...
（三）github之GIT的导入
什么是版本管理? git是一款[分散型版本管理]软件,提供了开发过程中不可少的功能,例如记录一款软件添加或者更改源代码的过程,回溯到特定阶段,恢复误删除的文件等. 集中型:将仓库集中放在服务器中,一旦 ...
01: 安装zabbix server
目录:Django其他篇 01: 安装zabbix server 02:zabbix-agent安装配置及 web界面管理 03: zabbix API接口对主机.主机组.模板.应用集.监控项. ...
Android实践项目汇报（三）
Google天气客户端本周学习计划调试代码使之成功运行并实现天气预报功能. 实际完成情况由于google取消api接口服务,天气源的传输.所以我换了一个使用 haoserver API接口的程序 ...
requirejs配置代码示例
requirejs大致用法:通过定义模板define()再通过require()或requirejs()加载模板,paths是路径,如果路径长可以把它赋一个短名称加入ruquire()中,shim是兼 ...
HDU 1213 How Many Tables（并查集模板）
http://acm.hdu.edu.cn/showproblem.php?pid=1213 题意: 这个问题的一个重要规则是,如果我告诉你A知道B,B知道C,这意味着A,B,C知道对方,所以他们可以 ...
Nginx 随笔
使用包管理工具安装nginx Linux(基于deb) sudo apt-get install nginx Linux(基于rpm) sudo yum install nginx FreeBSD s ...
Web API过滤器
Web API包含在操作方法执行之前或之后添加额外的逻辑的过滤器.过滤器可用于提供横切特性,比如日志记录.异常处理.性能测量.身份验证和授权等等. 过滤器可以应用于Web API控制器或一个或多个操作 ...

H5表单基础知识（二）

H5表单基础知识（二）的更多相关文章

随机推荐

热门专题