javascript总结
Posted iam-ironman
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript总结相关的知识，希望对你有一定的参考价值。
html: 定义网页结构
CSS：美化网页
javascript: 与用户进行交互
ECMAScript：定义javascript的基本语法，所有浏览器都支持。
BOM：Browser Object Model 浏览器对象模型。
DOM: Document Object Model 文档对象模型。
编写方式：
方式一：在script标签中编写js代码。
方式二：在js文件中编写js代码。
<script type="text/javascript" src="js文件"></script>
方式三：在HTML元素的事件属性中编写js代码。
ECMA SCRIPT : JS的基本语法
变量
数据类型
流程控制语句
函数
对象：
Math
Date
String
Number
Boolean true flase
Array []
object {}
JS序列化与反序列化:
s=‘[111,222,333]‘
# 反序列化
l=JSON.parse(s)------> l= [111,222,333]
# 序列化
s={‘name‘:‘alex‘}
JSON.stringfy(s) -----> ‘{"name":"alex"}‘
s2=‘{"name":"alex"}‘
s2=JSON.parse(s2)
Javascript的基本语法：
注释：
单行注释：//注释内容
多行注释：/* 注释内容 */
定义变量：var 变量名 = 变量值;
变量的注意事项：
1) 变量的类型是由变量值决定；
2）初始化变量的时候可以不指定var关键字，一般要求加上；
3）变量必须要先定义，再使用；
typeof(变量名)：查询变量的数据类型。
js的数据类型：
number数值型：NaN(非数字)、整数或小数。
string：字符串
boolean：布尔类型
object：对象类型
undefined：未定义类型
面向对象的三大特征：继承、多态、封装。
运算符：
算数运算符：
++：前加和后加
--：前减和后减
+（加法或字符串连接符）、-、*、/、%
逻辑运算符：
&&：逻辑与
||：逻辑或
!：逻辑非
比较运算符：
==（比较数据）、===（比较数据和类型）、>、<、>=、<=
赋值运算符：
=、+=、-=、*=、/=、%=
三目运算符：如果条件表达式返回true，结果就是表达式1的值，否则就是表达式2的值。
条件表达式 ? 表达式1 : 表达式2;
流程控制：
条件判断：
if (条件表达式) {
} else if (条件表达式) {
} ...
else {
}
条件选择：
switch(变量) {
case 值：
...
break;
case 值：
...
break;
case 值：
...
break;
...
default:
...
}
循环：
while (条件表达式) { //先判断条件，再执行循环体
循环体...
}
do { //先执行循环体，再判断条件
循环体...
} while(条件表达式);
for (初始化语句; 条件判断; 循环后语句) {
循环体...
}
函数定义：
方式一：通过function关键字定义函数。
方式二：定义函数变量；
var 函数变量 = function(参数1, 参数2, ..) {
}
注意：
1）函数没有参数可以不指定参数；
2）函数参数不需要使用var修饰；
3）如果函数有参数，那么调用函数时候需要传入相应的实参（实际传入的参数）；
4）函数不需要指定返回值类型，如果有返回值使用return返回数据，否则不需要return；
return的另外一个作用：结束当前函数。
使用函数创建对象：
方式一：使用function函数创建对象；
function Person(username, password, ...) {
}
new Person("jacky", "123"); //创建对象
方式二：通过Object创建对象；
var o = new Object();
通过对象名.属性名指定属性值。
方式三：使用JSON语法创建对象；
{
propertyName : propertyValue,
propertyName : propertyValue,
....
}
内置对象: javascript提供用户使用的对象。
String对象：代表字符串对象。
length: 获取字符串的长度。
indexOf()：返回指定内容在字符串中第一次出现的位置。
lastIndexOf(): 返回指定内容在字符串中最后一次出现的位置。
charAt(): 获取指定位置的字符。
charCodeAt(): 获取指定位置字符的ascii码。
substring(start, end): 从指定开始和结束位置获取字符串的内容。
substr(start, length): 从指定开始位置获取指定长度的内容。
fontcolor(颜色)：在字符串外面使用font标签包含起来。font标签的color属性就是参数值。
Number对象：代表数值。
var i = 10;
var i = 10.5;
var i = new Number(10);
数值和字符串之间的转换：
toString(n): 使用指定进制把数值转换成字符串。如果不指定n，默认为10进制。
parseInt(): 把字符串转换成整数；
parseFloat()：把字符串转换成小数；
该函数只会把第一个非数字前面的数字转换成数值。例如：11a22
如果第一个字符就是非数字（不包含空格），那么结果就是NaN。
Math对象：数学工具对象。
PI属性：
abs()：取绝对值；
ceil(): 向上取整；
floor()：向下取整；
round()：四舍五入
random()：生成0~1之间的随机数，不包含1。
max():
min():
Date对象：代表日期和时间。
new Date(): 代表当前时间的Date对象。
getFullYear(): 获取年份；
getMonth(): 获取月份，从0开始；
getDate()：获取日；
getHours(): 获取小时;
getMinutes(): 获取分钟;
getSecondes(): 获取秒
Array对象：代表数组。js数组的特点：1）长度不固定；2）可以存储不同类型的数据；
length：获取数组元素的个数。
var arr = [数组元素];
var arr = new Array([size]);
var arr = new Array(数组元素);
JavaScript正则表达式：1）匹配 2）查找 3）替换
创建正则表达式：
/正则表达式/模式
new RegExp("正则表达式", "模型")
i模式：忽略大小写
g模式：全文查找
test(): 匹配内容；
exec(): 查找内容；
在字符串中使用正则表达式：replace(正则表达式, 替换内容)
事件：
onClick: 鼠标单击
onDblClick: 鼠标双击
onMouseOver: 鼠标移入
onMouseOut: 鼠标移出
onFocus：元素获得焦点
onBlur: 元素失去焦点
onload：当页面加载完成后自动触发
onChange：当元素内容发生改变会自动触发
onSubmit：提交表单前自动触发
BOM编程：HTTP解析器会把一个浏览器分割成不同部分，每一个部分使用一个对象描述。
window：代表窗口，保存全局变量和函数。
|- location
|- screen
|- document
|- navigator
|- history
如果要访问window对象的属性和方法，window可以不写。
alert()：弹出提示框；
open()：打开一个新的窗口；
close()：关闭当前窗口；
setInterval()：启动定时器，该方法返回一个定时器的ID。
clearInterval(ID): 停止定时器；
setTimeout()：指定毫秒数后执行任务，只会执行一次；
history：
back()：回退一步；
forward(): 前进一步；
go(n): 前进或后退n步。如果n是正数，就前进，如果是负数，就后退。
location：
href：获取或设置地址栏的URL。
screen：代表当前屏幕
availWidth：获取屏幕的有效宽度；
availHeight：获取屏幕的有效高度；
width：获取屏幕的宽度（包含任务栏）
height：获取屏幕的高度（包含任务栏）
苑昊
BOM ： browser object model（js对象控制浏览器）
警告： window.alert("你女朋友跟别人跑了")
window.setInterval(function () {
},1000)
window.setTimeout(function () {
},1000)
DOM: document object model （文档对象模型） -----》 JS语法控制文档页面
DOM节点：一个个element（标签）对象
1 查找标签
直接查找
document.getElementById(“idname”) # 返回dom对象
document.getElementsByTagName(“tagname”) # 返回dom对象数组
document.getElementsByName(“name”) # 返回dom对象数组
document.getElementsByClassName(“name”) # 返回dom对象数组
导航查找（依赖一个标签找到自己的父子兄弟标签）
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2 操作标签
1、获取文本节点的值：innerText innerHTML
div.innerHTML="alex"
"alex"
div.innerText="yuan"
"yuan"
div.innerHTML="<a href=‘‘>click</a>"
"<a href=‘‘>click</a>"
div.innerText="<a href=‘‘>click</a>"
"<a href=‘‘>click</a>"
2、操作属性
ele=document.getElementById("i1")
<div class=?"c1" id=?"i1" alex=?"xxx">?alex?</div>?
ele.getAttribute("class")
"c1"
ele.getAttribute("alex")
"xxx"
ele.setAttribute("class","c2")
undefined
ele.removeAttribute("alex")
undefined
3 class属性操作
ele.classList
DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"]
ele.classList.remove("c3")
undefined
ele.classList.remove("c1")
undefined
ele.classList.remove("c2")
undefined
ele.classList.add("c1")
undefined
ele.classList.add("c2")
undefined
ele.classList.add("c3")
undefined
ele.classList.add("c3")
undefined
ele.classList.add("c3")
undefined
ele.classList.remove("c2")
undefined
ele.classList.remove("c2")
4 value属性操作
input
textarea
select
dom=document.getElementById("input")
dom.value=123
5 节点的增删改查(****************************)
1 创建节点（dom）
let p=document.createElement("p") // <p></p>
p.innerHTML="alex" // <p>alex</p>
p.setAttribute("class","c1") // <p class=‘c1‘>alex</p>
2 添加节点
父节点.appendChild(添加节点)
3 删除节点
父节点.removeChild(子节点)
4 替换节点
父节点.replaceChild(newnode, 某个节点)
案例：二级联动
以上是关于javascript总结的主要内容，如果未能解决你的问题，请参考以下文章