BOM,DOM

最新推荐文章于 2025-02-18 20:42:42 发布

weixin_33811961

最新推荐文章于 2025-02-18 20:42:42 发布

阅读量60

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lijinming110/p/9811035.html

1.BOM

　　1.window对象

　　　　1.location

　　　　　　1.location.href

　　　　　　2.location.href='地址' --->跳转

　　　　　　3.location.reload() --->重新加载

　　2.计时器:

　　　　1.一段时间后做什么事.

　　　　　　1.setTimeout('JS语句',毫秒)

　　　　　　2.clearTimeoutl()

　　　　2.每隔一段时间做什么

　　　　　　1.setInterval('JS语句',毫秒)

　　　　　　2.clearInterval()

2.DOM

　　1.查找标签

　　　　1.直接查找

　　　　　　1.document.getElementById() -- 根据ID标签查找

　　　　　　2.document.getElementByClassName() -- 根据class属性查找

　　　　　　3.document.getElementByTagName() -- 根据标签名获取标签集合

　　　　.间接查找

　　　　　　1.parentElement --- 父标签标签元素

　　　　　　2.children --- 所有的子标签

　　2.文档的操作

　　　　1.创建标签

　　　　　　1.var s1Ele = document.createElement('option')

　　3.文档内容

　　　　1.innerText

　　　　2.innerHTML --> 可以认识HTML标签

　　4.获取用户输入标签的值 (input/select/textarea)

　　　　1.value

　　5.样式的操作

　　　　1.classList

　　　　　　1.add

　　　　　　2.remove

　　　　　　3.contains

　　　　　　4.toggle

　　　　2.直接操作style

　　　　　　1.obj.style.backgroundColor = 'red'

　　6.时间

　　　　1.绑定方式

　　　　　　1.直接在HTML中写属性

　　　　　　2.使用JS绑定事件

　　　　常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

计时器例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>计时器示例</title>
    <!--<script>-->
        <!--// var i1Ele = document.getElementById('i1')-->
        <!--// alert(i1Ele)-->
        <!--//当文档加载完之后才执行-->
        <!--var i1Ele = document.getElementById('d1');-->
        <!--alert(d1Ele.innerText)-->

    <!--</script>-->
</head>
<body>
<input type="text" id="i1">
<input type="button" id="start" value="开始">
<input type="button" id="stop" value="结束">
<div id="d1">傻逼</div>
    <script>
        // var i1Ele = document.getElementById('d1');
        // alert(d1Ele.innerText)
        //把当前事件塞到I1标签中
        function setTime(){
            //1找到标签
        var i1Ele = document.getElementById('i1')
        //2拿到当前时间
        var now = new Date()
        //3设置i1标签的value属性为now时间
        i1Ele.setAttribute('value',now.toLocaleString())
        }
        setTime();
        //定义一个存放计时器ID的全局变量
        var t;

        //点击开始按钮,让i1标签中的时间动起来
        //1.找到开始按钮,绑定点击事件
        var startBtn = document.getElementById('start');
        startBtn.onclick = function() {
            //要做的事
            if(t === undefined){
            //一秒钟执行一次设置value动作
            t = setInterval(setTime,1000);}
        }
        //点击结束按钮,终止设置时间的定时任务
        //找到结束按钮,绑定点击事件
        var stopBtn = document.getElementById('stop');
        stopBtn.onclick = function(){
            //清除上面的定时器
            clearInterval(t);
            t = undefined
        }
    </script>

</body>
</html>

　　事件例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>两个select联动</title>
</head>
<body>
<select id="s1">
    <option value="">请选择省</option>
</select>
<select id="s2">

</select>
<script>
    var data = {
        '广东省': ['广东市', '深圳市', '惠州'], '北京': ['朝阳区', '海定区']
        , '山东': ['威海', '大连']
    }
    var s1Ele = document.getElementById('s1');
    //页面一刷新,把所有的省加载到第一个select标签内
    for (var i in data) {
        console.log(i);
        //创建一个option
        var op = document.createElement('option');
        // 设置文本
        op.innerText = i;
        // 把创建好的标签塞到第一个select标签内部
        s1Ele.appendChild(op);
        //给第一个select标签绑定一个值发生变化的事件
        var s2Ele = document.getElementById('s2');
        s1Ele.onchange = function () {
            //获取当前select选中的值
            var value = s1Ele.value;
            //1去data里找对应的地区信息
            var data2 = data[value];
            //2清空第二个select标签的内容
            s2Ele.innerText = '';
            //3把对应的地区信息追加到第二个select标签内
            for (var j = 0; j < data2.length; j++) {
                var op = document.createElement('option');
                //设置文本
                op.innerText = data2[j]
                //把创建好的标签塞到第二个select标签中
                s2Ele.appendChild(op);
            }
        }
    }
</script>
</body>
</html>

转载于:https://www.cnblogs.com/lijinming110/p/9811035.html