淘先锋技术网

首页 1 2 3 4 5 6 7

JavaScript---ECMAScript基础总结

JavaScript组成

JavaScript组成

作用

兼容性

ECMAScript:解释器、翻译

JavaScript的语法标准，作为核心，它规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象

几乎没有兼容性问题

DOM:Document Object Model，文档对象模型

操作页面元素的能力document

有一些兼容性问题

BOM:Browser Object Model，浏览器对象模型

操作浏览器的能力window

没有兼容性问题---几乎不兼容

DOM基础见：https://blog.csdn.net/maidu_xbd/article/details/85800668

BOM基础见：https://blog.csdn.net/maidu_xbd/article/details/90230090

 

ECMAScript基础总结

变量类型——typeof检测类型

  1. 用法：
<!DOCTYPE html>
<html>

<head>
	<title>typeof</title>
	<script type="text/javascript">

		var a = 12;
		alert(typeof (a));//number
		var b = 'abc';
		alert(typeof (b)); //string
		var c = document;
		alert(typeof (c));//object

	</script>
</head>

<body>

</body>

</html>

 

2. typeof 返回的数据类型种类：number、string、boolean、undefined、object、function

 

object对象类型——基本类型(number、string、boolean、undefined)与复合类型(由基本类型所组成)的对比、数组

      基本类型----12、‘ab’、true

      复合类型---对象

      数组、Date也是对象

 

良好的代码习惯：变量从始至终，只存放一种类型的数据

 

数据类型转换

  1. 显式类型转换（强制类型转换）：

           parseInt----把字符串转为数字

          parseFloat----小数

          NaN:Not a Number不是数字

 

2. 隐式类型转换

         == 和 !=先把两边的东西转为一样的类型，然后再比较

         ===和!==不转换，直接比较

 

加号----1.字符串连接 2.数字相加  var a=’12’, var b=’5’ a+b=125(使用字符串连接)

减法----1.数字相减 var a=’12’, var b=’5’ a-b=7

 

变量作用域---作用范围（局部变量，全局变量 ）

闭包---子函数可以使用父函数的局部变量

 

命名规范：可读性，规范性

匈牙利命名法---类型前缀，首字母大写 ----例如：oBtn

 

类型

前缀

类型

实例

数组

a

Array

aItems

布尔值

b

Boolean

bIsComplete

浮点数

f

Float

fPrice

函数

fn

Function

fnHandler

整数

i

Integer

iItemCount

对象

o

Object

oDiv1

正则表达式

re

RegExp

reEmailCheck

字符串

s

String

sUserName

变体变量

v

Variant

vAnything

 

运算符:

  1. 算术：+ 加、- 减、* 乘、/ 除、% 取模
  2. 赋值：=、+=、-=、*=、/=、%=
  3. 关系：<、>、<=、>=、==、===、!=、!==
  4. 逻辑：&& 与、|| 或、! 否
  5. 运算符优先级：括号

 

程序流程控制：

  1. 判断：if、switch、?:
  2. 循环：while、for
  3. 跳出：break----终止整个循环；continue----终止本次循环
  4. 什么是真、什么是假：

真：true、非零数字、非空字符串、非空对象

假：false、数字零、空字符串、空对象、undefined

 

JSON

  1. 什么是Json  一种轻量级的数据交换格式，基于 ECMAScript 的一个子集。
  2. Json和数组

var obj={a: 5, b: 6, c:'abc', d: [1,2,3,4]};

alert(obj.d[0]);

 

var arr=[{a: 5, b: 12}, {a: 6, b: 19}];

alert(arr[1].b);

 

3. Json和for in

var obj={a: 5, b: 3, c: 98};

var attr='';

 

for(attr in obj)

{

alert(attr+'='+obj[attr]);

}

 

函数返回值

什么是函数返回值

函数的执行结果

可以没有return

一个函数应该只返回一种类型的值

 

函数传参：

可变参（不定参）：arguments

参数的个数可变，参数数组

例子1：求和

求所有参数的和


function sum(){

    Var result = 0;

    for(i=0;i<arguments.length;i++){

        result += arguments[i];

    }

    alert(result);

}

sum(1,2,3,5,66,43,2,12);

例子2：CSS函数

判断arguments.length

给参数取名，增强可读性

取非行间样式(不能用来设置)：

obj.currentStyle[attr]

getComputedStyle(obj, false)[attr]

 

style--------------------------取行间样式

currentstyle-----------------取非行间的样式，获取计算后的样式，只适用IE

getComputedStyle-------适用火狐

 

复合样式---background,在currentstyle中无法获取到

基本样式----width

 

 

 

 

数组

定义:

var arr=[12, 5, 8, 9];

var arr=new Array(12, 5, 8, 9);

没有任何差别，[]的性能略高，因为代码短

属性:

length

既可以获取，又可以设置

例子：快速清空数组

数组使用原则：数组中应该只存一种类型的变量

方法:

添加

push(元素)，从尾部添加;

unshift(元素)，从头部添加

var arr=[1,2,3];

arr.push(4);

arr.unshift(5);

删除

pop()，从尾部弹出

shift()，从头部弹出

var arr=[1,2,3];

arr.pop();

arr.shift();

排序

sort([比较函数])，排序一个数组、字符串数组、数字数组

ar arr=['float', 'zindex', 'xy', 'absolute', 'blue', 'leo'];

arr.sort();

 

var arr=[96, 8, 12, 72, 33, 118];

arr.sort(function (num1, num2){

return num1-num2;

});

转换类

concat(数组2)---连接两个数组--str1.concat(srt2)

join(分隔符)---用分隔符，组合数组元素，生成字符串

var arr=[1,2,3,4];

alert(arr.join(':'));

字符串split

插入、删除

splice

 

（1）中间删除：splice(开始,长度)--arr.splice(2, 3);

（2）中间插入：splice(开始, 长度,元素…)--arr.splice(5, 0, 'a', 'b', 'c');先删除，后插入

（3）替换：splice(开始, 长度, 元素…)--arr.splice(1, 2, 'a', 'b');

 var a = ["a", "b", "c", "d"];
        // 中间删除：splice(开始,长度)--arr.splice(2, 3);
        a.splice(1, 1);
        alert(a);//a,c,d

event对象和事件冒泡

event对象---event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

获取event对象(兼容性写法)-----var oEvent=ev||event;

 

event 对象用来获取事件的详细信息：鼠标位置、键盘按键

 

事件冒泡------当事件发生后，这个事件就要开始传播(从里到外或者从外向里)

cancelBubble-------取消冒泡，阻止浏览器默认的事件冒泡行为。

window.onload = function(){
			var oBtn = document.getElementById("btn");
			var oDiv = document.getElementById("div1");

			oBtn.onclick = function(ev){
				var oEvent = ev||event;
				oDiv.style.display = "block";
				oEvent.cancelBubble=true;
			}

			document.onclick = function(){
				oDiv.style.display = "none";
			}
		}

鼠标事件-----document.onmousemove

获取鼠标位置，可视区位置：clientX、clientY

document.onclick=function (ev)
{
	var oEvent=ev||event;
	
	alert(oEvent.clientX+', '+oEvent.clientY);
	//IE
	//alert(event.clientX+', '+event.clientY);
	
	//FF
	//alert(ev.clientX+', '+ev.clientY);
	
	/*if(ev)
	{
		alert(ev.clientX+', '+ev.clientY);
	}
	else
	{
		alert(event.clientX+', '+event.clientY);
	}*/
};

KeyCode---获取按下的键盘按键Unicode值。

document.onkeydown=function (ev)
{
	var oEvent=ev||event;
	
	alert(oEvent.keyCode);
};

ctrlKey,shiftKey,altKey

offsetLeft / offsetTop---相对于最近的祖先定位元素，包括外边距margin

offsetWidth / offsetHeight-----宽度/高度，包括边框border和内边距Padding

scrollTop----scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
alert(scrollTop);

跟随鼠标移动的div

#div1{width: 100px;height: 100px;background: #ccc;position: absolute;}
	
document.onmousemove=function (ev){
			var oEvent = ev||event;
			var oDiv = document.getElementById("div1");
			
			oDiv.style.left=oEvent.clientX+'px';
			oDiv.style.top=oEvent.clientY+'px';
		}

-------整理的好乱，后续更新整理中------