JavaScript

JavaScript

基础知识

默认省略

1. windows
2. 调用id名

数据类型

• 所有类型都属于对象类型，都是var，在新建对象时不需要指定类型直接 var x = x;.

数据类型	注意事项
数值类型 number	1.js底层都是浮点型，运算时自动转换为整数和小数;2.数值类型之外的类型通称为NaN类型;;3.除法运算自动转化为小数
字符串类型 string	单双引号都可以修饰字符串
布尔值类型 boolean	false0;true1;
未定义类型 undefined	未定以类型和任何数值进行计算结果都是NaN

• 隐饰转换

  • 转换为布尔类型时：0/null/空字符串/NaN/undefined转换为flase;

  • 在if和while后面的括号中如果不是布尔值会自动隐式转换成布尔值；

  • 转换为字符串类型时：都自动转换

    var x = undefiend+"book"+true;//undefinedbookbook
    

  • 转换为数值类型时:null转化为0

    var x = null+1+true;//3
    

• Int相关方法

  • 其他类型转换数值

    var x = praseInt("18ps5sdss5");//取第一个字符串前所有数值类型(15),若第一个字符为“”则返回NaN
    

  • 判断是否为数值类型

    isNaN(Object类型)
    

  • 保留n位小数

    数值.toFixed(n);
    

• 常用内容

  • 和=

    • 先将==两端的变量转换为同一类型，再比较数值
    • 先比较===两端变量的类型，再比较数值

  • typeof 变量;

    输出变量的数据类型;

对象

function Person(name,age){/* 声明对象  */
	//给对象添加属性
	this.name=name;
	this.age=age;
	//给对象添加方法
	this.run = function(){
		alert("name:"+name+" age:"+age);
	}
}
var p = new Person("刘备",38);
p.run();

var p1 = {
		"name":"曹操",
		"age":18,
		"run":function(){
		 alert("name:"+this.name+" age:"+this.age);
		}
}
p1.run();

方法

• function 方法名(参数列表){方法体}
• var 方法名 = function(参数列表){方法体}
• var 方法名 = new Function(“参数1”,“参数2”,“方法体”);
• 引用方法:方法名(参数列表);

var p1 = {
		"name":"曹操",
		"age":18,
		"run":function(){
		 alert("name:"+this.name+" age:"+this.age);
		}
}
p1.run();

this

this:代表当前元素

this.属性名(返回true或flase)

数组

• 创建数组

  var arr = ["abc",18,true];
  

• 添加内容

  arr.push("abc");
  

• 数组长度

  var x = arr.length;
  

• 遍历数组=java

• 排序

  通过数组中的unciode编码进行排序，比较晚第一个再比较第二个

  • 整数排序:

    arr.sort();
    

  • 自定义排序:

    arr.sort(new Function("a","b","retuen a-b;"));
    

• 二维数组

  var arr = [[1,2,3],[2,2,2],[3,3,3]];
  arr[0];//[1,2,3]
  arr[0][0];//1
  

日期

翻译:date日期;time时间

• 获取时间

  var date = new Date();
  

• 字符串转换时间对象对象

  var date = new Date("2011/1/1 12:4:36");
  

• 格式化时间(无,自己书写)

• 时间戳

  • 获取时间戳

    date.getTime();
    
    

  • 设置时间戳

    进行完下列操作后date的值会发生改变

    date.setTime(时间戳的值);
    
    

• 获取时间分量

  代码	时间分量	注意事项
  date.getFullYear();	年	gateYear()已被淘汰,仅适用于19世纪(或者加上1900)
  date.getMonth();	月	从0开始
  date.getDate();	日
  date.getDay();	星期几
  date.getHours();	时
  date.getMinutes();	分
  date.getSecounds()	秒

• 获取日期或时间

  • 获取日期:年月日

  date.toLocalDateString();
  
  

  • 获取时间:时分秒

  date.toLocalTimeString();
  
  

正则表达式

​ var reg = /规则/模式;

• 规则

  规则的开始和结束要加上/规则/

  规则	含义
  \w	任意字母数字下划线
  \d	匹配任意数字
  \s	匹配任意空白
  ^	开头
  $	结尾

• 模式

  模式	含义
  i	忽略大小写
  g	全局模式

• 数量

  数量	含义
  {数量}	多少次

• 方法

  • 正则表达式;

    var reg = new RegExp(/规则/模式);
    
    

  • 查找

    reg.exec(str);
    
    

    execute执行 全局查找时并非一次性返回所有查找到的内容，每次执行返回一个，如果找不到了则返回null
    alert(reg.exec(str)); no 第一个

    alert(reg.exec(str)); no 最后一个
    alert(reg.exec(str)); null 没有了

  • 校验

    var flag = reg.test(str);
    
    

String方法

• 大小写转换

  var x = str.toUpperCase();//大写
  var x = str.toLowerCase();//小写
  
  

• 查找字符串位置

  var x = str.indexOf("字符串");//第一个
  var x = str.lastIndexOf("字符串");//最后一个
  
  

• 查找字符

  var arr = str.match(reg);
  
  

• 截取字符串

  var str = str.subString(start,end);
  
  

• 替换字符串

  • 直接替换

    只替换第一个,并非全部替换

    var str = str.replace("old","new");
    
    

  • 正则表达式

    reg使用g时为全部替换,不使用g时替换一个

    var str = str.replace(reg,"new");
    
    

• 拆分字符串

  var x = str.split(".");//x是数组
  
  

事件

1.鼠标事件

代码	事件
onclick	鼠标点击元素事件
onmouseover	移入事件
onmouseout	移出事件
onmousedown	按下事件
onmouseup	抬起事件
onmousemove	移动事件

2.键盘事件

代码	事件
onkeydown	按下事件
onkeyup	抬起事件

3.状态改变事件

代码	事件
onload	页面加载完成
onfocus	获取焦点事件
onblur	失去焦点事件
onchange	值改变事件
onresize	窗口尺寸改变事件

4.事件绑定

• 行内绑定

  在元素标签内通过事件属性添加事件，在事件方法中this代表的window对象
  如果需要用到事件源可以在事件属性中调用方法时把事件源this传递过去

  <input type="button" value="内容" 事件="方法(this)">
  
  

• 动态绑定

  动态绑定，通过标签对象给标签添加事件 ，动态绑定的事件方法中this代表的是事件源

  [对象.]事件名=方法;
  
  

5.事件取消

return false;

6.事件对象event

此对象中保存着和事件相关的信息

需要建立带参方法，并在事件引用方法时传入event

• 在鼠标事件中保存鼠标的坐标

  event.clientX/Y
  
  

• 在键盘事件中保存着键盘的编码

  event.keyCode
  
  

• 在任何事件中可以通过event得到事件源 ，以下代码可以解决浏览器兼容性问题

  event.target:Dom;event.srcElement:ie;

  var obj = event.target||event.srcElement;
  
  

7.事件优先级（事件传递/冒泡）

• 事件传递：如果同一个区域存在多个事件响应，则响应的顺序类似气泡从最底层元素向上级元素传递
• 如果在某一个范围内需要给多个元素添加事件，可以将事件添加在这些元素共同的上级元素上，则多个元素同时具备此事件，通过事件源的nodeName属性区分点击的到底是什么元素

DHTML

• Dynamic(动态)HTML，这并不是新的技术，把html+css+js实现的页面称为动态的html页面
• DHTML包括BOM和DOM
• BOM Browser浏览器 Object对象 Model模型： 里面包含和浏览器相关的各种信息
• DOM Document 文档 Object对象 Model模型：里面包含和页面相关的各种信息

BOM/windows

BOM是浏览器厂商自己制定的标准，因此不同浏览器可能语法不同

window对象里面的属性和方法称为全局属性和全局方法，调用window对象里面的属性和方法时，可以将window.省略（windows可以点出所有）

1.常用方法：

代码	名称
parseInt(String类型)	String类型转化为Int
parseFloat((String类型)	String类型转化为Int
isNaN(Object类型)	判断是否为NaN类型
alert(Object类型)	弹出提示
confirm(Object类型)	弹出确认取消框
prompt()	弹出文本输入框
console.log()	在控制台输入
eveal()

2.常用属性:

1. location 位置

   • location.href;地址

     location.href="http://www.dizhi.com";//必须书写http://,否则会在当前页面下查找
     

   • location.reload();刷新 |0

   • location.search;从?开始的地址

2. history 历史

   • history.length;当前标签历史记录数量
   • history.back();后退 |-1
   • history.forward():前进 |1
   • history.go(Int);n可取任意整数

3. screen屏幕

   • screen.width/height 屏幕宽高
   • screen.avaiWidth/avaiHeight 可用宽高(减去任务栏的宽度)

4. navigator 导航/帮助

5. document[见DOM]

3.常用事件:

事件	名称
onload	加载完成
onclick	窗口点击事件
onfocus	获取焦点事件
onblur	失去焦点事件
onload	加载完成

4.定时器

• 注意事项:

  1. 单位毫秒;
  2. 定时器内的方法可以直接执行;
  3. 多开定时器并不会同时显示多个,而是显示更快了;
  4. 命令并不能马上生效,要在设置的时间第一次到达之后才会生效;
  5. 要在定时器内结束,或者定时器父类方法的兄弟方法

  更多注意事项见案例技巧

• 开启定时器：

  var timer = setInterval(function(){},时间间隔);
  

• 停止定时器

  clearInterval(timer);
  

• 开启只执行一次的定时器

  setTimeOut();
  

DOM/document

1.获取元素

​ 添加时会清楚之前的内容，可以通过+=

• 获取id元素

  var x = document.getElementById("ID名");
  

  var y = x.value;
  x.value=“信息”;

• 通过标签名获取元素数组

  var x = document.getElementsByTagName("标签名");
  

• 获取class元素数组

  var x = document.getElementsByClassName();
  

• 通过name属性获取元素数组

  var x = document.getElementByName();
  

• 获取body元素

  document.body
  

2.添加元素

可被innerText取代

• 创建元素(不会立即生效,要写完下面三个方法中的任意一个)

var x = document.createElement("元素名");

• 添加元素到某个元素内部

父元素.appendChild(myh1);

• 插入元素到某个元素的上面

父元素.insertBefore(新元素,弟弟元素);

• 删除元素

父元素.removeChild("被删除的元素");

3.写入内容

• 注意事项：

  1. 获取值时,存在返回字符串;不存在这一选项返回空字符串“”;
  2. 写入时默认删除全部除非修改为+=
  3. 反人类:写入时是等于

• 写入文本(但凡是涉及到一点标签都得用innerHTML)

  x.innerText="文本";
  var y = x.innerText;//获得文本
  

• 写入HTML语言(可用于给标签添加属性)

  x.innerHTML="html语句";
  var y = x.innerText;//获得HTML语言
  

• 添加css样式

  x.style.css属性名称="属性值";
  var y = x.innerText;//获得CSS的属性值
  

  • 属性名称

  代码	属性名称
  marginTop/Right/Bottom/Left	外边距

• 添加属性

  x.checked="数值";(1.可以用true或flase 2.必须提前添加)
  

案例技巧

定时器

注意事项

• 初始化

  第一步必须初始化刚打开网页时内容的状态,否则会显示空白

  1. 使用onload进行初始化:

     不能在初始化中书写定时器,因为定时器要在时间第一到达时才能执行,会在这段时间内出现空白;

  2. 使用css进行初始化:

     css在大多数时不可用,因为css不能分辨出每一个图片之间的区别,分别设置太难;

• 运行时

  1. 失去焦点时关闭定时器,得到焦点时开启定时器:因为当失去焦点时,移动中的元素会暂停,当再次获取焦点时,一次性全部执行;
  2. 在有多次关闭开启操作时,在开启前再执行一次关闭,防止没有完全关闭,导致加速;
  3. 当定时器套定时器时,内部的定时器必须在结尾时执行一次结束,否侧会产生很多定时器;

1.普通轮播图

• 实现要求:
  1. 在同一个div内放置四个img并不溢出(此处溢出指的是不显示,因为div默认允许溢出)
  2. 通过定时器进行轮询(每次轮序要求实现:依次显示四个中的一个,其余的不显示);
• 实现方法:
  1. html上通过:父层div设置大小，子层设置float(float的属性:遇到div宽度不够时自动折行)移动到下一行;
  2. js上通过:父层设置定时器实现轮询,子层设置一个变量(每次轮询更改一次变量,y=x++%4,变量在0-4之间累加)和一个for循环(每次轮询实现一次for循环,每次for循环遍历(0-4),当变量的值==for循环遍历中的一个值时显示,其余的隐藏);
  3. 因为html+css的实现顺序是覆盖,变量的初始化要放在定时器外面否则每次都是0;

2.左右轮播图

• 实现要求:

  1. 在同一个div内放置四个img并不溢出(这里指脱离文档流),且不能折行;
  2. 图片自右向左进行移动,移动一下停一会;
  3. 当图片移动到最左面时回到最右面;

• 脱离文档流分析:

  脱离文档流方法:float/absoulte/display:none/fixed;(详细见html文档流)

  1. 运用float:因为要固定在一个div中,所以设置float后会将图片挤成一列,因此不适用
  2. 运用fixed:不适合该操作
  3. 运用diplay:该操作只适合配合使用
  • 运用absolute;

• 实现方法:

  1. html上通过:父层div设置大小,子层img设置大小,并设置absolute绝对定位(此时img脱离文档流,div不能对img产生影响);再对父层设置relative固定定位(此时img相对于div不脱离文档流);
  2. js上面:设置双层的定时器,内部定时器作为每多少秒移动一段距离(总距离/(移动距离/时间)这里要等于正数否则容易出错);

待学习知识

var h = document.body.parentElement.clientHeight;