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') // 兄弟选择器