这里写目录标题
JS
语法
添加js
行内式 直接写到元素的内部
内嵌式
输入输出语句
alert(msg) 浏览器弹出警示框(展示给用户)
console.log(msg) 浏览器控制台打印输出信息(给程序员测速)
prompt(info) 浏览器弹出输入框,用户可以输入
声明变量 var(关键字)
简单数据类型
数字型number
isNaN() 判断非数字,如果是数字返回false,如果不是数字返回true
parseInt() 字符型转化为整数数值型 **parseFloat()**字符型转化为浮点数
隐式转换 字符串 - * / 数字 = 数字 eg. ‘12’ - 0 = 12 ‘123’ - ‘120’ = 3
字符串长度string
转化为字符串类型 变量.toString() String(变量)
length 检测获取字符串长度 检测获取数组元素个数
eg.console.log(str.length)
字符串拼接 字符串+任何类型=拼接之后的字符串
接触到字符串后,接下来都为字符串类型相加 eg.‘12’+12=1212 12+12+‘12’=2412
字符串和变量用+相接,变量可以很方便的修改值
布尔值Boolean
Boolean() 代表空,否定的值都会转化为false;其余值转化为true
ture参与加法运算当1来看 flase当0来看
Undefined 变量声明未定义数据类型
Full 变量为空值
(typeof 数据类型) 监测数据类型
逻辑运算
逻辑中断,如果表达式1以及为真,则表达式1之后的不运行,直接返回结果
逻辑&短路运算 如果表达式1为真,则返回表达式2
如果表达式1为假,则返回表达式1
逻辑||短路运算 如果表达式1为真,则返回表达式1
如果表达式1为假,则返回表达式2
数组
存放的数据可以是任何类型
var 数组名 = new Array();
var 数组名 = [1,2,3,4]
函数
声明函数
1.var 变量名 = function(){}; 函数表达式,没有名字
2.function 函数名(形参 ) function 声明函数的关键字
arguments 代替形参,把所有实参(任何形式)存起来
eg. function nidi(arguments) {}
作用域
全局变量 在全局都可以使用 如果在函数内部没有声明直接赋值的变量是全局变量
局部变量 在函数里面的变量 函数的形参也可以看作局部变量
全局变量在浏览器关闭后才消失,局部变量在代码块完毕后消失
对象(类似于c的结构体)
对象是一组无序的相关属性和方法的集合,由属性和方法组成
自定义对象
创建对象(object)三种方式
1.用字面量({})
var obj = { //var 对象名 = {
uname: , //属性名:属性值 (多个属性用,隔开)
age: ,
sayHi: function(){ //方法:匿名函数
console.log('hi');
}
}
2.用new Object 创建对象
var boj = new Object(); //创建了一个空对象
obj.uname = ; //对象名.属性名 = 属性值;
obj.age = ;
sayHi: function(){ //方法:匿名函数
console.log('hi');
}
3.构造函数创建对象 (一次创建多个相同属性的对象,泛指某一大类)
function 构造函数名(){ 构造函数名首字母大写
this.属性 = 值;
this.方法 = function(){}
}
var 对象名 = new 构造函数名(); 只要调用构造函数,就创建了一个对象
function Star(uname,age,sex) {
this.name = uname;
this.age = age;
this.sex = sex;
}
var nidi = new Star('陆小涛',18,'男');
调用对象三种方式
1.对象名.属性值名 eg. console.log(obj.uname);
2.对象名[‘属性名’] eg. console.log(obj[‘age’]);
3.对象名.方法名() eg.obj.sayHi();
遍历对象 for in
for (变量 in 对象) {}
eg var obj = {
name: ,
age: ,
sex: ,
}
for (var k in obj) {
console.log(k); //变量k 输出得到的是 属性名
console.log(obj[k]); //对象名[变量] 输出得到的是属性值
}
使用for in 里面的变量 喜欢写k或key
内置对象
指js语言自带的一些对象,这些对象供开发者使用,并提供了一些功能
(别人写好的,拿过来用)
eg. Math Date Array String… …
Math()
Math.max()/Math.min() 最大值/最小值
Math.abs() 取绝对值
Math.floor()/Math.ceil()/Math.round 向下取整/向上取整/就近取整
Math.random() 随机数
不跟参数 返回一个随机的小数(0 <= x < 1)
Math.floor(Math.random() * (max - min + 1)) + min; 返回两个数之间的随机整数,包括这两个整数
日期对象
Date()
Date()是一个构造函数,要用new来调用
eg. var date = new Date(); 如果没有参数,返回当前系统的当前时间
参数常见写法:字符串型 ‘2019-10-1 8:8:8’
var date = new Date();
var year = date.getFullYear(); //返回年
var month = date.getMonth(); //返回月份小一月,记得+1
var dates = date.getDate(); //返回几号
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
var day = date.getDay(); //返回日期 周一放回的是1,周日返回的是0
console.log(year + '年' + month + '月' + dates + '日' + arr[day]);
数组对象
Array()
构造函数,单一参数为创建空数组元素数量,多个参数为创建数组元素
var arr = new Array(2,3) 等价于 [2,3]
检测是否为数组
1.instanceof 运算符
eg. console.log(变量 instanceof Array)
2.Arrar.isArray()
参数里如果是数组返回true
添加数组元素
.push()
在数组末尾添加一个或多个数组元素,返回值是新数组的长度
eg.var arr = [1,2,3];
arr.push();
.unshift()
在数组前面添加
删除数组元素
.pop()
没有参数,删除最后一个元素,一次只能删一个,返回值为删掉的元素
.shift()
没有参数,删除第一个元素,返回值为删掉的元素
数组排序
.reverse() 翻转数组
.sort() 冒泡排序(只能排个位数)
数组名.sort(function(a,b) {
return a - b; 升序 (b - a) 降序
});
数组索引方法
.indexOf(‘要查找的字符’,起始位置) 返回第一次出现的数组元素的索引号,若没有返回-1
.lastIdexOf(‘要查找的字符’) (不常用) 从后面开始查找
数组转化为字符串
.toString() 参数为数组
.join() (toString强大版)默认为逗号(,) 参数为符号,则元素直接为该符号
字符转换为数组
.split(‘分隔符’)
var str = 'red, pink, blue';
console.log(str.split(‘ , ’));
字符串对象
根据位置返回字符 index为数组下标
.charAt(index) 根据位置返回字符,可以用for遍历输出数组元素
.charCodeAt(index) 返回相应索引号的字符ASCII值 可以判断用户按下了哪个键
连接字符串
.concat() 等效于+,+更常用
截取字符串
.substr(截取的起始位置,截取几个字符)
替换字符
.replace(‘被替换的字符’,'替换为的字符‘) 只替换遇到的第一个字符
替换所有就遍历循环
eg.while(str.indexOf(’字符‘)){
str = str.replace(‘字符’,'替换的字符’);
}
数据类型
两种数据类型
简单数据类型(值类型):string , number , boolean , undefined , null (返回的是一个空的对象)
null使用场景:如果有个变量我们以后打算储存为对象,暂时不知道放啥,这个时候就给null
复杂数据类型(引用类型):通过new创建的对象,Object,Array,Date
堆和栈
栈:由系统自动分配释放存放函数的参数值、局部变量的值等,
简单数据类型存放到栈,开辟一个空间,存放的是值
堆:存储复杂数据类型,由程序员分配释放,若不释放则由垃圾回收机制回收
复杂数据类型存放到堆,在栈里面存放地址,地址指向堆里面的数据
注意!!好好理解 函数的形参看作一个变量,当我们把引用类型变量传给形参时,其实是把复杂变量在栈空间里保存的堆地址复制给了形参,形参和实参此时保存的是同一个堆地址,操作的是同一个对象
API
API(应用编程接口)
API是一种工具,只要找到接口,就可以实现具体功能
Web API
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
eg.alret 弹出提示窗口
DOM
文档对象模型 通过DOM接口可以改变网页的内容、样式和结构
获取元素
根据ID获取
document.getElementById(id) 返回一个匹配到ID的DOM Element对象(元素对象)
将
<div id="time">2019-9-9</div>
<script>
document.getElementById('time'); //参数id为字符串
</script>
console.dir() 打印我们返回的元素对象,更好的查看里面的属性和方法
根据标签名获取
document.getElementsByName() 返回带有指定标签名的对象的集合(伪数组)
document指的是整个文档
<ul>
<li></li>
<li></li>
</ul>
<script>
var lis = document.getElementsByName('li');
//获取5个li,以伪数组形式存储
</script>
获取父元素内部所有指定标签名的子元素
document.getElementsByName(‘标签名’) 指定父元素(element)
父元素必须是单个对象(必须指明是哪一个元素对象)
var ol = document.getElementsByTagName('ol') //[ol]
console.log(ol[0].getElementsByTagName('li'));//此时ol[0]才是对象
//常用id来获取 给ol设置id = ol
var ol = document.getElementsByTagName('ol') //[ol]
console.log(ol.getElementsByTagName('li'));//指定id,此时ol是对象
根据类名获取
document.getElementsByClassName(‘类名’) 根据类名返回元素对象集合(伪数组)
document.querySelector(‘选择器’) 根据指定选择器返回第一个元素对象
document.querySelectorAll(‘选择器’) 根据指定选择器返回所有元素对象(伪数组)
<div class="box"> </div>
<div class="box"> </div>
<div id="nav">
<ul>
<li></li>
<li></li>
</ul>
</div>
var boxs = document.getElementsByClassName('box'); //类名
var firstBox = document.querySelector('.box'); //类选择器
var nav = document.querySelector('#nav'); //id选择器
var li = document.querySelector("li"); //标签选择器
var allBox = document.querySelectorAll('.box');//得到所有div
获取body
document.body 返回body元素对象
获取html
document.ducumentElement 返回html元素对象
事件触发机制
<button id="btn"></button>
//1.事件源 事件被触法对象
var btn = document.getElementById('btn'); //获取事件源
//2.事件类型 如何触发eg.鼠标点击(onclick) 鼠标经过(onmouseover) 键盘按下
//获取焦点(onfoucus) 失去焦点(onblur)
//3.事件处理程序 通过一个函数赋值的方式完成
btn.onclick = function() { //绑定事件 添加事件处理程序
alert('你弟')
} //事件源.事件类型 = 事件处理程序(函数)
操作元素
改变普通元素内容
element.innerText 不识别html标签 去除空格和换行
element.innerHTML 识别html标签 保留空格和换行(常用)
这两个属性是可读写的 可以获取元素里的内容
<button>显示当前事件</button>
<div></div>
//1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//2.注册事件
//3.事件处理程序
btn.onclick = function() {
div.innerText = getDate();
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
var day = date.getDay();
return (year + '年' + month + '月' + dates + '日' + arr[day]);
}
改变表单元素内容
利用DOM可以操作以下表单元素的属性:
type、value、checked、selected、disabled(禁用按钮)
样式属性操作
element.style 行内样式操作(单个)
element.className 类名样式操作(多个)