H5表单基础知识(二)
表单新增属性
<!--<input type="text" class="name" />-->
<!--
placeholder:提示文字(占位符)
autofocus:自动获取焦点
autocomplete: 自动完成(填充的) on 开启(默认) off 取消自动提示
required: 必填
multiple: 多选
novalidate:关闭默认的验证功能(只能加给form)
pattern: 自定义正则验证
pattern="1\d{10}"
-->
<!--<form action="" novalidate>-->
<form action="" >
<fieldset>
<legend>表单属性</legend>
<label for="">
用户名:<input type="text" placeholder="例如:李狗蛋" autofocus name="userName" autocomplete="on" required/>
</label>
<label for="">
电话:<input type="tel" pattern="1\d{10}" />
</label>
<!-- 上次文件-->
<input type="file" name="file" multiple/>
<input type="submit" />
</fieldset>
</form>
表单事件
<form action="">
<fieldset>
<legend>表单事件</legend>
<label for="">
邮箱:<input type="email" name="" id="txt1"/>
</label>
<label for="">
密码:<input type="text" name="" id="txt2"/>
</label>
<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>