js基础（复习用）
- js是一门广泛应用于浏览器客户端的脚本语言
- JS的书写方式
1.第一种写法
在元素标签内部onclick=""属性引用
2，第二种写法
在当前网页的script标签中编写
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
alert('我是js代码');
</script>
</head>
<body>
</body>
</html>
也可以<body>< /body>标签中加入<script>< /script>
第三种写法
将js的代码写到.js的文件中，并在HTML中引用.<script src="x.js">< /script>x=js代码的文件名
基本规则
语句后面要用；号结束
js语法错误会引发后续代码终止，但不会影响其它代码块
<script>
var a = 10;
document.write(c);
</script>
<script>
var b = 20;
document.write(b);
</script>
&& || ！
&&
一定会返回结果，
先看前面的表达式转换为boolean类型
其中：undefind,null,NaN."".0,fales ==>fales
如果为真，则直接返回第二个表达式的值，为假直接返回第一个值，
||
第一个为真就返回第一个和&&相反
！
转换为boolean值取反
-
alert（）弹出内容
-
console.log（）打印内容可以在检查的console查看
console.dir()可以显示一个对象的所有属性和方法 -
定义变量
var 变量名 = 变量值; 注意:要加分号结束 -
JS的数据类型
number: 所有数字, 比如:整数/小数
bigInt: 数字数据类型 表示的范围值比number大, 精度值高
string: 字符串类型 单引号双引号都可以
boolean: 布尔值. 只能是True 或者 false
Null: 空值, 用来表示尚未存在的对象或地址的引用
undefined: 声明的变量还未被初始化时,变量的默认值为undefined
symbol: 符号类型
object: 对象类型(引用数据类型)
js加法运算中字符串加数字变为字符串
查看类型typeof()
定义函数
function 函数名(形参) {函数体}
调用：函数名（实参）传入的形参可以多
arguments 实列表，会把传入的实参保持进arguments
在函数体内有arguments，arguments=[实参]
实参和形参，改变相互影响
形参多于实参，多的部分不具备映射关系
命名函数表达式
var test = function abc() {
` document.write(‘a’);
}
匿名函数表达式
var demo = function() {
document.write(‘b’);
}
立即执行函数
（function f（a,b,c）{ console.log(a,b,c)}（1,2,3））
只有表达式才能被执行符号执行，执行后会忘记名字，成为立即执行函数
arguments,callee 为立即执行函数的引用
- 遍历函数：
function sum() {
count_length = arguments.length;
var num = 0;
for (var i = 0; i < count_length; i++) {
num += arguments[i];
}
return num;
}
console.log(sum(20,50,10));
- 条件函数
if(条件) {满足条件执行的代码} - 定义对象和方法
var 对象名(形参) {
属性名: 属性值,
属性名:属性值
};
var dog= {
age:10,
name:'ni'
};
console.log(dog.age)
console.log(dog['age'])
方法
<script>
function c() {
console.log('n')
}
var a= {
first : function b() {
console.log('dog再跑')
},
cecond : c
};
a.first()
a.cecond();
</script>
- 定义数组
var array = [10, 20, ‘haha’];
遍历方式一: 正常遍历
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}
遍历方式二: 对象遍历
for (var i in array) {
console.log(array[i]);
} - 全局对象
window 程序的窗口. 里面有常见的属性, 如:location. location中的href可以做网页跳转
<script>
window.location.href = 'https://taobao.com';
</script>
运行直接跳转淘宝
document 可以拿到整个网页
document.getElementsByTagName(); 通过标签名
document.getElementById(); 通过id属性
document.getElementsByName(); 通过name属性
docunment.getElementsByClassName() 通过class属性
- onload(加载)
可以将js代码写在body体前面
<script>
window.onload = funciotn() {
// 代码段
}
<script>
语句
var score = parseInt(window.prompt(‘接受用户输入信息并赋值’))
typeof() 返回类型
var num = Number(x); 把x转换成数字
var num = parseInt(x);把x转换成整型，会砍断非数字之后的
var num = pareInt(x,16);把x当作16进制，转换成10进制
var num = String(x); 转化成字符串
var num = Boolean(x); 转换成boolean
var num = x.toString(); 把想转换成字符串，undefined和null不能用
var num = x.toString(8);把x转换为8进制
var a = (1, 2) ,号会把第二个返回
隐式转换
isNaN(x); 判断是不是NaN，会在判断前用Nunber（）转换
++/-- +/- (正负) */ / /%； 会先把先调用Number
+(加)；会调研toString
不发生转换
=== 和！==
预编译
函数声明，整体提升，总是把函数提到最前
变量 声明提升 ， 会把声明提在最前，赋值不会
imply agobal 暗示全局变量：如果变量未经声明就赋值，此变量就为全局对象所有如：
function fn() {
var a = b = 10;
}
function fn() {
var c = 10;
}
b是全局变量
一切声明的全局变量，全是windows的属性
预编译发生在函数执行的前一刻
预编译
1.生成临时AO对象
2.找形参和变量声明，将变量和形参作为AO属性名，值为underfined
3.将实参值和形参统一
4.在函数体里找到函数声明，值赋值为函数体
闭包
当内部函数被保存到外部时，将会生成闭包。
function add() {
var num = 0;
function a() {
console.log(++num);
}
return a;
}
var myAdd = add()
myAdd();
a可以拿add的预编译，脱离add的影响
对象
var mrdeng = {
name : "mrdeng",
age : "40",
sex : "male",
smoke : function () {
console.log("i am smoking !")
}
drink : function () {
comsole.log("i am drink !")
}
}
增
mrdeng.health = 100
删
delete mrdeng.name
改
mrdeng.sex = “mimale”
查
mrdeng.查找内容
对象的创建方法
- var obj = {} plainObjedt 对象字面量/对象直接量
- 构造函数
1）系统自带的构造函数 Obje()
var obj = new Object();和var obj = {};一样
2）自定义
function Car() {};和函数定义一样
对象命名必须按照大驼峰规则，每个字母大写
var car = new Car();
function student(name,age){
this.name = name;
this.age = age;
}
原型
- 是function对象的一个属性，定义了构造函数制造出的对象的公共祖先，通过该构造函数产生的对象可以继承原型的属性和方法，原型也是对象
- 可以提取共有属性
- 对象如何查看原型–>隐式属性
__proto__ - 如何查看对象的构造函数——>constructor
- 绝大多数对象最终都会继承自Object.prototype也可以继承自null
Person.prototype ——原型
Person.prototype = {} 是祖先
Preson.prototype.name = "Deng";
Preson.prototype = {age : 18;}
function Person(){}
var person = new Person();
comsole.log(person.name)
__proto__
指向原型，当现在对象没有时，会在只想的原型里去找
Object.create(原型) 用来指定原型
var obj = {name:“sunny”};
var obj1 = Object.create(obj);
call/apply
改变this的指向
test() 和test.call() 作用一样
当call(obj)传值，那么会把调用者的this换成obj，不写会默认。传参从第二位开始
apply 需要传一个arguments
function Person(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
function Student(name,age,sex,tel,grade){
Person.call(this,name,age,sex);
this.tel = tel;
this.grade = grade;
}
var student = new Student(a,b,c,d,e);
function Student(name,age,sex,tel,grade){
Person.apply(this,[name,age,sex]);
this.tel = tel;
this.grade = grade;
}
继承
extends，inherit
function inherit(Target,Origin){
function F();
F.prototype = Origin.prototype;
Target.prototype = new F();
}
Father.prototype.lastname = "Deng";
function Father(){};
function Son(){};
inherit(Son,Father);
var son = new Son();
var father = Father();
属性的调用
属性访问实质：obj.name --> 隐式转化为obj["name"],所以遍历对象时注意
var obj = {name : "abc"};
obj.name 和 obj["name"]相同
对象的枚举（遍历）
- for in
- hasOwnPropetty
- in
- instanceof
for in
var obj = {
name : "13",
age = 123,
sex = "male",
__proto__ : {
lastName : "kang"
}
}
for (var i in obj){
console.log(i);
console.log(obj[i]); -->console.log(obj.i);会转化为访问i属性
}
hasOwnPropetty，in
for (var i in obj){
obj.hasOwnPropetty(i); 判断i是否为obj的属性，返回boolean类型,obj.hasOwnPropetty("lastName");为flase，只判度自身属性
}
“name” in obj 同样返回boolean值，判断是否可用属性，lastName为turn
instanceof
a instanceof b 看a对象的原型链上，有没有b的原型
数组
var arr = [ ];
var arr = new Array(); 只传一个参，则确定数组的长度，传多个则为值
溢出读结果为undefind,溢出写会扩展到写的那位
方法(改变原数组)
- push
在数组最后加入元素 - pop
把数组最后一位剪切出来，返回最后一位 - shift
在前面删除 - unshift
在前面增加，和push相反 - sort
排序，自然排序
自己添加排序方法：
1.必须写两形参
2.看返回值，当为负数，前面的数放在前面，正数后面的数在前，o不动
sort(dunction(a,b){}) - reverse
把原数组逆转 - splice
arr.splice(从第几位开始，截取长度，{在切口处添加新的数据，在切口处push})
不改变原数组
- concat
连接两个数组，a.concat(b) - join
把数组每位以参数连接
a.join("-")把每位以-连接 - split
以参数为断点返回数组 - toString
把数组变成字符串 - slice
一个参数：从第几位截取至结尾
两个：从第几位截取到第几位
三个
类数组
像arguments 像数组，不是数组
类数组属性要为索引（数字）属性，必须有length属性
原理Array.prototype.push = function(tareget){
obj[this.length] = target;
obj.length ++;
}
try. . .catch
try{}
catch(e){}
es5标准模式
“use strict”; es5.0严格模式的启动，不在兼容es3的一些不规则语法，使用全新的es5规范
不会对不兼容的浏览器产生影响
用法
全局严格模式：代码逻辑的最顶端
局部严格模式：函数的顶端
不支持with,arguments.callee,func,caller.变量赋值前必须声明，局部this必须被赋值赋值什么就是什么，拒绝重复参数和属性
Dom
DOM定义了表示和修改文档所需要的方法。DOM对象即为宿主对象，有浏览器厂商定义，用来操作html和xml功能的一类对象合集
查
document代表整个文档
document.getElementById() 选一个id
document.getElementsByTagName() 拿所有标签名
document.getElementsByClassName()，class名
document.getElementsByName()，name名注意：只有部分标签name可生效（表单，表单元素，img，iframe）
document.querySelector() 写css选择器一个，但是是静态选择器，不会更新
document.querySelectorAll() 一组
遍历节点树
var div = document.getElementsByTagName(“div”)[0];
div.pareNode
pareNode 父节点
childNodes 子节点们（文本，元素，属性，注释，document，documentFragment）
firstChild 第一个子节点
lastChild最后一个
nextSibling 后一个兄弟节点
previousSibling 前一个兄弟节点
元素节点树的遍历
parentElement
children
node.childElenmentCount 子节点的个数 ==node.children.length
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling
节点属性
nodeName 元素的标签名，以大写形式表示，只读
nodeValue text节点或comment节点的文本，可读写
nodeType 该节点的类型，只读
元素节点 ————1
属性节点 ————2
文本节点 ————3
注释节点 ————8
document————9
DocunmentFragment————11
attribute Element节点的属性集合
增
document.createElement() 创建元素节点
document.createTextNode() 创建文本节点
document.createComment()创建注释节点
document.createDocumentFragment() 文档碎片
插
PARENTNODE.appendChild() 在PARENTNODE里最后面插入，剪切操作
PARENODE.insertBefore(a,b) 在PARENTNODE里，把a插到b之前
删
parent.removeChild() 父类把子类剪切出来返回
child.remove() 子类销毁
替换
parentNode.replaceChild(new, origin)
元素节点（Element）
属性
innerHTML 代表元素的html内容，可改变html的内容
innerText 文本内容
方法
ele.setAttribute(a,b) 添加属性和属性值，如：
div.setAttribute('id', 'only') --><div id="only"></div>
ele.getAttribute() 取属性值
日期函数Date()
封装函数，打印当前何年何月何日何时，几分几秒
var data = new Date();
返回的都是data创建的时间，不是实时的
定时器
setInteval() window上的方法
setInteval(function(){,1000}) 每过100毫秒会自动执行一次里面的函数，计时不准，可以有返回值，返回唯一的1.2。。。
clearInterval()
clearInterval(x) 清除以x为唯一返回值的serInteval
var i = 0;
var stem = setInterval(function () {
i ++;
console.log(i);
if (i === 10){
clearInterval(stem)
}
},1000)
setTimeout()
setTimeout(function(){console.log(‘a’);},1000); 推迟1000毫秒执行一次，和setInteval()一样有唯一返回值，不会重叠
setTimeout()
清除setTimeout()
也可以用另一种形式展示
setInterval("console.log('a')",1000)
查看滚动距离
window.pageXOffset/window.pageYOffset 查看现在滚动条距离
document.body.scrollLeft
document.body.scrollTop
document.documentElement.scrollLeft
document.documentElement.scrollTop
兼容问题
function getScrolloffset() {
if (window.pageXOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
}else {
return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop
}
}
}
查看可视区窗口的大小
window.innerWidth
window.innerHeight
document.documentElement.clientWidth
document.documentElement.clientHeight
怪异模式下
document.body.clientWidth
document.body.clientHeight
document.compatMode 判断模式
function getViewportOffset() {
if (window.innerWidth){
return {
w : window.innerWidth,
h : window.innerHeight
}
}else {
if (document.compatMode === "BackCompat"){
return {
w : document.body.clientWidth,
h : document.body.clientHeight
}
}else {
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}
}
}
查看元素的几何尺寸
div.getBoundingClientRect()
返回一个对象，包含left,right,top,bottom等
返回的结果并不是实时的
查看位置
对于无定位父级的元素，返回相对文档的坐标，对于有定位父级的元素，返回相对于最近的有定位的父级坐标
div.offsetWidth
div.offsetHeight
div.offsetLeft
div.offsetTop
返回最近的有定位的父级
div.offsetParent()
让滚动条滚动
window上有三个方法
scroll(),scrollTo() scrollBy()
用法是将x，y坐标传入。让滚动条滚动到当前位置
scrllBy() 会在之前的数据基础之上做累加
脚本化css
dom.style.rpop
可读写行间样式，没有兼容性问题，碰到float这类的保留字属性，前面应加css。eg：cssFloat
复合属性建议拆解。eg：div.style.border ,写成div.style.borrderWith
组合单词变成小驼峰式3写法。eg：div.style.border-radius --> div.style.borderRadius
查询计算样式
window.getComputedStyle(ele,null)[prop]
第二个参数null为获取伪元素方法，也是唯一方法
计算样式只读
返回计算样式的值都是绝对值，没有相对单位
ie8及以下不兼容
IE独有：ele.currentstyle()
function getStyle(elem, prop) {
if (window.getComputedStyle){
return window.getComputedStyle(elem, null)[prop]
}else {return elem.currentStyle[prop]}
}
事件
onclick 点击事件
onfocus 获得焦点
onblur 失去焦点
onchange 值发生改变
onload 加载完毕事件
onsubmit 表单提交事件，表单提交按钮，事件需要boolean类型的返回值
onkeyup 键位弹起
onmouseover 鼠标移入事件
onmouseout 鼠标移出
绑定事件
- ele.onxxx = function() {}
兼容好，但一个元素的同一事件只能绑定一个
基本等同于写在HTML同行上 - obj.addEventListener(事件类型，方法引用，false)
<div id="only" style="width: 200px;height: 200px;background-color: red;" ></div>
<script>
var div = document.getElementById('only');
div.onclick = function () {this.style.backgroundColor = 'green'}
div.addEventListener("click", function () {
console.log('b')
},false)
div.addEventListener("click", text,false)
function text() {
console.log('c')
}
- obj.attachEvent(‘on’ + 事件类型, 方法引用)
IE独有
解除事件(若绑定匿名函数。则无法解除)
- div.onclick = null;
- ele.detachEvent(事件类型, 函数的引用, false);
- ele.detachEvent(‘on’ + 事件类型, 函数的引用);
事件处理模型-事件冒泡、捕获
结构上（非视觉）嵌套关系的元素会存在冒泡功能，即同一事件。自子元素冒泡向父元素。（自底向上，同时触发）
<div style="width: 300px;height: 300px;background-color: red;" >
<div style="width: 200px;height: 200px;background-color: green;" >
<div style="width: 100px;height: 100px;background-color: yellow;" ></div>
</div>
</div>
<script>
var div1 = document.getElementsByTagName('div')[0];
var div2 = document.getElementsByTagName('div')[1];
var div3 = document.getElementsByTagName('div')[2];
div1.addEventListener('click', function(){console.log('div1')},false);div2.addEventListener('click', function(){console.log('div2')},false);div3.addEventListener('click', function(){console.log('div3')},false);
结构上（非视觉）嵌套关系的元素会存在捕获功能，即同一事件。自父元素冒泡向子元素。（自顶向下，同时触发）（IE没有捕获事件
var div1 = document.getElementsByTagName('div')[0];
var div2 = document.getElementsByTagName('div')[1];
var div3 = document.getElementsByTagName('div')[2];
div1.addEventListener('click', function(){console.log('div1')},true);div2.addEventListener('click', function(){console.log('div2')},true);div3.addEventListener('click', function(){console.log('div3')},true);
当同时有捕获和冒泡，先捕获后冒泡
focus,blue,change,submit,reset,select等事件不触发模型
取消冒泡
e.stopPropagation()
e.cancelBubble = true
<div style="width: 300px;height: 300px;background-color: red;" >
<div style="width: 200px;height: 200px;background-color: green;" >
<div style="width: 100px;height: 100px;background-color: yellow;" ></div>
</div>
</div>
<script>
var div1 = document.getElementsByTagName('div')[0];
var div2 = document.getElementsByTagName('div')[1];
var div3 = document.getElementsByTagName('div')[2];
div1.addEventListener('click', function(){
console.log('div1')},false);
div2.addEventListener('click', function(e){
//e.stopPropagation();
e.cancelBubble = true;
console.log('div2')},false);
div3.addEventListener('click', function(){
console.log('div3')},false);
624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
