JavaScript 是一生都学不完的语言

解释型语言和编译型语言

程序语言翻译成机器语言的工具，称为翻译器

翻译器的翻译方式：1、编译 2、解释 区别：翻译的时间不同

编译器：在代码执行之前进行编译，生成中间代码文件（Java）

解释器：在运行时进行即时解释，并立即执行（JavaScript）

JavaScript 组成：1、ECMAScript（JavaScript 语法） 2、DOM 3、BOM

JavaScript 有3种书写位置：行内、内嵌和外部

1、行内

1
<input type="button" value="clickme" onclick="alert('你好')">

2、内嵌

1
2
3
<script>
	alert('hello');
</script>

3、外部

1
<script src="my.js"></script>

输入输出

console.dir()可以显示一个对象的所有属性和方法

1
2
3
4
5
<script>
	prompt('输入年龄：');//用户输入
	alert('你好');//弹出警示框
	console.log('toprogrammer');//控制台打印
</script>

变量

不用 name 作为变量名

1
2
3
4
<script>
	var name = prompt('请输入名字');//声明变量并输入
	alert(name);//输出
</script>

数据类型

prompt() 输入为字符型

控制台输出：紫色为数字型

js 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定

js 是动态语言 变量的数据类型是可以变化的

一、简单数据类型

数字型 Number

1
2
3
4
5
6
7
var n8 = 012;//八进制
var n16 = 0xb;//十六进制
console.log(Number.MAX_VALUE);//最大值
console.log(Number.MAX_VALUE*2);//Infinity
console.log(-Number.MAX_VALUE*2);//-Infinity
console.log('a' - 100);//NaN
console.log(isNaN('asd' - 10));//是数字，返回 false

字符串型 String

引号可单可双

字符串转义字符，用 \ 开头，写在引号里面

1
2
3
4
5
var a = '我是"高富帅"';//字符串嵌套
a.length //返回字符串长度
//显示年龄案例：
var age = prompt('您的年龄：');
alert('年龄：' + age);

布尔型 Boolean

true ：1 false : 0

undefined 和 null

一个声明后没有被赋值的变量会有一个默认值 undefined

一个变量赋予 null 值，里面存的值为空

1
2
3
4
5
6
7
var v;
console.log(v);//undefined
console.log(1 + v);//NaN

var va = null;
console.log(va);//null
console.log(1 + va);//1

typeof 检查变量数据类型

1
2
var num = 10;
console.log(typeof num);

数据类型转换

转为字符串型：

1
2
3
4
var num = 10;
var str1 = num + '';
var str2 = num.toString();
var str3 = String(num);

转为数字型：

1
2
3
4
console.log(parseInt('3.83px'));//输出3（取整，忽略后面的字母）
console.log(parseFloat('3.1415px'));//输出3.1415（忽略后面的字母）
console.log(Number('31415'));//输出31415
console.log('12' - '10');//输出2（隐式转换）

数组

1
2
3
var arr = [1, 3.14, 'ss', true];
for (var i = 0; i < arr.length; i++)
	console.log(arr[i]);

数组中的方法

  • some

    1
    2
    3
    4
    5
    6
    7
    arr = ["aa", "bb", "cc"];
    arr.some((item, index) => {
        if (item === 'bb') {
            console.log(index);
            return true;
        }
    })

  • every

    1
    2
    3
    4
    5
    6
    7
    arr = [
        { id: 1, name: 'a', state: true },
        { id: 2, name: 'b', state: true },
        { id: 3, name: 'c', state: true },
    ]
    const result = arr.every(item => item.state)
    console.log(result)

  • reduce

    1
    2
    3
    4
    5
    6
    7
    8
    9
    arr = [
        { id: 1, name: 'a', state: true, price: 10 },
        { id: 2, name: 'b', state: true, price: 20 },
        { id: 3, name: 'c', state: false, price: 400 },
    ]

    const result = arr.filter(item => item.state).reduce((sum, item) => {
        return sum += item.price
    }, 0)

翻转数组

1
2
3
4
5
var arr = [1, 2, 3, 4];
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
    newArr[newArr.length] = arr[i];
}

作用域

如果在函数内部 没有声明直接赋值的变量 属于全局变量

DOM

一、简介

文档对象模型（Document Object Model）处理可扩展标记语言的标准编程接口

二、获取元素

  • 根据 ID 获取某一个元素
1
2
3
4
5
6
7
8
<body>
	<input id="b" type="button" value="clickme" onclick="prompt('输入！')">
	<script>
		var a = document.getElementById('b');
		console.log(a);//返回的是一个元素对象
		console.dir(a);//打印返回的元素对象 查看属性和方法
	</script>
</body>
  • 根据标签名获取某一类元素

返回获取的元素对象的集合 以伪数组的形式存储

不管页面中有没有要获取的元素，返回的都是伪数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
	<ul>
		<li>你好</li>
	</ul>
    <ol id = 'ol'>
        <li>hello</li>
    </ol>
	<script>
		var lis = document.getElementsByTagName('li');
		console.log(lis);
		for (var i = 0; i < lis.length; i++)
			console.log(lis[i]);
        //获取某个元素内部所有指定标签名的子元素
        var ol = document.getElementById('ol');
		console.log(ol.getElementsByTagName('li'));
	</script>
</body>
  • 通过 HTML5 新增的方法获取

querySelector 返回指定选择器的第一个元素对象

querySelectorAll 返回指定选择器的所有元素对象集合

1
2
3
4
5
6
7
8
9
10
11
<ol id = 'ol'>
		<li class = 'l'>h</li>
		<li class = 'l'>hel</li>
</ol>
<script>
    var ol = document.getElementsByClassName('l');//通过类名获取元素的集合
    var a = document.querySelector('#ol');//通过id
    var b = document.querySelector('ol');//通过标签名
    var c = document.querySelector('.l');//通过类名
    var d = document.querySelectorAll('.l');
</script>
  • 特殊元素获取
1
2
var b = document.body;
var h = document.documentElement;//获取html标签

三、事件基础

事件组成：事件源 事件类型 事件处理程序

![屏幕截图 2022-04-30 182746](D:\typora\typora-user-images\屏幕截图 2022-04-30 182746.png)

四、操作元素

1、改变元素内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<button>hello</button>
<p></p>
<div>时间</div>
<script>
    var btn = document.querySelector('button');
    var di = document.querySelector('div');
    //添加事件
    btn.onclick = function() {
        di.innerText = getdate();
    }
    function getdate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var day = date.getDay();
        var arr =['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
        return year + '-' + month + '-' + dates + '-' + arr[day];
    }
    //不添加事件
    var p = document.querySelector('p');
    p.innerText = getdate();

这两个函数适用于普通盒子，如 div 标签

innerText 不识别HTML标签

innerHTML 识别HTML标签

1
2
3
4
5
6
7
8
<div>
    <strong>时间</strong>
</div>
<script>
    var div = document.querySelector('div');
    console.log(div.innerHTML);//保留空格和换行
    console.log(div.innerText);//去除空格和换行
</script>

2、改变元素属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<button id="liu">刘德华</button>
<button id="zhang">张学友</button>
<img src="i/ip.png" alt="liu" title="刘德华">

<script>
    var ldh = document.getElementById('liu');
    var zxy = document.getElementById('zhang');
    var img = document.querySelector('img');

    zxy.onclick = function() {
        img.src = 'i/zhang.png';
        img.title = '张学友';
    }

    ldh.onclick = function() {
        img.src = 'i/ip.png';
        img.title = '刘德华';
    }
</script>

3、表单元素的属性操作

1
2
3
4
5
6
7
8
9
10
11
12
<button>按钮</button>
<input type="text" value="输入">

<script>
    var btn = document.querySelector('button');
    var input = document.querySelector('input');

    btn.onclick = function() {
        input.value = '被点击了';
        this.disabled = true;
    }
</script>

4、样式属性操作

1、行内样式操作

1
2
3
4
5
6
7
<div>A</div>
<script>
    var div = document.querySelector('div');
    div.onclick = function() {
        this.style.backgroundColor='pink';
    }
</script>

2、类名样式操作

1
2
3
4
5
var text = document.querySelector('div');
text.onclick = function() {
    this.className = 'change'; //覆盖原先类名
    this.className = 'change + first'; //不覆盖（叠加）
}

显示隐藏文本框内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<input type="text" value="手机">
<script>
    var text = document.querySelector('input');
    text.onfocus = function() { //获得焦点
        if(this.value == '手机') {
            this.value = '';
        }
        this.style.color = "#333";
    }
    text.onblur = function() { //失去焦点
        if(this.value == '') {
            this.value = '手机';
        }
        this.style.color='#999';
    }
</script>

密码框验证信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style>
    div {
        width: 600px;
        margin: 100px;
    }
    .message {
        display: inline-block;
        font-size: 12px;
        color: #999;
        padding-left: 20px;
    }
    .wrong {
        color:red;
    }
    .right {
        color: green;
    }
</style>
<div class="register">
    <input type="password" class="ipt">
    <p class="message">请输入</p>
</div>
<script>
    var ipt = document.querySelector('.ipt');
    var message = document.querySelector('.message');
    ipt.onblur = function() {
        var len = this.value.length;
        if((len > 0 && len < 6) || len > 10) {
            message.className = 'message wrong';
            message.innerHTML = '位数不对！';
        } else if(len >= 6 && len <= 10){
            message.className = 'message right';
            message.innerHTML = '正确';
        } else {
            message.className = 'message';
            message.innerHTML = '请输入';
        }
    }
</script>

排他思想

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<button>按钮1</button>
<button>按钮2</button>
<script>
    var btns = document.getElementsByTagName('button');

    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            for (var i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
            }
            this.style.backgroundColor = 'pink';
        }
    }
</script>

换肤

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul class="huan">
    <li><img src="i/ip.png"></li>
    <li><img src="i/zhang.png"></li>
</ul>

<script>
    var imgs = document.querySelector('.huan').querySelectorAll('img');
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function () {
            document.body.style.backgroundImage = 'url(' + this.src + ')';
        }
    }
</script>

表格隔行变色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<table>
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>何毅</td>
        </tr>
        <tr>
            <td>2</td>
            <td>王天骐</td>
        </tr>
    </tbody>
</table>
<script>
    var tbody = document.querySelector('tbody').querySelectorAll('tr');
    for (var i = 0; i < tbody.length; i++) {
        tbody[i].onmouseover = function() {
            this.className = 'bg';
        }
        tbody[i].onmouseout = function() {
            this.className = '';
        }
    }
</script>

全选按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<table>
    <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll" />
            </th>
            <th>学号</th>
            <th>姓名</th>
        </tr>
    </thead>
    <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>1</td>
            <td>何毅</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>2</td>
            <td>王天骐</td>
        </tr>
    </tbody>
</table>
<script>
    var cb = document.getElementById('j_cbAll');
    var tb = document.getElementById('j_tb').getElementsByTagName('input');

    cb.onclick = function () {
        for (var i = 0; i < tb.length; i++) {
            tb[i].checked = this.checked;
        }
    }

    for (var i = 0; i < tb.length; i++) {
        tb[i].onclick = function () {
            var flag = true;
            for (var i = 0; i < tb.length; i++) {
                if (tb[i].checked == false) {
                    flag = false;
                    break;
                }
            }
            cb.checked = flag;
        }
    }
</script>

自定义属性

自定义属性以 data- 开头

1
2
3
4
5
6
7
8
9
10
11
<div id="demo" data-index="1"></div>

<script>
    var div = document.querySelector('div');
    console.log(div.id);//获取内置属性值
    console.log(div.getAttribute('data-index'));//获取自定义属性值（常用）
    div.id = 'test';
    div.setAttribute('data-index', 2);//设置自定义属性值（可以新增）
    div.removeAttribute('data-index');//移除自定义属性值
    console.log(div.dataset.index);//获取data开头的自定义属性值
</script>

五、节点操作

利用父子兄节点关系获取元素

节点的基本属性：nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）

  • 元素节点 nodeType为1
  • 属性节点 nodeType为2
  • 文本节点 nodeType为3（文本节点包含文字、空格、换行）
1
2
3
4
5
6
7
8
9
var er = document.querySelector('.er');
console.log(er.parentNode);//获取最近的父级节点
var div = document.querySelector('div');
console.log(div.childNodes);//获取子节点
console.log(div.children);//获取子元素节点（常用）
console.log(div.firstChild);//获取第一个子节点
//获取最后一个元素节点
console.log(div.lastElementChild);
console.log(div.children[div.children.length - 1]);

BOM

Browser Object Model 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window

window对象是浏览器的顶级对象

1、它是 JS 访问浏览器窗口的一个接口

2、它是一个全局对象，定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法

窗口（页面）加载事件

window.onload = function () {}：

1、==当文档内容（dom元素、flash、css)完全加载完成后会触发该事件==

2、注意：只能写一次，若写了多个，以最后一次为准

使用window.addEventListener(‘load’,function(){} 没有限制

document.addEventListener(‘DOMContentLoaded’,function() {}：

==当dom元素加载完成后，不用等CSS、flash就会触发该事件==

调整窗口大小事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    window.addEventListener('load', function () {
        var btn = document.querySelector('button');
        window.addEventListener('resize', function () {
            console.log(window.innerWidth);
            if (window.innerWidth < 400) { //页面宽度小于400则隐藏按钮
                btn.style.display = 'none';
            } else {
                btn.style.display = 'block';//否则显示按钮
            }
        })
    })
</script>
<button>点击</button>

定时器

1）执行一次

1
2
3
setTimeout(function() {
    console.log("定时输出");
},3000);//三秒后输出

定时关闭广告

1
2
3
4
5
6
7
8
9
<script>
    window.addEventListener('load', function () {
    var btn = document.querySelector('button');
    setTimeout(function () {
        btn.style.display = 'none';
    }, 3000);
});
</script>
<button>点击</button>

清除定时器

1
2
3
4
5
6
7
8
9
10
<button>停止定时器</button>
<script>
    var btn = document.querySelector('button');
    var timer = setTimeout(function() {
        console.log("定时器");
    },3000);
    btn.addEventListener('click',function() {//点击按钮后定时器停止
        clearTimeout(timer);
    });
</script>

2）执行多次

倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div>
		<span class="day">1</span> 天
		<span class="hour">2</span> 小时
		<span class="minute">3</span> 分钟
		<span class="second">4</span> 秒
</div>
<script>
    var day = document.querySelector('.day');
    var hour = document.querySelector('.hour');
    var minute = document.querySelector('.minute');
    var second = document.querySelector('.second');
    var inputTime = +new Date('2022-6-13 17:00:00');

    countDown();
    setInterval(countDown,1000);

    function countDown() {
        var nowTime = +new Date();
        var times = (inputTime - nowTime) / 1000;
        var d = parseInt(times / 60 / 60 / 24);
        d = d < 10 ? '0' + d : d;
        day.innerHTML = d;
        var h = parseInt(times / 60 / 60 % 24);
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h;
        var m = parseInt(times / 60 % 60);
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
        return d + '天' + h + '时' + m + '分' + s + '秒';
    }
</script>