BOM与DOM

Windows对象

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口

navigator对象

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　
/*这里返回的是，你这个请求到底是不是浏览器请求，这个爬虫和处理反爬用到，这个参数就可以看出你发的这个请求是不是一个浏览器的请求*/
navigator.platform　　　// 浏览器运行所在的操作系统

history对象

history.forward()  // 前进一页
history.back()  // 后退一页

location对象

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

三种弹出框

alert(123)   // 消息框
undefined
confirm('are you true')  //确认框
true
prompt('输入', '默认值')  //提示框
"默认值"

计时器

/*
需求：
	三秒后打印123
*/
function f() {
    console.log('hello world')
}

var t = setTimeout(f, 3000)  //这里定义一个定时器，用t这个变量做一下接收，这里时间只支持毫秒，因此三秒后会打印
// clearTimeout(t)       //这个是清除定时器，，因为运行到上面的时候，代码继续往下运行，这个定时器还没有起来就被杀死了，所以不会打印


/*
需求：
	三秒后重复打印123，但是12秒后停止打印
*/
function f1() {
    console.log('hello world')
}

function f2() {
    var t = setInterval(f1, 3000)   // 定义一个定时器，，每隔3秒运行一次，赋值给一个变量t

    function f3() {
        clearInterval(t)          // 定义清除定时器的函数，clearInterval这个方法用来清除定时器
    }
    setInterval(f3,12000)        // 12秒后运行，清除定时器的函数
}
f2()

查找标签

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">
    <div class="c1 c2">
        <img src="" alt="">
    </div>
</div>

<script>
    var dEle = document.getElementById('d1');  // id是唯一的权重最高的，因此这个可以直接拿到id=d1的标签
    console.log(dEle);

    var cEle = document.getElementsByClassName('c1')[0]; // 类属性不唯一，打印出来是由一个数组包裹的，用索引取值，取到了class为c1的第一个标签
    console.log(cEle);

    var imgEle = document.getElementsByTagName('img')[0]; //标签名不唯一，打印出来的也是一个数组包裹的，用索引取值，取到了第一个img标签
    console.log(imgEle);
</script>
</body>
</html>

间接查找

parentElement            父节点标签元素
children                 所有子标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">
    <div class="c1 c2">
        <p id="d2"></p>
    </div>
    <div id="d3"></div>
</div>

<script>
    var pEle = document.getElementById('d2');
    var dEle = pEle.parentElement;   //这个拿到d2这个div标签的父标签
    var p_dEle = dEle.parentElement;  //这个拿到d2这个div标签的父父标签
    console.log(dEle);
    console.log(p_dEle);


    var dEle1 = document.getElementById('d1');
    var c_dEle = dEle1.children; //这个拿到d1这个div的子标签，但是只是子标签，只能拿到他的直系后代，用一个数组包裹
    console.log(c_dEle);
</script>
</body>
</html>

节点操作

创建节点

    var divEle = document.getElementById('d1');
    var aEle = document.createElement('a');  //创建节点
    aEle.href='https://www.mezit.com';
    divEle.appendChild(aEle);

添加节点

    var divEle = document.getElementById('d1');
    var aEle = document.createElement('a');
    aEle.href='https://www.mezit.com'; //  设置内置属性直接用点
    divEle.appendChild(aEle);  //往d1这个标签下面添加一个a标签

删除节点

    var divEle = document.getElementById('d1');
    var aEle = document.createElement('a');
    aEle.href='https://www.mezit.com';
    divEle.appendChild(aEle);

    divEle.removeChild(aEle)  //删除节点


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="d1">
    <div id="d2"></div>
</div>

<script>
    var divEle = document.getElementById('d1');
    var del_Ele = document.getElementById('d2');
    divEle.removeChild(del_Ele)  //删除，，找到父标签，调用removeChild方法，传一个要删除的直系后代标签
</script>
</body>
</html>

属性节点--值操作

    var divEle = document.getElementById('d1');
    var del_Ele = document.getElementById('d2');
    divEle.removeChild(del_Ele)

    divEle.innerText='div';               //添加文本
    divEle.innerHTML='<h1>div</h1>'       //添加文本
    // innerHTML这个可以识别标签，innerText这个不可以，没有就是添加，有就是获取

attribute操作 --自定义属性

    divEle.setAttribute('username', 'egon');
    divEle.getAttribute('username');
    divEle.removeAttribute('username');

获取值操作

适用于input框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" name="username" value="egon" id="d1">

<select name="" id="d2">
    <option value="1">read</option>
    <option value="2">DBJ</option>
    <option value="3">egon</option>
</select>


<input type="file" id="d3">

<script>
    var inpEle = document.getElementById('d1');
    console.log(inpEle.value);   //获取input框的value值


    var selEle = document.getElementById('d2');
    console.log(selEle.value);   //获取select框的value值


    var filEle = document.getElementById('d3');
    console.log(filEle.files[0])  //获取文件

</script>
</body>
</html>

类属性--class类

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="d1" class="c1"></div>

<script>
    var divEle = document.getElementById('d1');  //找标签
    divEle.classList.add('c2');  //添加一个类属性
    divEle.classList.remove('c1');//删除一个类属性
    console.log(divEle.classList.contains('c1'));//判断这个类属性是否存在
    console.log(divEle.classList.contains('c2'));
    divEle.classList.toggle('c1');  // 有这个类属性就删除，没有就添加，，可以实现一个开关等的事件
    divEle.classList.toggle('c1');

</script>
</body>
</html>

css相关操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="d1"></div>

<script>
    var divEle = document.getElementById('d1')
    divEle.style.border = '2px solid black';  //这个就是操作css属性
    divEle.style.width='300px';
    divEle.style.height='300px';
    divEle.style.backgroundColor='green'
</script>
</body>
</html>

事件

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

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

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

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

需要掌握的事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。
onfocus        元素获得焦点。
onblur         元素失去焦点。  
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

事件的两种绑定方式

// 第一种
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button id ='d1' onclick="change(this)">click me</button>
<script>
    function change(th) {
        alert(123)
    }
</script>

</body>
</html>


//第二种  一般用第二种
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<button id="d1">click me</button>
<script>
    var btnEle = document.getElementById('d1');  
    btnEle.onclick = function () {
        alert(123)
    }
</script>
</body>
</html>

/*
this表示触发事件的当前元素
*/

window.onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <script>
        window.onload = function () {
            var btn = document.getElementById('d1')
            btn.onclick = function () {
                alert(123)
            }
        }

    </script>
</head>
<body>
<button id="d1">click me</button>
</body>
</html>

/*
onload事件,  等其他代码加载完毕之后，在加载这一块内容，，因为script这些代码一般写在头部，代码从上至下加载，在加载到的事件的时候，还没有定义这个事件
*/

input框获取焦点与失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" value="egon" id="d1">

<script>
    var btn = document.getElementById('d1');
    btn.onfocus = function () {
        console.log(123)
    };
    btn.onblur = function () {
        console.log(456)
    }
</script>
</body>
</html>

开关灯事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style>
        #d1{
            width: 200px;
            height: 200px;
            border: 2px solid black;
        }
        .c1{
            background-color: red;
        }
        .c2{
            background-color: green;
        }
    </style>
</head>
<body>
<div id="d1" class="c1"></div>
<button id="d2">click me</button>

<script>
    var btn = document.getElementById('d2');
    btn.onclick = function () {
        var dEle = document.getElementById('d1');
        dEle.classList.toggle('c2');  //用这个方法，，有就删除一个属性，没有就添加
    }


</script>
</body>
</html>

省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<select id="d1">

</select>  <!--省-->
<select id="d2">
    <option value="">--请选择--</option>
</select>   <!--市-->

<script>
    var pro = document.getElementById('d1'); // 省
    var city = document.getElementById('d2'); //市
    var data = {
        '上海': ['青浦', '浦东', '浦西'],
        '北京': ['朝阳', '海淀', '昌平'],
        '河南': ['郑州', '周口', '洛阳', '商丘'],
        '云南': ['大理', '丽江', '西双版纳'],
    }

    for (let key in data) {
        var opt = document.createElement('option');  //创建空的option标签
        opt.value = key;   //设置value属性，，<option value = key></option>
        opt.innerText = key; //设置文本   <option value = key>key</option>
        pro.appendChild(opt) //添加标签
    }

    pro.onchange = function () {
        // console.log(pro.value)
        var se_pro = this.value;     //利用点击事件拿到用户选择的那个省
        cityList = data[se_pro];     //拿到对象对应的省的市数组
        city.innerText = ''; // 当拿到这个省之后，清空掉市这个下拉框
        for (var i =0; i < cityList.length;i++){
            var ct_op = document.createElement('option');
            ct_op.value = cityList[i];
            ct_op.innerText = cityList[i];
            city.appendChild(ct_op);
        }
    };


</script>
</body>
</html>

posted @ 2021-08-06 21:00 剧终cur 阅读(24) 评论(0) 收藏举报

刷新页面返回顶部

BOM与DOM

BOM与DOM

Windows对象

navigator对象

history对象

location对象

三种弹出框

计时器

查找标签

节点操作

获取值操作

类属性--class类

css相关操作

事件

公告