JaveScript笔记

数组

Array可以包含任意数据类型

var arr = [1,2,3,4,5,6];
arr[0]
arr[0] = 1

1、长度

arr.length

*给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

2、indexOf，通过元素获得下标索引

*字符串的"1"和数字的1是不一样的

3、slice() 截取Array的一部分，返回一个新的数组，类似于Srting中的substring

4、push()，pop()，尾部

push：压入到尾部
pop：弹出尾部的一个元素

5、unshift(),shift()，头部

unshift：压入到头部
shift：弹出头部的一个元素

6、排序sort()

7、元素顺序反转reverse()

8、concat()，不修改数组，只返回一个新的数组

9、连接符join

打印拼接的数组，使用特定字符链接

Map

var map = new Map([['tom',100],['jack',90],['hh',80]]);
var name = map.get('tom');//通过key获得value 
map.set('admin',1234567);//新增
map.delete("tom");//删除
遍历
let map = new Map([['tom',100],['jack',90],['hh',80]]);
for(let x of map){
    console.log(x);
}

set无序不重复的集合

set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素
遍历
let set = new Set([3,1,1,1,2,4,5]);
for(let x of set){
    console.log(x);
}

##函数调用

let person = {
    name:'sb',
    birth:2000,
    age: function () {
        let now = new Date().getFullYear();
        return now - this.birth;
    }
};

拆开上面的代码

function getAge(){
    let now = new Date().getFullYear();
    return now - this.birth;
}
let person = {
    name:'sb',
    birth:2000,
    age: getAge()
};

this是无法指向的，是默认指向调用它的那个对象

getAge().apply(yk,[]);//this指向了yk这个对象，参数为空

在js中可以控制this指向

内部对象

标准对象

number

string

boolean

object

funcation

undefined

1.Date

基本使用

let now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳
now.toLocaleDateString();//调用本地时间

2、JSON

任何js支持的类型都可以用JSON来表示

格式

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

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

//json字符串转化为对象，参数为json
let obj = JSON.parse('{"name": "yk","age":"3","sex":"男"}');
console.log(obj)

3、Ajax

• 原生的js写法，xhr异步请求

• jQuery封装好的方法 $("#name").ajax("")

• axios请求

面向对象编程

原型：

let user = {
    name: "yk",
    age: 3,
    sex: '男',
    run:function () {
        console.log(this.name + "run....");
    }
};
let xiaoMing = {
    name:"xiaoMing"
};
//小明的原型是user
xiaoMing.__proto__ = user;
xiaoMing.run();
let Bird = {
    fly:function () {
        console.log(this.name + "fly....");
    }
}
//小明的原型是变成鸟
xiaoMing.__proto__ = Bird;

class继承

class关键字，是在WS6引入的

1、定义一个类

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

2、继承

'use strict';

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

    hello(){
        alert('hello');
    }
}
class pupil extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert("I'm a pupil!");
    }
}
let xiaohong = new pupil("xiaohong",1);
xiaohong.myGrade();

操作BOM对象

js和浏览器的关系？

js的诞生就是为了能够让他能在浏览器中运行

BOM：浏览器对象模型

• IE 6~11
• Chrom
• Safari
• FireFox
• Opera

三方

• QQ浏览器
• 360浏览器

window

window代表浏览器窗口

window.innerHeight
2121
window.innerWidth
980
window.outerHeight
812
window.outerWidth
375

Navigator

Navigator，封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1'
navigator.userAgent
'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1'
navigator.platform
'Win32'

大多数时候不会使用navigator对象，因为会被人为修改

screen

screen.width
375
screen.height
812

location

location代表当前页面的URL信息

location
Location {ancestorOrigins: DOMStringList, href: 'https://www.baidu.com/', origin: 'https://www.baidu.com', protocol: 'https:', host: 'www.baidu.com'

document

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

document.title
'百度一下，你就知道'

获取具体文档树节点

<dl id="app">
    <dt>JAVA</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>
<script>
    var dl1 = document.getElementById("app");
</script>

获取cookie

document.cookie

服务器可以设置cookie:httpOnly

history

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

操作DOM对象

核心

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

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

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

<body>
<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

</body>
<script>
    let h1 = document.getElementsByTagName('h1');
    let p2 = document.getElementsByClassName("p2");
    let p1 = document.getElementById("p1");
    let father = document.getElementById("father");
    let children = father.children;//获取父节点下的所有子节点
</script>

这是原生代码，以后尽量使用jQuery

更新节点

<body>
    <div id="id1">

    </div>
</body>
<script>
    let id1 = document.getElementById("id1");

</script>

操作文本

• id1.innerText='123'修改文本的值
• id1.innerHTML='<strong>123</strong>'可以解析HTML文本

操作css

id1.stylr.color = 'yellow';//属性使用字符串
id1.stylr.fontSize = '20px';//驼峰命名
id1.stylr.padding = '2em';

删除节点

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

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    let self = document.getElementById("p1");
    let father = p1.parentElement;
    father.removeChild(self);

//删除是一个动态的过程
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们可以通过innerHTML 就可以增加一个元素了。但是这个Dom节点已经存在元素了，我们就不能这么做，会产生覆盖。

追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
</body>
<script>
    let js = document.getElementById("js");
    let list = document.getElementById("list");
	list.appendChild(js);//追加到后面
</script>

效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zINKEEJa-1636874651195)(C:\Users\叶初航\AppData\Roaming\Typora\typora-user-images\image-20211101194048379.png)]

创建一个新的标签实现插入

 <p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
</body>
<script>
    let js = document.getElementById("js");
    let list = document.getElementById("list");

    //通过js创建新的节点
    let newP = document.createElement('p');
    newP.id = "newP";
    newP.innerText = "hello world";
    list.append(newP);

    //创建一个新的节点(通过这种)
    let myScript = document.createElement("script");
    myScript.setAttribute('type','text/javascript');

    let myStyle = document.createElement('style');//创建一个空的style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:chartreuse}';//设置标签的内容

    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

insert

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
</body>
<script>
    let ee = document.getElementById('ee');
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    //要包含的节点.insertBefore(newNode,targetNode)
    list.insertBefore(js,ee);

</script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dnC3Vy8t-1636874651198)(C:\Users\叶初航\AppData\Roaming\Typora\typora-user-images\image-20211102105756205.png)]

操作表单（验证）

表单是是什么 form Dom树

• 文本框 text
• 下拉框 select
• 单选框 radio
• 多选框 checkbox
• 隐藏域 hidden
• 密码框 password
• ……

表单的目的：提交信息

获得要提交的信息

<form action="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>
    let input_text = document.getElementById('username');
    let boy_radio = document.getElementById('boy');
    let girl_radio = document.getElementById('girl');

    //得到输入框的值
    input_text.value;
    //修改输入框的值
    input_text.value = '123';

    //对于单选框、多选框等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;//查看返回的结果是否为true,如果为true，则被选中
    girl_radio.checked = true;//赋值
</script>

提交表单

JQuery

jQuery库，里面存了大量的js函数

获取JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    cdn引入-->
<script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
</head>
<body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    源码下载引入-->
    <script src="lib/jquery-3.6.0.js"> </script>
</head>
<body>

公式 $(selector).action

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

选择器

    //原生js，选择器少，不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //jQuery
    $('p').click(); //标签选择器
    $('#id1').click();//id选择器
    $('.class1').click();//类选择器

文档工具站 jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

事件

鼠标事件，键盘事件，其他事件

    $('.class1').mousedown();//按下
    $('.class1').mouseenter();//当鼠标指针进入（穿过）元素时
    $('.class1').mouseleave();//离开
    $('.class1').mousemove();//移动
    $('.class1').mouseout();//按下
    $('.class1').mouseover();//当鼠标指针位于元素上方时
    $('.class1').mouseup();//松开鼠标

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    cdn引入-->
<!--    <script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>-->
    <script src="lib/jquery-3.6.0.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>

操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//获得值

css操作

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

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

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