JavaScript

文章目录

JavaScript
- 1. 变量
- 2. 数据类型
- - 2.1 基本类型
  - 2.2 引用类型
  - 2.3 类型转换
  - 2.4 判断数据类型
- 3. 特殊的关系运算符
- 4. 数组声明
- 5. 对象声明
- 6. 内置对象
- - 6.1 String
  - 6.2 Array
  - 6.3 Math
  - 6.4 Date
  - 6.5 Global
- 7. BOM
- - 7.1 window
  - 7.2 history
  - 7.3 location
  - 7.4 navigator
  - 7.5 screen
- 8. DOM
- - 8.1 Document
  - 8.2 Element
  - - 8.2.1 属性操作
    - 8.2.2 元素内容
    - 8.2.3 节点操作
    - js操作form表单
    - js操作form表单

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	对象

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

2.3 类型转换

强制类型转换

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

2.4 判断数据类型

判断数据类型：typeof

3. 特殊的关系运算符

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

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

4. 数组声明

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

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

5. 对象声明

var 对象名 = new Object();

var obj1 = new Object();
obj1.attr = "obj1";
obj1.fun = function () {console.log("obj1");
}

var 对象名 = {};

var obj2 = {attr: "obj2",fun: function () {console.log("obj2");}
}

function 类名() {this.属性名=属性值; … }

function Obj3() {this.attr = "obj3";this.fun = function () {console.log("obj3");}
}

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调用浏览器本身的功能)。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2H6M9yyJ-1601256238921)(images/BOM.jpg)]

7.1 window

Tips：可不写window前缀，例如：“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	获取子节点
nextElementSibling	获取当前节点的下一个节点
previousSibling	获取同一级别的前一个元素节点

获取节点（不包括文本节点和注释）

函数	作用
childElementCount	返回子元素的个数
firstElementChild	指向第一个子元素
lastElementChild	指向最后一个子元素
previousElementSibling	获取当前节点的上一个节点
nextElementSibling	获取当前节点的下一个节点
children	返回子元素的HTMLCollection集合

删除节点

函数	作用
removeChild()	删除子节点

追加节点

函数	作用
appendChild()	追加子节点

js操作form表单

获取form对象
1. 通过name属性： var frm=document.name属性; // 特殊的，可以直接用name属性获取form对象
方法
1. submit(); //提交表单数据
2. reset(); //重置表单数据
属性
1. 表单对象名.action=“新的值” //动态的改变数据的提交路径
2. 表单对象名.method=“新的值” //动态的改变提交方式
  veChild()|删除子节点|

追加节点

函数	作用
appendChild()	追加子节点

js操作form表单

获取form对象
1. 通过name属性： var frm=document.name属性; // 特殊的，可以直接用name属性获取form对象
方法
1. submit(); //提交表单数据
2. reset(); //重置表单数据
属性
1. 表单对象名.action=“新的值” //动态的改变数据的提交路径
2. 表单对象名.method=“新的值” //动态的改变提交方式
3. elements //（只限于form对象）获取form下的所有表单元素对象集合

JavaScript 小白手册相关推荐

怒肝俩月，新鲜出炉史上最有趣的Java小白手册，第一版，每个 Java 初学者都应该收藏
这么说吧,在我眼里,Java 就是最流行的编程语言,没有之一(PHP 往一边站).不仅岗位多,容易找到工作,关键是薪资水平也到位,不学 Java 亏得慌,对吧? 那可能零基础学编程的小伙伴就会头疼了, ...
股票期权【小白手册】（含大量图解）
因为觉得如果金融市场开放,之后总需要一些金融知识,更好得去个人理财,所以找了点资料自学了股票期权. 最近沉迷股市学习期权,所以学了半斤八两的我来写写关于股票期权的介绍手册, 帮 ...
JavaScript实战手册（涵盖丰富的JQuery应用实例）
<JavaScript实战手册> [作者]David Sawyer McFarland 著 [译者]李强等译 [书号]978-7-111-25867-4 [定价]89.00元 [本书中的 ...
JavaScript 学习手册二
JavaScript 学习手册二:JS 数据类型第1关:JavaScript 数据类型介绍任务描述本关任务:在函数 objectTest() 内部定义了六个变量 a.b.c.d.e.f,并已经赋 ...
JavaScript 自学手册
阿里云大学:JavaScript 自学手册 JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常Java ...
html分号的作用,JavaScript 中的分号(;) – JavaScript 完全手册（2018版）
注:本文为 < JavaScript 完全手册(2018版) >第14节,你可以查看该手册的完整目录. JavaScript 中的分号是可选的. 我个人偏好是我的代码中避免使用分号,但也有 ...
JavaScript学习手册十五：事件处理
事件处理 1.注册事件处理程序任务描述相关知识 (1)为JavaScript对象设置一个函数 (2)设置HTML标签属性的值为事件处理程序 (3)调用addEventListener()函数代码 ...
2021年JavaScript实用手册
1. JavaScript 是专门编写网页交互行为的语言,HTML 和 CSS 是静态语言,编写静态内容,无法编写逻辑,无法执行计算,所有静态网页必须使用 JavaScript 添加上交互行为,才能让 ...
JavaScript小白实现简易悬浮层制作(含测试源码)
本博文源于js基础,旨在讨论如何实现js中的悬浮层制作. 问题再现制作一个悬浮层特效.所谓悬浮层指的是一个绝对定位的div盒子,它像系统对话框一样盖住页面的原有内容. 测试效果 a模拟页面内容盒子 ...
JavaScript小白基础学习教程
JavaScript学习 javaScript基础概念: 功能: javaScript发展史基本语法与html的结合方式注释数据类型变量运算符 1.一元运算符 2.二元运算符 3.赋值运 ...

JavaScript 小白手册

JavaScript

文章目录

1. 变量

2. 数据类型

2.1 基本类型

2.2 引用类型

2.3 类型转换

2.4 判断数据类型

3. 特殊的关系运算符

4. 数组声明

5. 对象声明

6. 内置对象

6.1 String

6.2 Array

6.3 Math

6.4 Date

6.5 Global

7. BOM

7.1 window

7.2 history

7.3 location

7.4 navigator

7.5 screen

8. DOM

8.1 Document

8.2 Element

8.2.1 属性操作

8.2.2 元素内容

8.2.3 节点操作

js操作form表单

js操作form表单

JavaScript 小白手册相关推荐

最新文章

热门文章