Js：

js的三部分组成：

　　ECMAScript

　　BOM(浏览器对象模型，就是js操作浏览器)：大部分内容作为了解

　　DOM(文档对象模型，js操作html文档、css样式等)：需要熟练掌握

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

window对象常用方法：

　　● window.innerHeight：浏览器窗口的内部高度

　　● window.innerWidth ：窗口的内部宽度

如图所示：

　　● window.open() ：打开新窗口

　　● window.close()：关闭当前窗口

navigator对象（了解即可）

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

history对象（了解即可）

window.history 对象包含浏览器的历史。

浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

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

location对象（掌握）

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用属性和方法：

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

1. location.href 获取URL

console.log(location.href)

结果：

2. location.href="URL" // 跳转到指定页面

console.log(location.href="https://www.baidu.com/?tn=91038561_hao_pg")

结果：

3. location.reload() 重新加载页面

console.log(location.reload()) //重新加载页面

弹出框：

　　alert("你看到了吗？");

　　confirm("你确定吗？")

　　prompt("请在下方输入","你的答案")

计时相关(定时器)

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout()

语法：

var t=setTimeout("JS语句",毫秒)

例子：

function f1() {
        console.log(123 + Math.random()); //Math.random()生成随机小数
    }

    f1() // 调用时会先执行一次，得到结果：123.55872556435826
    var t1 = setTimeout(f1, 3000);  // 单位是毫秒，意思是3秒之后开始执行任务, 只执行一次，得到结果：123.24005767485595

结果：

clearTimeout()

语法：

function f1() {
        console.log(123 + Math.random()); //Math.random()生成随机小数
    }

    f1() // 调用时会先执行一次，得到结果：123.42750378402074
    var t1 = setTimeout(f1, 3000);  // 单位是毫秒，意思是3秒之后开始执行任务, 只执行一次，得到结果：123.9631301120193

    // 清除定时器
    clearTimeout(t1);

结果：

setInterval() 会一直执行，直到碰到clearInterval()

返回值：一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

语法：

setInterval("JS语句",时间间隔)

例子：

 function f1() {
        console.log(123 + Math.random()); //Math.random()生成随机小数
    }
    f1() // 调用时会先执行一次，得到结果：123.42750378402074
    var t2 = setInterval(f1, 3000); // // 单位是毫秒，意思是3秒之后开始执行任务, 重复执行

结果：

clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

语法：

clearInterval(setinterval返回的ID值)

例子：

 function f1() {
        console.log(123 + Math.random()); //Math.random()生成随机小数
    }

    f1() // 调用时会先执行一次，得到结果：123.61066254619368
    var t2 = setInterval(f1, 3000); // // 单位是毫秒，意思是3秒之后开始执行任务, 只执行一次
    clearInterval(t2); //清除定时器

结果：

eg2：闭包定时器

结果：弹窗一共弹出了三次

   function func2() {
        alert(123) //跳出弹窗123
    }

    function show() {
        let t = setInterval(func2, 3000);  // 每隔3秒执行一次；第一次执行：等待3秒然后执行func2
        function inner() {
            clearInterval(t)  // 清除定时器,t为setInterval返回的值
        }
        setTimeout(inner, 9000)  // 9秒中之后触发，第二次执行：等待九秒，然后执行inner里面的指令，
　　　　　　　　　　　　　　　　　　　//在九秒里：会等3秒执行一次弹窗，一共执行两次（第3s一次，第6秒一次）第9秒会执行inner内部的指令
    }
    show()

DOM(重点)

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

　　● 文档节点(document对象)：代表整个文档
　　● 元素节点(element 对象)：代表一个元素（标签）
　　● 文本节点(text对象)：代表元素（标签）中的文本
　　● 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
　　● 注释是注释节点(comment对象)

JavaScript 可以通过DOM创建动态的 HTML：

　　● JavaScript 能够改变页面中的所有 HTML 元素
　　● JavaScript 能够改变页面中的所有 HTML 属性
　　● JavaScript 能够改变页面中的所有 CSS 样式
　　● JavaScript 能够对页面中的所有事件做出反应

查找标签

1.直接查找：

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

document.getElementById：根据ID获取一个标签

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

</head>
<body>
<div id="d1" class="c1">div</div>
<div id="d2" class="c1">div</div>
<div id="d3" class="c1">div</div>
<input type="text" name="username">
<script>
    // js如何查找标签、
    var div = document.getElementById('d1');
    console.log(div);
</script>
</body>
</html>

结果：

document.getElementsByClassName：根据class属性获取

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

</head>
<body>
<div id="d1" class="c1">div</div>
<div id="d2" class="c1">div</div>
<div id="d3" class="c1">div</div>
<input type="text" name="username">
<script>
    //  var div1 = document.getElementsByClassName('c1');// 返回的 是数组，因为class可以有多个的，所有的都放在一个数组中，如图1所示
    var div2 = document.getElementsByClassName('c1')[1];// 可以通过索引取值,如图2所示
    // console.log(div1);
    console.log(div2)
</script>
</body>
</html>

结果：

图1：

图2：

document.getElementsByTagName：根据标签名获取标签合集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1" class="c1">div</div>
<div id="d2" class="c1">div</div>
<div id="d3" class="c1">div</div>
<input type="text" name="username">
<script>
    var div1 = document.getElementsByTagName('div');  // 会找到所有的div标签，所以返回值是数组。如图1所示
    var div2 = document.getElementsByTagName('div')[0]; // 可以通过索引取值，如图2所示
    console.log(div1);
    console.log(div2);

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

结果：

图1：

图2：

document.getElementsByName()：通过input的name属性获取

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1" class="c1">div</div>
<div id="d2" class="c1">div</div>
<div id="d3" class="c1">div</div>
<input type="text" name="username">
<script>
    var div3 = document.getElementsByName('username'); // 通过input的name属性获取
    console.log(div3)
</script>
</body>
</html>

结果：

间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

parentElement ：父节点标签元素

每写一个parentElement就往上找一个父标签元素

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

</head>
<body>
<div id="d1">dov
    <p>p
        <span class="s1">span</span>
    </p>
</div>

<p>ppppppp</p>

<ul class="u1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<div class="c1">divvvv</div>
<script>
    // 找到p标签，通过父节点标签元素
    var span = document.getElementsByClassName('s1')[0];  // 先根据class属性获取span，要加索引，不然会输出所有的div
    console.log(span)
    var p = span.parentElement;  //通过父节点标签元素，来找span的父标签p
    console.log(p)
</script>
</body>
</html>

结果：

children：所有子标签

// 找到p标签，根据children来查找
var div = document.getElementById('d1'); //根据ID获取div
console.log(div)
var p = div.children[0];
console.log(p)

结果：

firstElementChild ：第一个子标签元素

//查找ul的第一个子标签元素
var ul = document.getElementsByClassName('u1')[0]; // class是有很多的，所以要通过索引
console.log(ul) //  结果是<ul class="u1">...</ul>
var li1 = ul.firstElementChild;
console.log(li1);

结果：

图1：

图2：

lastElementChild：最后一个子标签元素

 // 查找ul的最后一个子标签
var ul = document.getElementsByClassName('u1')[0];
console.log(ul);
var li1 = ul.lastElementChild;
console.log(li1);

结果：

nextElementSibling：下一个兄弟标签元素（同级标签）

 // 查找ul的下一个兄弟标签
var ul = document.getElementsByClassName('u1')[0];
console.log(ul);
var div = ul.nextElementSibling;
console.log(div);

结果：

previousElementSibling ：上一个兄弟标签元素（同级标签）

 // 查找ul的上一个兄弟标签
var ul = document.getElementsByClassName('u1')[0];
console.log(ul);
var p = ul.previousElementSibling;
console.log(p);

结果：

节点操作

创建节点：

语法：

// 语法：createElement(标签名)
// 示例：建一个空的img标签
var img = document.createElement('img');  // <img>

如图所示：

例1：动态创建一个img标签

分析：

　　1. 先创建出来一个img空元素

　　2. 设置img标签的src属性

　　3. 把创建出来的img标签显示在网页上

代码演示：

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

</head>
<body>
<div id="d1">

</div>


<script>
    // 先创建出一个空的img标签
    var img = document.createElement('img'); //得到的结果：<img>
    // 查找到div标签，以便后面将img标签放进去
    var div = document.getElementById('d1');
    // 给img标签设置src属性。
    img.src ='1234.png';  // 这个指令相当于：<img src="1234.png">
    img.alt = 'kikiki';
    // 注意：当给标签动态设置属性的时候，只有标签自带的属性可以通过点形式进行添加，自定义属性不行！！！
    // img.username = 'k1'; // 直接这样添加属性是不行的

    // 设置自定义属性：setAttribute
    img.setAttribute('username','k1') //添加了一个username的属性：username='k1'
    console.log(img.getAttribute('username'));// 获取username这个属性 结果为：k1
    img.removeAttribute('username'); // 移除自定义属性username
    console.log(img); // 
    // 把img标签放在div里面
    div.appendChild(img); //
</script>
</body>
</html>

结果：

例2：动态创建出一个a标签

分析：

　　1. 先创建出来一个a空元素

　　2. 设置a标签的src属性

　　3. 把创建出来的a标签显示在网页上

代码演示：

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

</head>
<body>
<div id="d1">

</div>

<script>

    // 先创建出一个空的a标签
    var a = document.createElement('a'); // 相当于：<a></a>
    // 查找到div标签，以便后面将a标签放进去
    var div = document.getElementById('d1');
    // 给a标签设置属性
    a.href = 'http://www.baidu.com'; // 相当于 <a href='http://www.baidu.com'></a>;
    a.title = '这是a标签';

    // 设置a标签中的文本内容
    // a.innerText = '<h1>点我去百度</h1>'; // 相当于：<a href='http://www.baidu.com'>点我看美女</a>，结果如图1所示
    a.innerHTML = '<h1>点我去百度</h1>'; // 能够识别到html中的h1标签,结果如图2所示
    console.log(a);

    // 将a放入div中去
    div.appendChild(a);

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

结果：

图1：

图2：

获取值操作

语法：

elementNode.value

适用于以下标签：

.input
.select
.textarea
value不能获取文件数据，获取文件数据要用files

class的操作

className                   获取所有样式类名(字符串)
classList.remove(cls)       删除指定类
classList.add(cls)          添加类
classList.contains(cls)     存在返回true，否则返回false
classList.toggle(cls)       存在就删除，否则添加

代码演示1：

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

</head>
<body>
<input type="text">
<select name="" id="">
    <option value="">1</option>
    <option value="">2</option>
</select>
<div id="d1" class="">div</div>
<script>
 var div = document.getElementById('d1');
    // 添加类
    div.classList.add('c1');
    div.classList.add('c2');
    // 删除指定类
    div.classList.remove('c2');
    // 获取所有样式类名(字符串)
    var res = div.className
    console.log(res); // 结果为：c1
</script>
</body>
</html>

结果如图：

代码演示2：

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

</head>
<body>
<input type="text">
<select name="" id="">
    <option value="">1</option>
    <option value="">2</option>
</select>
<div id="d1" class="">div</div>
<script> 
var div = document.getElementById('d1');
    //  存在返回true，否则返回false,结果如图1所示
    var res1 = div.classList.contains('c3'); // 查看c3类是否在div中，有就返回true,没有就返回false
    console.log(res1);
    // 无则添加、有则删除
    div.classList.toggle('c3'); // 没有c3,所以添加c3。结果如图2所示
    var res2 = div.className;
    console.log(res2);
    div.classList.toggle('c3'); // 有c3，所以会删除c3,结果如图3所示
    var res3 = div.className;
    console.log(res3);
</script>
</body>
</html>

结果如图：

图1：

图2：

图3：

指定CSS操作

JS操作CSS属性的规律：

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。

比如：

// 在上面的代码基础上
var div = document.getElementById('d1');
div.style.color = 'red'; // 字体颜色
div.style.border = '1px solid red'; // 边框颜色、边框粗细、边框类型
div.style.backgroundColor = 'green'; // 背景颜色

结果：

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。

如：

div.style.borderLeftColor = 'red';
div.style.borderLeftStyle = 'dashed';
div.style.borderLeftWidth = '5px';
div.style.borderLeft = '5px  dashed red'; // 左边框的样式

结果如图：

事件

满足某个条件之后，触发的动作

常用事件：

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

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

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

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

绑定方式：

方式1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 绑定事件方式1：
        function f() {
            alert(123);
        }
 </script>
</head>
<body>
<button class="btn" onclick="f();">按钮点我</button>  <!--调用匿名函数f-->
</body>
</html>

结果如图：

方式2：闭包函数

当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。

window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
     
        // 方式2：
        window.onload = function ()
        { // onload：一张页面或一幅图像完成加载。
            var btn = document.getElementsByClassName('btn')[0];
            btn.onclick = function ()
            // 这里还可以这样写： this.onclick = function ()   this：是实参，表示触发事件的当前元素
            {
                // onclick :当用户点击某个对象时调用的事件句柄,先执行匿名函数function，加载出完整的网页页面
                alert(1234); // alert :弹窗显示，显示内容：1234 然后当鼠标进行点击时，会出现弹窗
            }
        }
    </script>
</head>
<body>
<button class="btn">按钮点我</button>

</body>
</html>

结果如图：

事件案例

案例一：开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
        .bg1 {
            background: lightskyblue;
        }
        .bg2 {
            background: pink;
        }
    </style>
　　
</head>
<body>
<div class="c1 bg1 bg2"></div>

<button class="btn">点我换色</button> // 按钮
<script>
    var btn = document.getElementsByClassName('btn')[0]; // 通过类名：btn 找到button标签
    var div = document.getElementsByClassName('c1')[0];
    // 绑定点击事件： onclick :当用户点击某个对象时调用的事件句柄,先执行匿名函数function，加载出完整的网页页面
    btn.onclick = function () { 
        // 通过使用toggle来动态修改div属性，从而实现点击按钮进行换色
        div.classList.toggle('bg2'); // 有则删除，无则添加。注意：bg2的颜色会覆盖bg1的颜色，所以toggle('bg1')无法实现变色功能
    }
</script>
</body>
</html>

结果如图：

鼠标点击前：

鼠标点击后：

案例2：input事件

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

</head>
<body>
<input type="text" id="inp" value="老板走咱去消费">

<script>
    var inp = document.getElementById('inp');
    inp.onfocus = function () { // 获取焦点事件
        // inp.value = '';    // 将input框内部值去除
        this.value = '';  //  点value就是获取   等号赋值就是设置
        console.log(this);
    }
    // 失去焦点事件
    inp.onblur = function () {
        // inp.value = '我没钱!'
        this.value = '我没钱!'  // 给input标签重写赋值
    }
</script>
</body>
</html>

结果：

获取焦点前：

获取焦点：

失去焦点：

案例三：省市联动

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

</head>
<body>
<!--创建省份下拉框-->
<select name="" id="province">
</select>
<!--创建城市下拉框-->
<select name="" id="city">
<!--    <option value="">廊坊</option>-->
<!--    <option value="">邯郸</option>-->
</select>

<script>
    // 先找到province、city的位置
    var pro = document.getElementById('province');
    var city = document.getElementById('city');
    var data = {
        "河北省": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"]
    };
    // 1. 先循环data对象
    for (var i in data) {
        // i--------------------->河北省、北京、山东
        // 1.1 先创建option标签
        var option = document.createElement('option');
        // 1.2 设置option的value值
        option.value = i;
        // 1.3 设置文本内容
        option.innerText = i;
        pro.appendChild(option);
    }
    // 2. 给省的下拉框绑定change事件
    pro.onchange = function () {
        // 2.1 先知道当前选的下拉框的值是什么
        // var current_pro = pro.value;
        var current_pro = this.value; // 河北省  北京  山东
        // 2.2 根据选择的当前省查询对应的市列表
        var current_city_list = data[current_pro];  // ["朝阳区", "海淀区"],key取值

        //2.3 循环市列表，每次都将城市列表清空，以防出现累加的现象
        city.innerText = '';

        for (var i = 0; i < current_city_list.length; i++) {
            // 1.1 先创建option标签
            var option = document.createElement('option');
            // 1.2 设置option的value值
            option.value = current_city_list[i];

            // 1.3 设置文本内容
            option.innerText = current_city_list[i];
            // <option value='朝阳区'>朝阳区</option>
            // <option value='海淀区'>海淀区</option>

            // 1.4 就把新生成的option标签调价到市的select去
            city.appendChild(option);
        }
    }
</script>
</body>
</html>