JavaScript

目录

JavaScript

引入JavaScript

  • script标签内，可以放在head或body最底部(推荐)
  • 外部引入，指定script的src属性，type默认js

基本语法

  1. 定义变量：

    var num = 1;
    • 在浏览器打印变量：进入Console面板，console.log(variable);
    • 在浏览器调试：进入Sources面板，打断点
    • ES6中，局部变量建议用let定义

  2. 条件控制：与Java相同

  3. 数据类型

    • number：整数、浮点数、科学计数法、NaN(不是数字)、Infinity

      • 浮点数存在精度损失，使用Math.abs(a-b)<0.00001

    • 字符串：单引号、双引号、转义字符

    • 布尔值：true、false

      • 逻辑运算与java相同
      • 比较运算符，值一样，=类型一样值一样，尽量使用三个等于比较
      • NaN与所有数值不相等，包括自己，只能通过isNaN()来判断

    • 数组：

      • var arr = [1,2,3,'hello',null,true]

      • null是正常值，越界是undefined

    • 对象：

      • var person = {
    name: "name",
    age: 3,
    tags: ['js', 'java', '...']
}
    1. 严格检查模式：在第一行加上'use strict'，预防js的随意性导致的一些问题

数据类型

字符串

  • 正常字符串使用单引号或双引号包裹
  • 注意转义字符'\'
  • 多行字符串编写：用``包裹
  • 模板字符串：``中用${variable}表示字符串变量
  • 字符串长度：str.length
  • 可以通过下标取字符
  • 字符串不可变
  • 其他方法：toUpperCase()、indexOf()、subString()等

数组

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

  • 可以通过下标取值

  • 长度：arr.length

    • 给其赋值，数组大小就会发生变化，超出部分undefined

  • indexOf()：通过元素获取下标索引

  • slice()：数组切片，左闭右开

  • push()、pop()：尾部压入弹出

  • unshift()、shift()：头部压入弹出

  • sort()：排序

  • reverse()：反转

  • concat()：返回拼接后的新数组

  • join()：打印数组元素，使用特定字符串连接

  • fill()：填满同种元素

  • 多维数组：[[1,2],[3,4],[5,6]]

对象

  • 若干键值对

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

  • 属性名均为字符串

  • 调用方式：对象名.属性名或对象名['属性名']

  • 使用不存在的属性为undefined

  • 动态删减属性：delete 对象名.属性名

  • 动态添加属性：直接给新属性赋值

  • 判断属性值是否在对象中：'属性名' in 对象名，继承依然存在

  • 判断属性是否属于对象自身：hasOwnProperty()

循环

  • for(let x in arr)：取下标
  • for(let x of arr)：取值
  • 其余与java类似

Map和Set

Map

var map = new Map([['tom',100],['java',90],['haha',80]]);
  • 键值对
  • get()、set()、delete()

Set

var set = new Set([...]);
  • 去重
  • add()、delete()、has()

函数

function 函数名(参数){}
var 函数名 = function(参数){}
  • arguments获取所有参数
  • rest获取定义外参数，定义时：function func(a,b,...rest)

方法

var object = {
    func: function(){
        
    }
}
  • 函数的apply方法，指定this的指向和参数

JSON

  • 任何js支持的类型都可以用JSON来表示
    • 对象用{}
    • 数组用[]
    • 键值对对key: value，key为字符串
  • 对象转换为json字符串：JSON.stringify(obj)
  • json字符串转换为对象：JSON.parse('...')

面向对象

  • 原型继承：son.__proto__ = father

  • class继承：

    • class Student{
    constructor(name){
        this.name = name;
    }
    hello(){}
}
var xiaoming = new Student("xiaoming");
class Xiaoxuesheng extends Student{
    constructor(name){
        super(name);
        this.grade = grade;
    }
    ...
}

操作BOM对象

  • window代表浏览器窗口
  • Navigator封装了浏览器的信息
  • screen获取屏幕信息
  • location代表当前页面的URL信息
    • host、href、protocol、reload()、assign（设置新地址）
  • document代表当前页面，HTML DOM文档树
  • history：back()、forward()

操作DOM对象

获取节点

  • 获取节点：getElementsById()、getElementsByClassName()、getElementsByTagName()
  • 获取子节点：father.children、firstChild、lastChild

更新节点

操作文本

  • innerText：修改文本值
  • innerHTML：修改内部HTML标签

操作CSS

  • style属性：修改的属性值使用字符串包裹，属性名使用驼峰命名

删除节点

  • 通过父节点删除子节点
  • removeChild

插入节点

  • appendChild()
  • insertBefore

创建节点

  • createElement
  • setAttribute设置属性

操作表单

  • value属性表示输入框的值
  • checked表示是否选中

提交表单

  • 绑定事件onclick="funtionName"
  • onsubmit="return function()"绑定提交检测函数

jQuery

  • 官网下载js文件

  • 通过cdn引用

    • <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

  • 公式：$(selector).action()

  • 中文文档

  • $(function(){})：与$(document).ready(funtion(){})相同

posted @ 2021-01-22 14:29  一天到晚睡觉的鱼  阅读(79)  评论(0)    收藏  举报