JavaScript 小白手册

时间:2020-6-30 作者:admin


文章目录

唠唠嗑

  • 因为我的另外两个队友,在学习这玩意,学完后,和我说记忆不是很清楚、不巩固、容易忘记。这不,我立马就给他们整理了一套复习的资料,记忆模糊了就瞅几眼。

1. 变量

  • 在函数中声明
// 都为局部变量
function fun() {
	var a, b, c = 1;
}
// 则除了第一个为局部,其它则全局
function fun() {
	var a = b = c = 20;
}
// 都是全局变量
function fun() {
	a = 1, b = 1;
}
  • 在函数外声明
var a = 1;   //全局变量
  • 结构赋值
var [a,b,c] = [1,2,3];

2. 数据类型

2.1 基本类型

基本类型
Number 数字类型
String 字符串类型
Boolean true与false
Null 空对象赋值,主要是和undefined进行区分
Undefined 变量声明不赋值的情况下,默认值是undefined

2.2 引用类型

  • 引用数据类型:Object
  • 在JS中除了基本数据类型以外的都是对象,数据是对象,函数是对象,正则表达式是对象
引用类型
Object 对象

2.3 类型转换

  • 强制类型转换
函数 作用
Number() 强制转为Number类型
Boolean() 强制转为Boolean类型

2.4 判断数据类型

  • 判断数据类型:typeof 类型

3. 特殊的关系运算符

运算符 作用
== 值一致即可
=== 需要类型与值一致

【注意】:null == undefined //返回true

4. 数组声明

  1. var arr = new Array(); //声明一个空数组对象
  2. var arr = new Array(length) //声明一个指定长度的数组
  3. var arr = [元素] //声明数组(最常用);

【注意】:js中的数组声明不用指定长度,js的数组长度是不固定的,会随着元素的数量改变而改变。

5. 对象声明

  1. var 对象名 = new Object();
var obj1 = new Object();
obj1.attr = "obj1";
obj1.fun = function () {
	console.log("obj1");
}
  1. var 对象名 = {};
var obj2 = {
    attr: "obj2",
    fun: function () {
        console.log("obj2");
    }
}
  1. function 类名() {this.属性名=属性值; … }
function Obj3() {
    this.attr = "obj3";
    this.fun = function () {
        console.log("obj3");
    }
}
  1. Object.create()
var obj4 = Object.create({
    attr: "obj4",
    fun: function () {
        console.log("obj4");
    }
});

6. 内置对象

6.1 String

函数 作用
concat() 连接
indeoxOf(str[,start]) 查找或指定位置开始查询
lastIndexOf(str[,start]) 从最后开始查找或指定位置开始查询
charAt(index) 返回此索引的值
replace(str,newStr) 替换
trim() 清除左右两边的空格
split() 切割
toLowerCase() 转为小写
toUpperCase() 转为大写
substring([start][,end]) 截取start~end
slice(start[,end]) 截取,end可为负值(代表从后面开始)
substr(start[,length]) 截取,可指定长度

6.2 Array

函数 作用
join(str) 将数组中的每一个元素都和str连接,最后将所有元素进行组合,变成字符串。
pop() 将数组中最后一个元素删除并且返回
push(str) 向数组末尾添加一个或多个元素,并且返回新长度
shift() 删除并返回数组中的首个元素
unshift([items]) 向数组开头添加一个或多个items元素
slice(start[,end]) 获取start到end的元素
splice(start[,end][,items]) 删除start到end的元素,且添加一个或多个items元素
sort() 正序排序
reverse() 将数组倒序排序

6.3 Math

函数 作用
ceil(num) 向上取整
floor(num) 向下取整
min(num) 获取最小值
max(num) 获取最大值
pow(num,a) num的a次方
random() 0-1的随机数
round(num) 四舍五入
sqrt(num) 开平方

6.4 Date

函数 作用
getFullYear() 获取年
getMonth() 获取月(0-11)
getDate() 获取日(1-31)
getDay() 获取星期几(0-6)
getTime() 获取当前时间(1970.1.1开始)
getHours() 获取小时(0-23)
getMinutes() 获取分钟(0-59)
getSeconds() 获取秒数(0-59)

6.5 Global

函数 作用
eval() 将字符串转为可以执行js代码
isNaN(“123”) isNaN判断是否值为NaN,会自动做一次Number()强转
parseFloat(str2) 获取以浮点开头的字符串,返回string类型
parseInt(str1) 获取以整形开头的字符串,返回string类型

7. BOM

  • 概述:BOM浏览器对象模型,是规范浏览器对js语言的支持(js调用浏览器本身的功能)。

7.1 window

  • Tips:“window.alert()”,可以省略“window”,则“alert()”
window 作用
alert() 警告框
confirm() 确认框; 返回true/false
prompt() 提示框; 返回输入的值
window 作用
setTimeout(函数对象,时间) 指定的时间后执行指定的函数,返回 ID 值
setInterval(函数对象,时间) 每间隔指定的时间执行指定的函数,返回 ID 值
clearTimeout(函数对象ID) 用来停止指定的定时器
clearInterval(函数对象ID) 用来停止指定的间隔器
window 作用
window.open() 打开页面
window.opener 子页面调用父页面的函数
window.close() 关闭页面

7.2 history

history 作用
forward() 页面资源前进,历史记录的前进
back() 页面资源后退,历史记录后退
go(index) 跳转到指定的历史记录资源

7.3 location

location 作用
href 获取URL
port 获取端口号
reload() 重新加载页面资源

7.4 navigator

navigator 作用
appName 返回浏览器名称
appVersion 返回浏览器的平台的版本信息
cookieEnabled 返回指明浏览器中是否启用cookie
platform 返回运行浏览器的操作系统平台
userAgent 查看浏览器配置属性

7.5 screen

screen 作用
availHeight 返回浏览器显示屏幕的高度
availWidth 返回浏览器显示屏幕的宽度
height 返回显示器屏幕的高度
width 返回显示器屏幕的宽度

8. DOM

8.1 Document

  • 概述:浏览器对外提供的支持js的用来操作HTML文档的一个对象,此对象封存的HTML文档的所有信息。
函数 获取HTML元素对象
getElementById() 通过id
getElementsByName() 通过name属性值
getElementsByTagName() 通过标签名
getElementsByClassName() 通过class属性值
querySelector() 通过选择器
querySelectorAll() 通过选择器

8.2 Element

  • 概述:Element 对象表示 HTML 元素。Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

8.2.1 属性操作

函数 作用
setAttribute(attriName,value) 设置属性
getAttribute(attriName) 获取属性
style 设置或返回元素的 style 属性

8.2.2 元素内容

函数 作用
innerHTML 返回或设置元素的内容
innerText 返回或设置元素的纯文本

8.2.3 节点操作

  • 节点类型(nodeType)
返回值 类型
1 元素节点
2 属性节点
3 文本节点
  • 节点名称(nodeName)
返回值 名称
标签名 元素节点
属性名 属性节点
  • 创建节点
函数 作用
document.createElement() 创建元素
document.createAttribute() 创建属性
document.createTextNode() 创建文本节点
setAttributeNode() 设置属性节点
  • 获取节点
函数 作用
parentNode 获取父节点
childNodes 获取子节点
previousSibling 获取同一级别的前一个元素节点
  • 获取节点(不包括文本节点和注释)
函数 作用
childElementCount 返回子元素的个数
firstElementChild 指向第一个子元素
lastElementChild 指向最后一个子元素
previousElementSibling 指向前一个同辈元素
nextElementSibling 获取当前节点的下一个节点
children 返回子元素的HTMLCollection集合
  • 删除节点
函数 作用
removeChild() 删除子节点
  • 追加节点
函数 作用
appendChild() 追加子节点

9. js事件

事件 代码
单击事件 onclick()
双击事件 ondblclick()
鼠标事件[悬停在某个元素上时] onmouseover()
鼠标事件[在某个元素上移动时] onmousemove()
鼠标事件[在某个元素上移出时] onmouseout()
键盘事件[弹起时] onkeyup()
键盘事件[下压时] onkeydown()
焦点事件[聚焦] onfocus()
焦点事件[离焦] onblur()
页面加载事件 onload()
  • 注意:
    1. 一个事件可以监听多个函数的执行,但是要有分号隔开。
    2. 给HTML元素添加多个事件时,注意事件之间的冲突,例如:单双击事件一起使用
    3. 事件的阻断(决定事件是否执行),true和false
    4. 超链接调用js函数 href=“javascript:函数名()”
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:87074139@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。