JavaScript

1.引入JavaScript

1.内部标签

在html的头部导入
<!--    script-->
    <script>
        alert('hello');
    </script>

2.外部引入

test.js内容：

alert('hello')

在html头部引入script

<script src="js/hh.js"></script>

2.基本语法

<!--    JavaScript严格区分大小写-->
    <script>
        //1.定义变量    变量类型    变量名 = 变量值
        var num = 1;
        //弹出这个数字
        alert(num);
        //2.条件控制
        //if语句和java的语法一样

        //在浏览器的控制台打印变量：console.log(num)
        
    </script>

3.数据类型

• number
  • js不区分小数和整数，可以表示以下种类的数字

123//整数123
123.1//浮点数
1.12e3//科学计数法
-99//负数
NaN//不是个数字
Infinity//表示无限大

• 字符串
  • ‘aa’或者”aa”
• 布尔值
  • true和false
• 逻辑运算
  • &&：两个都是真，结果为真
  • ||：一个为真，结果为真
  • ！：非
• 比较运算符
  • =：普通赋值
  • ==：等于（类型不一样，值一样，也会为true）所以在js中别用
  • ===：类型和值都得一样

注：NaN与所有数值都不相等，包括它自己

• null和undefined

  • null：空
  • undefined：未定义

• 数组

  • var arr = [1,a,‘hh’]:数组内的数据类型没有规定

• 对象

  • 对象是大括号

var person = {
    name : "hello",
    tags:['nn','aa']
}

• 取对象的数据

  • 可以直接在控制台拿到对象的数据person，如person.name

字符串类型

1.正常字符串使用单引号或双引号包裹

2.注意转义字符\

3.多行字符串编写“:

var msg = `
aa
bb
cc`

4.模板字符串

let name = "hh"
let age = 3

let msg = nihao,${name}//通过el表达式取变量的值

5.字符串长度

str.length

6.大小写转换

//注意这里是方法不是属性
str.toUpperCase

7.str.indexOf(‘x’)

获取字符x在字符串中的下标

8.substring

截取字符串：str.substring(1)//从第一个字符截取到最后一个字符；str.substring(1,2)//截取[1,2)位置上的字符

数组

数组可以包含任意的数据类型

//定义数组
var arr = [1,2,3]

1.长度

加入给arr.length赋值，数组大小就会发生变化，赋值过小元素会丢失，赋值过大则没有元素的的下标显示undefined

2.indexOf，通过元素获得下标索引，如果是arr.indexOf(1)则表示获取1的下标，如果是arr.indexOf(“1”)则表示获取元素为字符串”1″的下标

3.sice():截取Array的一部分，返回一个新的数组，用法和substring

4.push（在数组尾部添加元素），pop（弹出尾部的元素）

5.unshift（在数组头部添加元素），shift（在数组头部弹出元素）

6.sort():给数组排序

7.元素反转reverse()

8.concat()数组拼接 注：不会修改数组，只是会返回一个新数组

9.连接符join

如果arr=[1,2,3]

打印拼接完的数组，或者使用特定字符串拼接：arr.join(‘-’) –> 1-2-3

10.多维数组

arr = [[1,2],[“1”,“2”]] : 2*2的数组

对象

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

js中对象：都是由{…}表示一个对象，用键值对描述对象，属性之间用,隔开，最后一个属性不加逗号。

• 对象赋值

person.name = "hello"

• 动态删减属性

delete person.name

• 动态增加属性，直接给新的属性赋值

person.hh = "hh"//添加属性hh

• 判断属性值或者方法是否在这个对象中：xxx in xxx

'name' in person//true
'toStrng' in person//true

• 判断属性值是否是这个对象拥有的

person.hasOwnProperty('toString')//false
person.hasOwnProperty('name')//true

流程控制

• if判断

（和java一毛一样）

• 循环
  • while和for循环，内部的变量最好使用let来定义，let定义的是局部变量，出了循环就失效了。
  • foreach循环，arr.forEach(function(value){console.log(value)})
  • forIn循环，for(var index in arr){}:每次循环会得到一个index下标，要去取值则要使用arr[index]
  • forOf循环，for(var value ofarr){}:每次循环会得到一个数组的值，遍历Map和Set只能用forOf这个不能用forin

Map和Set

• Map：

var map = new Map([['a',10],['b',20]]);
map.get('a');//就能获取到10
map.set('c',30)//添加键值对
map.delete('1')//删除键值对

• Set：无序不重复集合

var set = new Set([3,1,1,1]);//set集合里面只有两个元素3和1
set.add(2)//添加
set.delete(1)//删除
set.has(1)//是否包含1，返回true

严格模式

因为平常创建的变量都是默认为全局变量

<!--    'use strict':严格检查模式，预防JavaScript的随意性导致产生的一些问题
        必须要写在第一行，局部变量的话就不用var定义改用let-->
    <script>
    'use strict';
    let i = 1;
    </script>

4.函数

定义函数

• 定义方式一：

function 函数名(参数){
   函数体
}

一旦执行到return代表函数结束，直接返回结果!

如果没有执行return，函数执行完也会返回结果，也就是undefined

• 定义方式二：

var 函数名 = function (参数) {
   函数体
}

• 调用函数

函数名(参数)
//可以传入任意参数，不传都行
所有可以手动抛出异常：
 if (typeof x !== "number"){//传入参数类型不为数字
        throw 'Not a Number'; 
    }

• arguments关键字

arguments表示一个数组，里面存着所有的参数

var abs = function (x){

    for (var i = 0;i<arguments.length;i++){
        console.log(arguments[i]);//取出参数
    }

}

• rest
  • 获取除了已经定义的参数之外的所有参数
  • rest参数只能写在最后面，必须用**…**标识

function abc(a,b,...rest){
     console.log("a=>"+a);
     console.log("b=>"+b);
     console.log(rest);
 }

//调用
abc(1,2,3,4,5)
//则a=1，b=2，rest=3,4,5

5.函数的作用域

在JavaScript中，var定义变量实际是有作用域的

• 假设在函数体中声明，则在函数外不可以使用（一定要实现的话可以研究一下闭包）

function a() {
    var x = 1;
    x = x + 1;
}
x = x +2;// Uncaught ReferenceError: x is not defined

• 如果两个函数使用了相同的变量名，只要在函数内部就不冲突

function a() {
    var x = 1;
    x = x + 1;
}

function b() {
    var x = 'a';
    x =x + 1;
}

• 内部函数可以访问外部函数的成员，反之则不行

function c() {
    var x = 1;

    function d() {
        var y = x + 1;
    }
    var z = y + 1;//外部函数不能访问内部变量Uncaught ReferenceError: y is not defined
}

• 假设内部函数和外部函数的变量重名

function c() {
    var x = 1;

    function d() {
        var x = 'a';
        console.log('inner:'+x);//outer:a
    }
    console.log('outer:'+x);//outer:1
    d();
}
c();

假设在JavaScript中函数查找变量从自身函数开始，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

• 提升变量的作用域

function a() {
    var x = 'x' +y; //xundefined
    console.log(x);
    var y = "y";
}
a();

结果：//xundefined

说明：JavaScript执行引擎，自动提升了y的声明，但是不会提升y变量的赋值；

所以一般会把所有的变量定义都放在函数的头部。

• 全局函数

var x = 'xxx';
alert(x); 
alert(window.x); //默认所有的全局变量，都会自动绑定在window对象下

alert()这个函数本身也是一个window对象

var x = 'xxx';

window.alert(x);

var old_alert= window.alert;

//old_alert(x); 使用old_alert(x)也可以成功输出

window.alert(123);

window.alert = function () {

}
window.alert(123); //发现alert失效了

window.alert =  old_alert;//恢复

window.alert(456);

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

• 由于我们所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，就会发生冲突，这时解决的方法就是定义唯一的全局变量

var jackApp = {};//唯一全局变量

jackApp.name = 'yangdi';//定义全局变量

jackApp.add = function (a,b) {
    return a + b;
}

• 局部作用域 let

function aaa() {
    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i+1);//101 发现问题i出了for循环的作用域还可以使用
}

• 常量 const
  • 在ES6之前，怎么定义常量：只有全部用大写字母命名的变量就是常量；
  • 引入了关键字const

6.方法

定义方法

• 方法就是把函数放进方法内部，对象里只有属性和方法。

var zhangsan = {
    name : '张三',
    birth : 2000,
    age : function () {
        let now = new Date().getFullYear();
        return now - this.birth;
    }
}
//属性
zhangsan.name
//方法，一定要带（）
zhangsan.age()

拆开写法：

function getAge() {
    let now = new Date().getFullYear();
    return now - this.birth;
}

var zhangsan = {
    name : '张三',
    birth : 2000,
    age : getAge()
}
//zhangsan.age() 可以·
//getAge()  NaN window，因为函数里面的this无法指向

在JavaScript中可以使用apply控制this指向

function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}

var zhangsan = {
    name : '张三',
    birth : 2000,
    age : getAge
}
zhangsan.age();

getAge.apply(zhangsan,[]); //this指向了zhangsan，参数为空

7.Date

常用方法：

var data = new Date();
data.getFullYear();//年份
data.getMonth();//月份 0~11
data.getDate();//天
data.getDay();//星期几
data.getHours();//小时
data.getMinutes();//分钟
data.getSeconds();//秒
data.getTime();//时间戳  全世界统一，从1970.1.1  0：00：00开始
console.log(data = new Date(1616589902676));//转为标准时间

8.Json

• JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript中一切皆为对象，任何JavaScript支持的类型都可以用JSON表示

格式：

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

var user = {
    name:'zhangsan',
    age:3,
    sex:'男'
}
//对象转化为json字符串  {"name":"zhangsan","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);

console.log(jsonUser);
//转换字符串为对象
var obj = JSON.parse('{"name":"zhangsan","age":3,"sex":"男"}');
//{name: "zhangsan", age: 3, sex: "男"}

JSON和对象的区别

var obj = {a:‘hello’,b:‘hellob’};

var json = ‘{“a”：“hello”,“b”:“hellob”}’

9.面向对象编程

• 类：模板
• 对象：具体的实例

var xiaoming = {
       name:"xaioming",
       age : 3,
        run : function () {
           console.log(this.name+"  run....")
       }
   }

   var xiaozhang = {
       name: "xiaozhang"
   }
   //原型对象
   xiaozhang.__proto__ = xiaoming; //小张的原型是小明

   var bird = {
       fly : function () {
           console.log(this.name+"   fly....")
       }
   }

   //小张的原型是bird
xiaozhang.__proto__ = bird;

• class继承

1.定义一个类，属性、方法

//在<script>标签中定义一个学生的类
class Student{
    constructor(name) {//有参构造方法
        this.name = name;
    }
    hello (){
        alert("hello");
    }
}

var xaioming = new Student("xiaoming");
var xaiohong = new Student("xiaohong");
xaioming.hello();

2.继承类

class Student{
    constructor(name) {
        this.name = name;
    }
    hello (){
        alert("hello");
    }
}

class xiaoStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
    MYGrade(){
        alert("我是一名小学生")
    }
}


var xiaoming = new Student("xiaoming");
var xiaohong = new xiaoStudent("xiaohong,1");
xiaoming.hello();

查看对象原型

10.操作BOM对象

BOM：浏览器对象模型

window

window.alert("坚持")//弹窗弹出坚持
undefined
window.innerHeight
760
window.innerWidth
491
window.outerHeight
864
window.outerWidth
1536
//通过window获得浏览器窗口大小

Navigator

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36"
navigator.platform
"Win32"

screen

screen.width
1920
screen.height
1080

location

location代表当前页面的URL信息

location.host   //"www.baidu.com"  主机
location.href   //"https://www.baidu.com/"   当前指向的位置
location.protocol   //"https:"   协议
location.reload()   //刷新网页
//设置新的地址
location.assign('https://www.kuangstudy.com/')

document

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

document.title//获取网页标题
"百度一下，你就知道"
document.title=('无敌')//修改网页标题
"无敌"

• 获取具体的文档树节点

<dl id="app">
    <dt>javaSE</dt>
    <dt>javaEE</dt>
    <dt>javaME</dt>
</dl>

<script>
    var dl =  document.getElementById('app');
</script>

history

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

11.操作DOM对象

核心

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

要操作一个Dom节点，就必须要先获得这个Dom节点

获得Dom节点

<body>

    <div id="father">
        <h1>标题一</h1>
        <p id = "p1">p1</p>
        <p class = "p2">p2</p>
    </div>
    
    <script>
        //对应css选择器
        var father = document.getElementById('father');
        var h = document.getElementsByTagName('h1');
        var p1 = document.getElementById('p1');
        var p2 = document.getElementsByClassName('p2');
    
        var childrens = father.children;//获取父节点下的所有子节点
    </script>

</body>

更新节点

1.先获取节点：

<body>
    <div id="id1">
        <!--一个空标签-->
    </div>

    <script>
        var id1 = document.getElementById('id1');
    </script>
</body>

2.更新节点：

id1.innerText='1233'
> "1233"
id1.innerHTML='<strong>123</strong>  <!--可以解析html文本标签-->
"<strong>123</strong>"

3.进行css操作

id1.style.color = 'yellow';
id1.style.fontsize = '20px';

删除节点

1.先获取父节点

var father = 待删节点.parentElement;

2.通过父节点删除自己

father.removeChild(待删节点名称);
<!--删除节点是一个动态变化的，相当于是栈，删掉一个，后面的会补到前面的节点中去-->
father.removeChild(father.children[0]);

插入节点

我们获得了某个 Dom 节点，假设这个 Dom 节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是这个 Dom 节点已经存在元素了，会产生覆盖，所以要通过追加操作

<body>
    <p id="js">JavaScript</p><!--现在我们想把这个标签添加到 div中-->
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>

    <script>
        var js = document.getElementById('js');//获取要追加的节点
        var list = document.getElementById('list');//获取要插入到的节点中

        list.appendChild(js);//将要追加的节点插入到list节点后面
    </script>
</body>

创建节点

 var newP = document.createElement('p');//创建一个p标签
    newP.id = 'newP';//设置标签id
    newP.innerText = 'Hello,Kuangshen';//设置标签内容

   //创建一个标签节点
    var myScript = document.createElement('script');//添加script标签
    myScript.setAttribute('type','text/javascript');//原本没有type这个属性，所以可以添加这个属性
//获取的节点就是<script type='text/javascript'></script>

• 插入到节点前面

<body>
    <!--现在我们想把这个JavaScript添加到div中JavaEE的前面-->
    <p id="js">JavaScript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>

    <script>
        var ee = document.getElementById('ee');
        var js = document.getElementById('js');
        var list = document.getElementById('list');
        //要包含的节点.insertBefore(newNode,targetNode)
        list.insertBefore(js,ee);
    </script>
</body>

12.操作表单

表单操作

<body>
    <form method = "post">
        <p>
            <span>用户名：</span><input type="text" id = "username" />
        </p>
        <!--多选框的值就是定义好的value-->
        <p>
            <span>性别：</span>
            <input type = "radio" name = "sex" value = "man" id = "boy"/>男
            <input type = "radio" name = "sex" value = "woman" id = "girl"/>女
        </p>
    </form>
    <script>
        var input_text = document.getElementById("username");
        //修改输入框的值
        input_text.value  = "value";
        
        //获取多选框的按钮
        var boy_radio = document.getElementById("boy");
        var girl_radio = document.getElementById("girl");
         //对于单选框、多选框等等固定的值，boy_radio.value只能取到当前的值
        var boySelected = boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中。
        girl_radio.checked = true;//赋值

        //打印输入框的值
        console.log(input_text.value);
       
    </script>
</body>

提交表单

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <!--MD5加密工具类-->
    <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">

    </script>
</head>
<body>
<!--表达绑定提交事件
    οnsubmit= 绑定一个提交检测的函数，true，false
    将这个结果返回给表单，使用onsubmit接收

    action表示提交到哪里,#表示当前页
-->
    <form action = "#" method = "post" onsubmit = "return aaa()">
        <p>
            <span>用户名：</span>
            <input type="text" id = "username" name = "username"/>
        </p>
        <p>
            <span>密码：</span>
            <input type="password" id = "password" />
        </p>
		//隐藏起来，对原输入没有影响，但是提高表单的安全性
        <input type = "hidden" id = "md5-password" name = "password">

        <!--绑定事件 onclick 被点击-->
        <button type = "submit" onclick="aaa()">提交</button>

    </form>

    <script>
        function aaa(){
            alert(1);
            var username = document.getElementById("username");
            var pwd = document.getElementById("password");
            var md5pwd = document.getElementById("md5-password");
            //MD5算法：对输入的密码进行加密
            //pwd.value = md5(pwd.value);
            md5pwd.value = md5(pwd.value);
            //可以校验判断表单内容，true就是通过提交，false就是阻止提交
            return true;
        }
    </script>

</body>
</html>

13.JQuery

新建一个jQuer的测试页面

就代表jQuery，()内是选择器，公式：(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入jQuery-->
    <script src="lib/jquery-3.6.1.js"></script>
</head>
<body>

    <a href="" id="test-jquery">点我</a>
    <script>
        //选择器就是css选择器，#+id
        $('#test-jquery').click(function(){
            alert('hello,jQuery!');
        });
    </script>

</body>
</html>

选择器

//原生js，选择器少，麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();

//jQuery css中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click;//class选择器

事件

​ 鼠标事件、键盘事件、其他事件

• mousedown()(jQuery)—-按下
• mouseenter()(jQuery)
• mouseleave()(jQuery)
• mousemove()(jQuery)—-移动
• mouseout()(jQuery)
• mouseover()(jQuery)
• mouseup()(jQuery)

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.1.js"></script>
    <style>
        #divMove{
            width:500px;
            height:500px;
            border:1px solid red;
        }
    </style>
</head>
<body>
	<!--要求：获取鼠标当前的一个坐标-->
	mouse：<span id = "mouseMove"></span>
	<div id = "divMove">
	    在这里移动鼠标试试
	</div>
	<script>
	    //当网页元素加载完毕之后，响应事件
	    //$(document).ready(function(){})
	    $(function(){
	        $('#divMove').mousemove(function(e){
	            $('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)
	        })
	    });
	</script>
</body>
</html>

14.操作DOM

• 节点文本操作

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
    <ul id="test-ul">
        <li class="js">JavaScript</li>
        <li name="python">Python</li>
    </ul>

    <script>
        //document.getElementById('');原本得这样写，太麻烦
        //用JQuery
        $('#test-ul li[name=python]').text();//获得值，li后面[]中可以通过部分属性去绑定对应的标签
        $('#test-ul li[name=python]').text('设置值');//设置值
        $('#test-ul').html();//获得值，.html则里面可以用html的语法
        $('#test-ul').html('<strong>123</strong>');//设置值

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

• 操作css

$('#test-ul li[name=python]').css({"color","red"});

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

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();