标签：efi   only   你好   添加元素   hash   path   document   remove   birt   

JavaScript

严格检查模式strict

• ‘use strict‘ ; ----严格检查模式，预防JavaScript的随意性导致产生的一些问题，放在script标签的第一行
• 局部变量建议使用let去定义

数据类型

• 字符串

\u4e2d  \u####  unicode字符
\x41            Ascll字符

• 多行字符串编写

//tab 上面 esc下面

输出：
你好呀
sss
hello

• 模板字符串

• 字符串的不可变性

数组

• Array可以包含任意的数据类型

var arr = [1,2,3,4,"ss"]

1. 长度：arr.length 给数组赋值，数组大小会发生改变
2. indexOf，通过元素获得数组下标索引，字符串"1"和数字1是不同的
3. slice（）：截取Array的一部分，返回一个新数组，类似于String中的substring
4. push（），pop（） 尾部
5. unshift（），shift（） 头部
6. 排序sort（）
7. 元素反转arr.reverse（）
8. concat（）：数组尾部添加元素，但是不改变原数组，只是返回一个新的数组
9. 连接符arr.join（‘-’）：打印拼接数组，使用特定的字符串连接
10. 多维数组

对象

若干个键值对

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

• 动态的删除属性，通过delete 对象.属性

• 判断一个属性是否在这个对象中

‘age‘ in person
true
//由于person继承了Object类，所以有toString属性
‘toString‘ in person
true

• 判断一个属性是否是这个对象自身拥有的用hasOwnProperty（）

person.hasOwnProperty(‘toString‘)
false
person.hasOwnProperty(‘age‘)
true

iterator

1. 遍历数组

//通过for of 遍历值，通过for in 遍历下标

注意：这里不能把name打印出来

2. 遍历map

3. 遍历set

函数

定义函数方式一

function abs(x) {
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

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

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

定义函数方式二

var abs = function(x) {
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

function(x) {...}这是一个匿名函数。

arguments

arguments是一个JS免费赠送的关键字获得入参；

rest

function aaa(a,b,...rest) {
            console.log(a);
            console.log(b);
            console.log(rest);
        }

rest参数只能写在最后面，必须用...标识

变量

提升变量的作用域

function qj(){
    var x = "x" + y;
    console.log(x);
    var y = "y";
}

结果：xundefined

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

全局对象window

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

alert（）这个函数本身也是一个window变量

规范

由于我们所有的全局变量都会绑定到window上。如果不同的js文件使用相同的全局变量，冲突~>如何能够减少冲突？

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

//定义全局变量
kuangApp.name = "kaungshen";
kuangApp.add = function (a,b) {
    return a + b;
}

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

局部作用域let

function aaa() {
    for (var i = 0; i 

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

function aaa() {
    for (let i = 0; i 

apply

在js中可以控制this指向！

//kuangshen.name
//方法一定要带括号()
//kuangshen.age()   ok
//getAge   NaN      window

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

apply

//getAge.apply(kuangshen,[])
//21

内部对象

标准对象：

typeof 123
"number"
typeof ‘123‘
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

JSON

• Z在JavaScript一切结尾对象，任何js支持的类型都可以用JSON来表示；number，string。。。

• 格式：

  对象都用{}

  数组都用[]

  所有的键值对都是用key-value

• JSON字符串和JS对象的转化

//JSON字符串(JSON字符串的键都为字符串)转化为对象
var obj = JSON.parse(‘{"name":"niyun","age":26}‘);

//对象转换为JSON字符串（JSON字符串的键都变为字符串）
var user = {
    name:"niyun",
    age:26
};
var jsonUser = JSON.stringify(user);

Ajax

• 原生的js写法 xhr异步请求
• jQuery封装好的方法 $("#name").ajax("")
• axios请求

面向对象原型编程

原型：

var Student = {
    name:"qingjiang",
    age:3,
    run:function () {
        console.log(this.name+" is running!!!");
    }
};
var xiaoming = {
    name:"xiaoming",
    age:3
};
var bird = {

    fly: function () {
        console.log(this.name + " is fly..")

    }
};
xiaoming["__proto__"]=bird;
// xiaoming["__proto__"]=Student;
// xiaoming.__proto__=Student;

通过__proto__实现继承

class继承

class关键字，在ES6之后引入的

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

class Student {
    constructor(name) {
        this.name = name;
    };
    hello(){
        alert(this.name + ": 你好啊");
    }
}
var niyun = new Student("倪运");

2. 继承

class Student {
    constructor(name) {
        this.name = name;
    };
    hello(){
        alert(this.name + ": 你好啊");
    }
}
var niyun = new Student("倪运");

class Xiaohong extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
}
var xiaohong = new Xiaohong("小红",100);

操作DOM对象（重点）

浏览器介绍

JavaScript和浏览器的关系？

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

BOM：浏览器对象模型

• IE 6~11
• Chrome
• Safari
• Firefox

三方

• QQ浏览器
• 360浏览器

window

window代表窗口

window.innerHeight
817
window.innerWidth
628
window.innerWidth
407
window.outerHeight
920
大家可以调整浏览器窗口试试。。。

Navigator

Navigator,封装了浏览器的信息

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

大多数时候，我们不会使用navigator对象，因为会被人为修改，不建议使用这些属性来判断代码和编写代码

screen

代表屏幕尺寸

screen.width
1440
screen.height
960

location

location代表当前页面的URL信息

location
Location {ancestorOrigins: DOMStringList, href: "https://www.baidu.com/", origin: "https://www.baidu.com", protocol: "https:", host: "www.baidu.com", …}
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
__proto__: Location

location.assign(‘https://blog.kuangstudy.com‘)//所有访问百度的都会调到这个页面

document

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

document.title
"百度一下，你就知道"
document.title="kuangshen"
"kuangshen"

获取具体的文档树节点

javaSE
javaEE
java

获取cookies

document.cookies

劫持cookies原理

服务器端可以设置cookies：httpOnly

history

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

操作DOM对象（重点）

DOM:文档对象模型

核心

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

• 更新：
• 遍历
• 删除
• 添加

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

获得DOM节点

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName
father.children
father.firstchild
father.lastchild

更新节点

id1.innerText = ‘345‘
id1.innerHTML = ‘123‘

操作js

id1.style.color = ‘yellow‘;//属性用字符串包裹
id1.style.fontsize = ‘100px‘;//中划线用驼峰规则代替

删除节点

删除节点的步骤：首先获取父节点，再删除自己

var self = document.getElementById(‘p1‘);
var father = p1.parentElement;
father.removeChild(self)

删除多个节点的时候，children是时刻变化的

插入节点

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以了，但是这个DOM节点已经存在元素了，不想删除原来的，通过追加

    
javascript

    
JavasSE
JavaEE
JavaME

list.appendChild(js)； ----将id为js的p标签剪切到id为list的div标签的最下面

newP.setAttribute("id","newP")//万能设置属性
list.insertBefore(js,ee);//在id为ee的节点前面插入id为js的节点

操作表单

MD5工具类：

提交表单，md5加密密码，表单优化

    



            

                用户名：
            

                密码：
            

                
            

                提交
            
        
        

jQuery

    



        点我
        

文档工具站：jQuery文档工具站

JavaScript

标签：efi   only   你好   添加元素   hash   path   document   remove   birt   

原文地址：https://www.cnblogs.com/yunni/p/14619923.html