JavaScript学习笔记

前言

混乱又痛苦 坚持又很酷……

---

1、JavaScript 使用方式

常见用法

<!-- 可以不写，默认显示JS类型-->
    <script type="text/javascript"></script>

• 内部标签

<!-- script标签内，写JavaScript代码
         alert为弹窗
    -->
    <script>
        alert('hello world');
    </script>

• 外部引入

<!--外部引入  不能用自闭合标签，script必须成对出现-->
    <script src="js/qj.js"></script>

2、基本语法

2.1 变量类型和条件控制

定义变量 变量类型(都是var) 变量名=变量值

  <!--JavaScript严格区分大小写-->
    <script>
        // 1.定义变量 变量类型(都是var) 变量名=变量值
        var num =1;
        var name = "Ben";
        // 2.条件控制
        if (num > 0){
            alert('hello');
        }else {
            alert('error');
        }

        // console.log(); 打印变量，可以在控制台查错
    </script>

2.2 数据类型

数值，文本，图形，音频，视频……

number

js不区分小数和整数，Number

123	//整数123
123.1	//浮点数123.1
1.123e3	//科学计数法
-99	//负数
NaN	//Not a number
Infinity	//表示无限大

注意：

• NAN===NAN false，NAN与所有的数值都不相等，包括自己
• 只能通过 isNaN(NaN) 来判断这个数是否是NaN
• 尽量避免使用浮点数运算，存在精度问题

字符串

“abc” ，‘abc’

比较运算符

=
==	等于（类型不一样，值一样也会判断为true）
===	绝对等于（类型一样，值一样）

数组
JS中数组类型可以不相同

//保证代码可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,12,3,4,4,5,'hello');

下标越界----undefined
对象
每个属性之间使用,隔开，最后一个不需要符号

<script>
        // Person person = new Person();
        // 每个属性之间使用,隔开，最后一个不需要符号
        var person = {
            name:"Ben",
            age:3,
            arrs:['js','java','web','···']
        }
    </script>

2.3 ‘use strict’; 严格检查模式

‘use strict’; 严格检查模式，预防JavaScript的随意性导致产生的一些问题

<!--JavaScript严格区分大小写-->
    <!-- 'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
          必须写在JavaScript的第一行
          局部变量建议都使用let去定义
    -->
    <script>
        'use strict';
    </script>

2.4 字符串类型

1、正常字符串使用" " ，’ '包裹
2、注意转义字符 \

\'	---------'
\n
\t
\u4e2d	\u#### unicode字符
\x42  Ascll 字符

3、多行字符串编写

<script>
        'use strict';
        var msg =
            `hello
            word
            nihao
            好`
        console.log(msg);
    </script>

4、模板字符串
${} 相当于+拼接

let msg = `你好呀。${msg}`

5、字符串的可变性，不可变

6、字符串大小写转换
toLocaleLowerCase() //变小写方法
toLocaleUpperCase() //变大写方法

console.log(msg.toLocaleLowerCase());//变小写
console.log(msg.toLocaleUpperCase()); //变大写

7、indexOf(); //获取元素位置方法
8、substring

[)
substring(1)	//从第一个截取到最后一个
substring(a,b)	//从第a个截取到第b个（不包含b）

2.5 数组

可以包含任意数据类型

arr = [1,2,3,4,5,6,"1","2"]
(8) [1, 2, 3, 4, 5, 6, '1', '2']

1、长度

arr.length
8

2、indexOf()，通过元素获得下表索引

arr.indexOf(1)
0

数字1和字符串”1“是不一样的

3、slice()
截取元素，包头不包尾

arr.slice(2,5)
(3) [3, 4, 5]

4、push和pop
push: 压入尾部
pop; 弹出尾部一个元素

arr.push("a")
9
arr
(9) [1, 2, 3, 4, 5, 6, '1', '2', 'a']
arr.pop()
'a'
arr
(8) [1, 2, 3, 4, 5, 6, '1', '2']

5、unshift 和 shift
unshift：压入元素到头部
shift：从头部弹出元素

arr.unshift("x")
9
arr
(9) ['x', 1, 2, 3, 4, 5, 6, '1', '2']
arr.shift()
'x'

6、排序sort()

arr.sort()
(8) [1, '1', 2, '2', 3, 4, 5, 6]

7、元素反转reverse()

arr.reverse()
(8) [6, 5, 4, 3, '2', 2, '1', 1]

8、concat()拼接数组

arr.concat([11,22,33])
(11) [6, 5, 4, 3, '2', 2, '1', 1, 11, 22, 33]
arr
(8) [6, 5, 4, 3, '2', 2, '1', 1]

没有修改数组，只是返回了一个新的数组

9、连接符

arr.join()
'6,5,4,3,2,2,1,1'
arr.join('-')
'6-5-4-3-2-2-1-1'

10、多维数组

arr = [[1,2],[3,4],[5,6]]
arr[1][1]
4

2.6 对象

JavaScript中所有的键都是字符串，值是任意对象
多个属性之间使用 , 隔开，最后一个属性不加逗号
键：值

 var 对象名 = {
 			属性名:属性值，
 			属性名:属性值，
 			属性名:属性值
        }

1、动态的删减属性，通过delete删除对象属性

delete person.age
true
person
{name: 'Ben', score: 0}

2、动态的添加属性

person.hh = "haha"
'haha'
person
{name: 'Ben', score: 0, hh: 'haha'}

3、判断属性是否在对象中

"hh" in person
true
"toString" in person	//"toString"在父类中
true

4、判断属性是否是对象自身拥有hasOwnProperty()

person.hasOwnProperty("hh")
true
person.hasOwnProperty("toString")
false

2.7 Map和Set

Map集合：

var map = new Map([['a',100],['b',80],['c',60]]);
console.log(map.get('a'));
console.log(map.set('d',20));
map.delete('a'); 删除

Map(3) {'b' => 80, 'c' => 60, 'd' => 20}

Set：无序不重复的集合

 var set = new Set([3,1,1,1,1]);

 set.add();  //增加
 set.delete();   //删除
 set.has();	//是否包含

2.8 iterator

遍历数组(var 或 let 都可以)

//通过for of / for in 遍历数组
var arr =[2,3,4,5];
for (var x of arr){
	console.log(x)
}
for (var x in arr){
	console.log(arr[x])
}

遍历Map

for (var x of map){
	console.log(x)
}

遍历Set

for (var x of set){
	console.log(x)
}

3、函数

3.1 定义函数

//abs----函数名
//第一种
function abs(x){
}
//第二种---匿名函数
var abs = function(x){
}

arguments 关键字
代表传递的参数是一个数组，可以遍历所有传递的参数

var abs = function (x){
            console.log("x->"+x);
            for (let i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }

rest
获取除第一个和第二个外的参数

 function abs1(a,b,c,...rest){
            console.log("a->"+a);
            console.log("b->"+b);
            console.log(rest);
        }           

3.2 变量的作用域、let、const详解

3.2.1 变量的作用域

• 假如变量在函数种定义，则只能在函数内部使用
• 内部函数可以访问外部函数的成员，反之则不行
• 如果两个函数使用相同的变量名，只要分别在函数内部使用，就不冲突
• 默认所有的全局变量，都自动绑定在windows下，x=windows.x

qj();
function qj(){
     var x = 11;
     function gj2(){
          var x = 22;
          console.log(x);
     }
      console.log(x)
      gj2();
}

JavaScript实际上只有一个全局作用域，任何变量（函数也可以作为变量），假设没有在函数作用范围内找到，就会向外查找，如果全局作用域下没找到，就会报错RefrenceError

var x ="xxx";
windows.alert(x);
var oa = windows.alert;

windowa.alert = function (){
}
//alert失效
windows.alert(123);

//恢复
windowa.alert = oa;
windows.alert(123);

规范
将自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

//唯一全局变量
var person={};
//定义全局变量
person.name = 'Ben';
person.add =function (a,b){
     return a+b;
}

3.2.2 局部作用域 let

let 解决局部作用域冲突问题

		//var
		function ooo(){
            for (var i = 0; i < 20; i++) {
                console.log(i);
            }
            console.log(i+1);
        }
        //let
        function ooo2(){
            for (let i = 0; i < 20; i++) {
                console.log(i);
            }
            console.log(i+1);//报错
        }

3.2.3 常量const

由于常量可以改变，所以引入const，const修饰的常量不能被修改，一般常量用大写字母命名

const PI = '3.14'

3.3 方法

this 指向当前调用的对象
apply

function getAge(){
}
var person={
	name:'Ben';
	age: getAge	//调用方法
}

getAge.apply(person,[]);
方法.apply(对象名,[]);	//指向特定对象

3.4 Date

基本使用：

		var now = new Date();
        now.getFullYear();  //年
        now.getMonth(); //月 0~11月
        now.getDate();  //日
        now.getHours(); //时
        now.getDay();   //星期几
        now.getMinutes();   //分
        now.getSeconds();   //秒

        now.getTime();  //时间戳 全世界统一 1970 1.1 00:00:00 到现在的毫秒数
        console.log(now);

3.5 JSON

在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示；
格式:

• 对象都用{}
• 数组都用[]
• 所有键值对 都是用key:value

JSON 和 JS 对象的转化

 // 对象转为json字符串--------{"name":"Ben","age":3,"sex":"男"}
    var jsonPerson = JSON.stringify(person);
    console.log(jsonPerson);
    // JSON 字符串转化为对象
    var obj = JSON.parse('{"name":"Ben","age":3,"sex":"男"}')	//里面双引号外面单引号
    console.log(obj);

4、面对对象编程

4.1 class 继承

• 定义一个学生类

//定义一个学生类
    class Student{
        constructor(name) {
            this.name = name;
        }
        hello(){
            alert('hello');
        }
    }

• 继承
  本质：查看对象原型

<script>
    //定义一个学生类
    class Student{
        constructor(name) {
            this.name = name;
        }
        hello(){
            alert('hello');
        }
    }
    class pupil extends Student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        myGrade(){
            alert('我是一名小学生')
        }
    }
    var xiaohong = new pupil("xiaohong",100);
</script>

5、操作BOM对象（重点）

B：浏览器
BOM：浏览器对象模型

window 代表浏览器窗口

window.innerHeight
850
window.innerWidth
150
window.outerHeight
938
window.outerWidth
737

window.navigator 封装浏览器信息

screen 代表屏幕尺寸

screen.width
1440
screen.height
960

location 代表当前页面的URL信息

ancestorOrigins: DOMStringList {length: 0}
assign: ƒ assign()	//放跳转的地址
hash: ""
host: "www.baidu.com"	//主机
hostname: "www.baidu.com"
href: "https://www.baidu.com/"	//指向的位置
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload: ƒ reload()	//重新加载方法-刷新网页
replace: ƒ replace()
search: ""
toString: ƒ toString()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
[[Prototype]]: Location

document 代表当前的页面，HTML DOM文档数

获取具体文档树节点

<dl id = "dom">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaSE</dd>
</dl>
<script>
    var dl = document.getElementById("dom");
</script>

获取cookie

document.cookie 

截取cookie原理：恶意人员获取cookie上传到其他服务器
服务器端可以设置cookie：httpOnly 防止暴露

history 获取浏览器历史记录

 history.back();	//后退
 history.forward();	//前进

6、操作DOM对象（重点）

DOM ，文档对象模型，这里的文档，主要是针对 HTML 和 XML 文档。对象模型，意味着使用对象的方式来描述文档。
我们编写的 HTML 代码在经过词法和语法分析之后，就会在内存中得到一个树形的对象模型，而我们则可以通过 JavaScript 等语言来查看、创建、删除和修改这个对象模型的结构。也可以这样说，DOM 的存在就是为了能够动态改变文档。

浏览器网页就是一个Dom树形结构

• 更新：更新Dom节点
• 遍历Dom节点：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点

要操作一个Dom节点，首先需要获得这个Dom节点

获得Dom节点

<script>
    //对应CSS选择器
    var f = document.getElementById('father'); //获取id
    var d1 = document.getElementsByTagName('h1');   //获取标签名
    var d2 = document.getElementById('p1'); //获取id
    var d3 = document.getElementsByClassName('p2'); //获取class

    var children = f.children;  //获取父节点下的所有子节点
    f.firstChild;   //获取第一个子节点
    f.lastChild;    //获取最后一个子节点
</script>

更新节点

//d2为获取到的节点id
d2.innerText='XXX'	//修改文本值
d2.innerHTML='<strong>XXX</strong>' //可以解析HTML的标签
//操作CSS 修改样式
d2.style.color='blue'	//颜色
d2.style.fontSize='200px'

删除节点

删除步骤：先获取父节点，再通过父节点删除自己

d2.parentElement	//获取父节点
f.removeChild(d2)	//f为父节点，d2为子节点

注意：删除多个节点时，是一个动态的过程，children是时刻变化的，每次删除的都是children[0]（老大死了老二继位 ）

f.removeChild(f.children[0])
f.removeChild(f.children[1])
f.removeChild(f.children[2])

插入节点

如果我们获得了一个空的dom，我们通过innerHTML就可以增加一个元素，但如果这个dom节点已经存在元素了，用innerHTML会产生覆盖

- 追加 father.appendChild()

//把已存在的节点移下来
<body>
<p id = "js">js</p>
<div id = "father">
    <h1>标题一</h1>
    <p id = "p1">p1</p>
    <p class = "p2">p2</p>
</div>
<script>
    //对应CSS选择器
    var father = document.getElementById('father'); //获取id
    var p = document.getElementById('js'); //获取id
</script>
</body>

• 创建一个新的标签实现

var newp =document.createElement('p');	//创建一个P标签
father.appendChild(newp)

• 插入节点，把新节点插入目标节点的前面

    //父节点.insertBefore(newNode,targetNode)
    father.insertBefore(js,p1);

7、操作表单（验证）

• 输入框

<script>
    var itext = document.getElementById('username');
</script>

itext.value	//获取输入信息
>'19207107'
itext.value="1232434"	//修改输入框的值

• 单选框、多选框

<p>
     <input type="radio" name = "sex"  id ="man">男
     <input type="radio" name = "sex"  id ="women">女
</p>
//对于单选框、多选框等固定的值，.value只能取到当前的值
manc.checked	//查看返回的结果
true
womenc.checked = true	//修改选择的结果

• 密码框

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id = "username" >
    </p>
    <p>
        <span>密码：</span><input type="password" id = "password" >
    </p>
    <button type="button" onclick="aaa()">提交</button>
</form>
<script>
    function aaa(){
        var user = document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(user.value);
        //md5不知道为什么报错
        pwd.value=md5(pwd.value);
        console.log(pwd.value);
    }
    
</script>

8、JQuery

公式： $(selector).action()

• 导入

<head>
    <meta charset="UTF-8">
    <title>导入</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<a href="" id="test" >点我</a>
<script>
    $('#test').click(function (){
        alert("hello");
    })
</script>
</body>

8.1 选择器

 //css中的选择器全能用
    $('p').click();    //标签选择器
    $('#id').click();    //id选择器
    $('.class').click();    //类选择器

JQuery 文档工具站

8.2 JQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        #divMove{
            width: 500px;
            height:500px;
            border:1px solid royalblue;
        }
    </style>
</head>
<body>
mouse:<span id = "mouseMove"></span>
<div id ="divMove">移动鼠标试试</div>

<script>
    $(function (){
       $('#divMove').mousemove(function (e){
           $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
       })
    });
</script>
</body>
</html>

8.3 JQuery操作Dom元素

操作Dom

<ul id ="test">
    <li class = "js">JavaScript</li>
    <li class = "python">python</li>
</ul>

$('#test').html();	//获得值
$('#test li[class=js]').text();		//获得值
>'JavaScript'
$('#test').html('');	//设置值
$('#test li[class=js]').text('12345');	//设置值

操作CSS
两种写法，有大括号用冒号，没有大括号用逗号

$('#test li[class=js]').css({"color":"red"})
$('#test li[class=js]').css("color","red")

元素的隐藏和显示
本质：display = none

$('#test li[class=js]').show()	//显示
$('#test li[class=js]').hide()	//隐藏