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总结的主要内容,如果未能解决你的问题,请参考以下文章

javascript总结

JavaScript 初识闭包closure及总结

JavaScript-Runoob-JS 实例 :JavaScript 总结

JavaScript 学习总结

JavaScript基础入门总结目录

JavaScript强化教程 —— JavaScript 总结