JavaScript
2019-09-06 08:10:49 58 举报AI智能生成
js
作者其他创作
大纲/内容
JavaScript
语法基础
书写区域
写在.js文件中，需要使用script标签引入
写在html的script标签中
写在标签的事件属性中
script标签使用
输出
alert();
缺点
可以被用户禁止
样式不可修改
阻塞
功能不可定制化
document.write();
console.log();
语法构成
区分大小写
标识符
注释
关键字
变量
概念
特点
命名规范
运算符
除法运算与java的不同
java
js
比较运算符
==
===
！=
！==
流程控制语句
for in循环
for of循环
方法
声明
调用
参数
arguments
return
定义
方法参数的默认值
方法表达式
回调
csdn
方法可以嵌套任意层
事件
绑定事件方式
在标签上使用事件属性
js访问事件属性
js访问addEventListener()方法
事件对象
event
事件冒泡
当一个事件点击以后，把事件传递给父元素
不同绑定方式的区别
this指向不同
标签绑定指向的Window
js绑定this指向的是标签
可见性
通过标签绑定在页面上可见
通过js绑定在页面上不可见
this关键字
this指向取决于运行这个代码的环境
this指向是可变的
新函数 = 函数名.bind（新的指向）；
js对象
创建对象
利用构造函数
利用Object模板
var 对象名 = new Object();
对象名.属性 = 值
JSON语法
var 对象名 = {“属性名”：“值”，“方法名”：function( ){ } }
Ajax
w3cschool
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
作用
在不重新加载整个网页的情况下，对网页的某部分进行更新。
使用步骤
创建连接对象
var xhr = new XMLHTTPRequest()；
打开请求
xhr.open(\"get/post\
绑定处理函数
使用
xhr.onreadystatechange = function(){};
ajax的五种状态
0
未初始化
还没有调用send()方法
1
载入
已调用send()方法，正在发送请求
2
载入完成
send()方法执行完成，已经接收到全部响应内容
3
交互
正在解析响应内容
4
完成
响应内容解析完成，可以在客户端调用了
status
200
OK
404
未找到页面
获取ajax的状态
xhr.readyState
xhr.status
当 readyState 等于 4 且状态为 200 时，表示响应已就绪
发送请求
xhr.send();
其他
xhr.responseText
JSON
一种轻量级的数据交换格式
JSON是一个序列化的对象或数组。
本质是一个字符串
存储和交换数据
格式
[{\"键\":\"值\"，\"键\":\"值\
值的内容
对象
用{ }表示
数组
用[ ]表示
字符串
用“ ”表示
数字
字面量
false、null、true
必须小写
把对象转化为JSON字符串
JSON.stringify(对象名)
把JSON转化为对象
JSON.parse()
W3SCHOOL
语言介绍
组成部分
ECMAScript
DOM
BOM
数据类型
基本数据类型
number
String
Boolean
null
undefined
对象类型（Object）
基本数据类型之间的转换
数字转字符串
数字 + ''
数字.toString()方法
String(数字)
new String(数字)
字符串转数字
parseInt(字符串)
parseFloat(字符串)
Number(x)
new Number(x)
其他类型转boolean
非零数字转boolean都是true，0转boolean是false
空字符串转boolean为false，其他为true
null和undefined转boolean都是false
boolean转数字和字符串
boolean转字符串
boolean转数字
typeof运算符和typeof()函数
内置对象
w3school
数学对象
字符串对象
数组对象
var arr = [ ];
var arr = new Array( );
取值和赋值
取值：var x = 数组名[1];
赋值：数组名[1] = 1;
长度可以任意改变
数组中可以放任意类型数据
遍历
普通for循环
forEach
Arrays
from（）方法 将一个类似数组的数据转换为数组
时间对象
DOM模型
获取节点
getElementById()
getElementsByName
getElementsByTagName
getElementsByClassName
完整使用
document.getElementById();
分类
W3C DOM
操作节点内容
innerHTML
能识别标签
innerText
不能识别标签
document.getElementById().innerText = ‘abcdefg’；
操作节点属性
getAttribute(属性名)
removeAttribute(属性名)
优缺点
HTML DOM
取值
dom对象.标准属性名字
document.getElementById().className；
赋值
dom对象.标准属性名字 = 值
document.getElementById().width= 100px；
document.getElementById().style.backgroundColor = red；
注意
class属性
该属性是关键字，访问class属性使用className
abc-def式属性
访问时使用abcDef
使用style属性中的属性
访问时可以 dom对象.style.属性
属性名
value 可获得input中的值
checked 为true多选框被选中
区别
HTML DOM不支持自定义属性，W3C DOM支持
HTML DOM能获取到看不见的属性值，W3C DOM不能
HTML DOM比W3C DOM功能强大
BOM模型
Window
代表浏览器的窗口
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
可以省略不写
Screen
包含用户屏幕的信息。
Location
获取当前页面地址（URL）并把浏览器重定向到新页面。
History
包含浏览器历史。
Navigator
包含有关访问者的信息。
即访问该网站的浏览器的信息
Timing
定时事件
Cookies
通过document.cookie创建cookie
弹出框
警告框
确认框
confirm();
会返回布尔值
提示框
prompt（）；
可输入内容
0 条评论
回复 删除
下一页
