JavaScript

目录

• Introduction
  • 注释
  • 引入方式
• 变量
  • 变量声明
  • 变量命名规范
  • 声明常量
• 数据类型
  • 字符串
    • 方法
    • 多行文本
    • 占位符
  • 数组
    • 方法
      • forEach
      • splice
      • map
      • 遍历元素
• 运算符
  • 算术运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符
• 流程控制
  • if-else if-else
  • switch
  • for
  • while
  • 三元运算
• 函数
  • 匿名函数
  • 箭头函数
  • 函数的全局变量和局部变量
• 对象
  • 自定义对象
  • JSON对象
    • 方法
  • RegExp对象
  • Math对象
• 事件
  • 改变元素属性
  • 提取行间事件
    • 为元素添加事件
    • window.onload
    • getElementsByTagName
    • 全选
    • this
• 事件
  • 绑定方式
  • 改变元素属性
    • window.onload
• BOM
  • window对象
  • history对象
  • location对象
  • 弹出框
  • 计时器相关
• DOM
  • 标签查找
    • 直接查找
    • 间接查找
  • 节点操作
    • 创建节点
    • 添加节点
    • 删除节点
    • 节点属性
      • 设置节点属性
      • 删除属性
    • 节点value
    • class操作
    • css操作
• jQuery
  • jQuery对象
  • 查找标签

Introduction

注释

// 单行注释
/*
   多行注释1
   多行注释2
 */

代码行以;结束

引入方式

// script 标签内直接书写
// 通过script标签src属性添加
<script src='xxxx.js'></script>

事件：用户操作

onclick='alter(xxx);'
onmouserover='div1.style.display=bock'
document.getElementById

变量

变量声明

var # 声明全局有效的变量
let # 声明局部有效， ES6新语法

变量命名规范

// 数字 字母 下划线 $ 组成
// 推荐使用驼峰体

声明常量

const

数据类型

• 数值类型
• 字符串
• 对象
  • 数组 []
  • 自定义对象 {}
• 布尔值
• undefined
• symbol

注：用typeof 查看数据类型

字符串

方法

.length
.concat(value,)
.trim
.trimLeft
.substring(from, to)
.slice(start, end)
.charAt(n)
.indexOf(substring, start)
.toLowerCase()
.toUpperCase()
.split()

多行文本

` 多行1
  多行2
`

占位符

var name = 'test';
`hello ${name}?`;

数组

var a = ["abc", 123]

方法

.length
.unshift(ele) # 头部插入元素
.push(eld) # 尾部插入元素
.concat(val,,..)
.pop()
.shift()
.slice()
.splice() # 删除元素，并向数组添加新元素
.reverse()
.sort()

forEach

arr1.forEach(function(value, index){
console.log(value, index)
})

splice

arr1.splice(index, howmany, add1, add2, ..)

map

var arr1 = [1, 2, 3]
arr1.map(function(value){
return value + 1
})

遍历元素

for (var i=0; i < arr1.length; i++){
console.log(a[i])
}

运算符

算术运算符

+ - * / % ++ --

比较运算符

> >= <= != == === !==

1 == '1' //弱等于

逻辑运算符

&& || !

赋值运算符

= += -= *= /=

流程控制

if-else if-else

var a = 5;
if (a > 5) {
    xxxx;
}else if (a < 5) {
    xxxx;
}else {
    xxx;
}

switch

switch (a) {
    case 0:
        xxxx;
        break;
    case 1:
        xxxx;
        break;
    default:
        xxxx;
}

for

for (var i=0; i < 10; i++) {
    xxxx;
}

while

while (i < 10) {
    xxxx;
    i++;
}

三元运算

var x = a > b ? a: b

函数

function f1(a, b) {
    xxxx;
    return xxx;
}

匿名函数

var sum = function(a, b) {
    return a + b;
}

箭头函数

var sum = (num1, num2) => num1 + num2

注：函数中可使用arguments参数，其包括传入的所有参数

注：函数只能返回一个值，如果要返回多个，只能将其放在数组或对象中

函数的全局变量和局部变量

函数内部声明的变量是局部变量，在函数外部声明的变量是全局变量

对象

自定义对象

var a = {'name': 'test', 'age'：18}

var person=new Object();
person.name='xxx'

JSON对象

方法

JSON.parse(str1)
JSON.stringify(json_obj)

RegExp对象

reg1 = new RegExp('^[a-z]');
reg2 = /^[a-z]/;
reg2 = /^[a-z]/g; // 全局匹配

Math对象

abs
exp
floor
max
log
min
sqrt

事件

用户的操作

点击，鼠标移入， 鼠标移出

<a href='javascript:alert("a")'> 连接</a>

javascript里改变class属性

obj = getElementById('xx')
obj.className

改变元素属性

obj[name] = value
oDiv.style 操作的是行间样式，如果放在css中，则不能取出相应属性
例如：oDiv.background不能修改，果果backgound定义在css中

提取行间事件

为元素添加事件

function abc()
    {
    
    }
var oBtn = document.getElemntById('xx')
oBtn.onclick=abc

window.onload

当页面加载完成的时候发生

getElementsByTagName

获取一组元素

全选

window.onload=function () {
    var aDiv = document.getElementsByTagName;
}


this

触发当前动作的元素

事件

用户的操作

onclick 
ondblclick

onfocus
onblur 元素失去焦点
onchange
onkeydown
onkeypress 按键被按下并松开
onkeyup 按键被松开
onmousedown 
onmousemove
onmouseout
onmouseover

onselect 文本框被选中
onsubmit 

绑定方式

方式1.

<div id="d1" onclick="changeColor(this);">点我</div>

方式2.

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵"; # this 是实参，表示触发事件的当前元素
  }
</script>

改变元素属性

obj[name] = value
oDiv.style 操作的是行间样式，如果放在css中，则不能取出相应属性
例如：oDiv.background不能修改，果果backgound定义在css中

window.onload

当页面加载完成的时候发生

BOM

window对象

window.close()
window.open()
window.innerHeight
window.innerWidth

history对象

history.forward()
history.back()

location对象

location.href # 获取当前url
location.href='xx' 跳转到指定页面
location.reload() 重新加载

弹出框

• alert
• confirm
• prompt

计时器相关

function func() {
        alert(123)
    }
    function show() {
        var t = setInterval(func,3000);  // 每隔三秒钟执行一次
        function inner() {
            clearInterval(t)
        }
        setTimeout(inner,9000) // 9秒后停止
    }
    show()

DOM

Document Object Model

当页面被加载时，浏览器会创建页面的文档对象。

JavaScript可以通过DOM创建动态的HTML：

• 改变页面中的HTML元素
• 改变页面中元素的属性
• 改变元素CSS样式
• 使元素对事件做出反应

标签查找

直接查找

document.getElementById
document.getElementsByClassName
document.getElementsByTagName

间接查找

parentElement
children
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling

节点操作

创建节点

var divEle = document.createElement('div');

添加节点

somenode.appendChild(newnode)
somenode.insertBefore(newnode, 某个节点)

删除节点

somenode.removeChild(要删除的节点)

节点属性

divEle.innerText

设置节点属性

divEle.innerText = '1';
divEle.innerHTML='<p>2</p>'

diveEle.setAttribute('age', 18) # 设置自定义属性

删除属性

divEle.removeAttribute('age') 

节点value

elementNode.value, 适用于一下标签

.input
.select
.textarea

class操作

className 获取所有样式类名
classList.remove(cls)
classList.add
classList.contains(cls)
classList.toggle(cls)

css操作

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex

jQuery

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

var $variable = jQuery对象
$variable[0] // jQuery对象转成DOM对象

查找标签

$('#id') // id选择器
$('tagName') // 标签选择器
$('.cl) // class选择器
$('div.cl') // 找到有cl类的div标签
$('#id, .className, tagName') // 组合选择器
$('x y')
$('x > y')
$('x + y') // 毗邻选择器
$('x ~ y') // 兄弟选择器