2018-08-22 day08 js事件2

作者: Kris_Shin | 来源:发表于2018-08-22 18:47 被阅读0次

2018-08-22 day08 js事件2
事件
JS 事件（2）
点透/触屏事件/js兼容性代码
Day04（jQuery事件，事件绑定，demo 滑动解锁）
025 JS事件
Vue动画之二： JS方式
Day08 JS
js day08
js day08

DOM操作

 children    子节点  儿子节点
 parentNode  父节点

 谷歌和火狐的方式
 firstElementChild  一胎  
 lastElementChild   最后一胎
 previousElementSibling  上一个兄弟节点
 nextElementSibling      下一个兄弟节点

 这是ie的方式
 firstChild
 lastChild
 previousSibling
 nextSibling
 
 // 通过document可以动态的创建和删除节点
 tagName      获取对象标签的名字  大写
 createElement  创建节点
 removeChild    父节点.removeChild(子节点)
 appendChild    添加节点
     添加存在的节点，本质是移动节点
 insertBefore   添加节点   insertBefore(new, old)

 setAttribute :  既可以设置官方属性，又可以设置自定义属性
 getAttribute : 既可以获取官方属性，也可以获取自定义属性

 留言板
 山海关（锦州）. 潼关. 剑门关（四川盆地）. 娘子关. 玉门关. 嘉峪关

事件绑定和事件冒泡

addEventListener    谷歌和火狐方式
removeEventListener
attachEvent         ie方式
detachEvent

获取事件对象
    事件ev   火狐. 谷歌
    window.event   ie. 谷歌
    兼容性写法：  var oevent = ev || event
获取事件的x和y坐标
    oevent.clientX   oevent.clientY
    相对窗口左上角的坐标
取消事件冒泡
    事件的属性和方法
    cancelBubble        ie方式. 谷歌. 火狐都支持
    stopPropagation()   谷歌. 火狐方式
事件源对象
    srcElement   ie. 谷歌
    target       火狐. 谷歌

小知识

禁止鼠标右键
    document.oncontextmenu = function () {
        return false
    }
超链接和事件同时触发
    事件的属性和方法
    returnValue         ie. 谷歌
    preventDefault()    火狐. 谷歌
    return false        ie. 谷歌. 火狐
键盘事件
    document.onkeydown : 捕获用户点击的按钮
    获取按钮的编号
    oevent.keyCode

正则对象

规则是一样的。
单字符：.  \w  \d  \W  \s  \S  \D  [aoe]
数量：  {m}  {m,}  {m,n}  {0,}==*  {1,}==+  {0,1}==?
match : 正则匹配
replace : 正则替换

表单对象

三种查找方法
（1）根据id获取
（2）document.forms  得到文档中所有的form
（3）根据name获取
    document.formname
    获取该表单里面input框的值，假如该input框name=user
    document.formname.user.value
submit()方法
    document.formname.submit()   谁都能提交
js验证表单内容

吸顶条

作业

case.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>case</title>
</head>

<body>
    <div>
        1.<br>
        <select id="left_1">
            <option>乔丹</option>
            <option>姚明</option>
            <option>奥尼尔</option>
            <option>张伯伦</option>
            <option>贾巴尔</option>
            <option>詹姆斯</option>
        </select>
        <input id="btn1" type="button" value="移除">
        <select id="right_1">
            <option>欧文</option>
            <option>杜兰特</option>
            <option>韦德</option>
            <option>威少</option>
            <option>汤普森</option>
            <option>哈登</option>
        </select>
        <input id="btn2" type="button" value="移除">
    </div>
    <div>
        2.<br>
        <div id="ad" style="width:100px;height:100px;background:red" x=0 y=0></div>
    </div>
    <div>
        3.<br> 距离国庆还有:
        <button id="getT" style="display:none;"></button><span id="time"></span>

    </div>
    <div>
        4.<br>
        <button id="selectAll">全选</button>
        <button id="selectNone">全不选</button>
        <button id="selectOthers">反选</button><br>
        <input type="checkbox" class="checks" value="身高180">身高180<br>
        <input type="checkbox" class="checks" value="八块腹肌">八块腹肌<br>
        <input type="checkbox" class="checks" value="胸肌">胸肌<br>
        <input type="checkbox" class="checks" value="EQ280">EQ280<br>
        <input type="checkbox" class="checks" value="很有钱">很有钱<br>
    </div>
    <div>
        5.<br>
        <div id="ad" style="width:100px;height:100px;background:red" x=0 y=0></div>
    </div>
</body>
<script>
    var obtn1 = document.getElementById('btn1');
    var obtn2 = document.getElementById('btn2');
    var oleft = document.getElementById('left_1');
    var oright = document.getElementById('right_1');
    var seloptl = null;
    var seloptr = null;
    obtn1.onclick = function () {
        seloptl = oleft.options[oleft.selectedIndex];
        oright.appendChild(seloptl)
        seloptl = null
    }
    oleft.onchange = function () {
        seloptl = oleft.options[oleft.seletedIndex]
    }
    obtn2.onclick = function () {
        seloptr = oright.options[oright.selectedIndex];
        if (!seloptr) {
            seloptr = oright.options[0];
        }
        oleft.appendChild(seloptr);
        seloptr = null;
    }
    oright.onchange = function () {
        seloptr = oright.options[oright.seletedIndex];
    }
    var ogetT = document.getElementById('getT');
    ogetT.onclick = setInterval(function () {
        var nowDate = new Date();
        var day = nowDate.getDate();
        var hrs = nowDate.getHours();
        var min = nowDate.getMinutes();
        var sec = nowDate.getSeconds();
        document.getElementById('time').innerHTML = '' + (31 - day + 30) + '天' + (23 - hrs) + '小时' + (60 - min) + '分钟' + (60 - sec) + '秒';
    }, 800);

    var checks = document.getElementsByClassName('checks');
    var selAll = document.getElementById('selectAll');
    var selNon = document.getElementById('selectNone');
    var selOth = document.getElementById('selectOthers');
    selAll.onclick = function () {
        for (var i = 0; i < checks.length; i++) {
            checks[i].checked = true;
        }
    }
    selNon.onclick = function () {
        for (var i = 0; i < checks.length; i++) {
            checks[i].checked = false;
        }
    }
    selOth.onclick = function () {
        for (var i = 0; i < checks.length; i++) {
            if (checks[i].checked) {
                checks[i].checked = false;
            } else {
                checks[i].checked = true;
            }
        }
    }
</script>

</html>