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栏操作

来源：oschina

链接：https://my.oschina.net/u/4395961/blog/3850845

标签

javascript

Solid

DCC

autocomplete