JavaScript

2021-06-05 21:04

阅读:337

YPE html>

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

JavaScript

严格检查模式strict

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


Title

数据类型

  • 字符串
\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打印出来
  1. 遍历map
  1. 遍历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("倪运");
  1. 继承
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加密密码,表单优化



    

form

用户名:

密码:

jQuery



    

Title

        点我
        

文档工具站:jQuery文档工具站

JavaScript

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

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


评论


亲,登录后才可以留言!