JavaScript要点（不含有语言基础语法）

3）js能够改变页面中的所有CSS样式

document.getElementById("pid").style.backgrouneColor="red";

4）js能够对页面中所有事件做出反应

5）DOM对象控制HTML

六、事件句柄EventListener
事件句柄就是触发事件发生的一个动作。例如onclick就是当被点击的时候的句柄。
在js中可以添加事件句柄，这样可以减少很多代码量，
例如下面是传统的事件触发方式
按钮
在js代码中添加的事件句柄就如下:处理函数不能加（）括号符！
var x=document.getElementById("btn");
x.addEventListener("click",demo);//这里有两个参数，一个是事件的句柄，后面的是处理事件的函数

删除句柄用removeEventListener();

七，事件
1.事件流：页面中接受事件的顺序，有两个顺序，分别是事件冒泡（从里到外），事件捕获（从外到里）。

2.事件处理：
1）HTML事件处理：直接添加到HTML结构中

2）dom 0级事件处理：把一个函数赋值给一个事件处理程序属性

//0级事件处理清除事件处理很简单只要把onclick赋值为空即可。设置的时候是对象的时间设置为null而不是对象设置为null！
btn1.onclick=null;

//当有多个同个事件的处理程序的时候，前面的会被后面的事件处理程序清理掉。

btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="red";//被覆盖
};
btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="blue";
};

3）dom 2级事件处理：

 addEventListener("事件名"，“事件处理函数”，“true/false”)；

true:事件捕获
false：事件冒泡
清除事件处理要使用removeEventListener();

//dom 2级事件处理程序不会被覆盖而是会一步一步的解析执行。

4）IE事件处理程序。（小于等于IE8的版本中使用，跟addEventListener的使用方法相似。）

添加一个事件attachEvent
删除一个事件detachEvent

5）可以根据浏览器的版本不一样写不同的代码

if(btn.addEventListener){

     btn.addEventListener();
}
else{

     btn.attachEventListener()
}

3.事件对象：在触发dom事件的时候都会产生一个对象。

事件对象的属性：
1）type：获取事件类型

document.getElementById("btn").addEventListener("click",showType);
function showType(e){
     alert(e.type);
}

2）target：获取事件目标：哪里触发的这个事件，就是这个事件的对象是html元素中的什么元素。

document.getElementById("btn").addEventListener("click",showTarget);
function showTarget(e){
     alert(e.target);
}

3）stopPropagation（）：阻止事件冒泡：触发了最里面的元素事件的发生，但是这个事件发生之后包含此元素的上层元素的事件也会被触发！所以有的时候我们不希望这种情况的发生就会阻止事件冒泡的发生了。
event.stopPropagation();

4）preventDefault（）：阻止事件默认行为
event.preventDefault();

//dom 0级事件处理
// var btn1=document.getElementById("btn");
// btn1.onclick= function () {
// document.getElementById("pid").style.backgroundColor="red";
// };
//
// btn1.onclick=null;
////dom 2级事件处理,处理函数不能加（）括号符！
//

//var btn=document.getElementById("btn");
//btn.addEventListener("click",demo1);
//
//function demo1(){
//
//// alert("dom 2级事件处理！");
//
// document.getElementById("pid").innerHTML="dom 2级事件处理！";
//}

//事件对象

//1.获取事件对象的类型

//document.getElementById("btn").addEventListener("click",showType);
//function showType(e){
// alert(e.type);
//}

//2.获取事件对象的目标

//document.getElementById("btn").addEventListener("click",showTarget);
//function showTarget(e){
// alert(e.target);
//}

八，内置对象
1.什么是对象：js中所有事物都是对象，例如字符串，数组，时间，数值，函数等，每个对象都会带有属性和方法；
2.创建对象：
1）使用new object创建
people=new objet();
people.name="krys";
people.age=20;
2）直接创建：
people={name:"krys",age:20,addres:"guangdong"};
3）使用函数创建

funtion people(name,age){
     this.name=name;this.age=age};
son=new people("jess",20);//然后创建一个对象

document.getElementById("btn").addEventListener("click",creat);
function people(name,age){
          this.name=name;
          this.age=age;
     }
 function creat(){
          var name1= document.getElementById("name").value;
          var age1=document.getElementById("age").value;
          son=new people(name1,age1);
          alert(son.name);
          alert(son.age);
          }

3.字符串对象：String：字符串可以使用双引号也可以使用单引号！

属性：length：str.length可得到字符串的长度、
indexOf(),在字符串中查找字符串，并返回字符串所在的位置。

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){

              alert("r所在的位置是"+name.indexOf("r"));
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

match(),在字符串中匹配字符串，如果字符串1在字符串中存在，则将字符串1打印出来，如果没有就返回NULL

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){
              alert(name);
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

replace(a,b) a是要替换掉的原来的字符或字符串，b是新的字符或字符串

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){

              alert(name.replace("krys","krys小仙女"));
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

toUpperCase()转换成大写
toLowerCase()转换成小写
split()分隔线，将一个字符串分隔成若干部分，如str="hello,world,welcome,to";var s=str.split(","); s[0]="hello";

4.Date对象
1）创建Date对象：
var date=new Date();
alert(date);
var h=date.getHours();//时
var m=date.getMinutes();//分
var s=date.getSeconds();//秒

2)获取具体年份：getFullYear（）；
3）获取毫秒数：getTime();
4)设置具体的日期：setFullYear();
5)获取星期：getDay();

6）设置每秒更新一次
setTimeout(function(){

 showTime();},1000);

//每秒调用一次showTime函数

5.数组对象：
1)数组的创建：var a=["1","krys","ok"];
var a=new Array(); a[0]="hell0"; a[1]="world";
var a=new Array("hello","world","welcome");
2)数组常用的方法：
concat()合并数组如 a=["krys"];b=["tal"];a.concat(b)=krystal;
sort()排序数组 var a=["a","c","b"];a.sort();->a b c (默认从低到高排序)
设置为降序：a.sort(funtion(a,b){return a-b;})
push()在数组末尾添加一个元素var a=["a","c","b"]; a.push("d");
reverse()翻转，对称中心点相互交换：a.reverse()= c b a ;

6.math对象
1）常用函数
round()四舍五入 Math.round(2.5)=3;
random()返回0~1之间的随机数 Math.random();
可以转换成整数：parseInt(Matn.random()*10);
max()返回最大值
min()返回最小值
abs()返回绝对值

九，浏览器的内置对象BOM（browser object model）
1，window对象：大部分对象的祖先，最高级别对象之一。

1）简介：Window对象是指当前的浏览器窗口，所有的js全局变量函数以及变量都是Window对象的成员。
其中，全局变量是window对象的属性，全局函数是window对象的方法。

2）获得浏览器内部窗口的尺寸（即内容区域的尺寸，不包括滚动条工具栏等）：
window.innerHeight浏览器窗口的内部高度,window.innerWidth，浏览器的内部宽度。

3）使用window.open(url)可以打开一个窗口，使用window.close()可以关闭当前窗口。

2,history对象
window.history()对象包含浏览器的历史（url）的集合
有三个方法：
1）history.back()后退，返回到前一页
2）history.forward()，前进，进入到下一页
3)history.go()，带参数，参数就是要进入的页数，-1是前一页，-2是前两页，依次类推，当前页是0.

3，计时器
通过使用js，在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行
有两个函数
一个是setInterval()-间隔指定的毫秒数持续的执行指定的代码
一个是setTimeout()-暂停指定的毫秒数后执行指定的代码。
可以使用setTimeout来实现setInterval()的功能：就是在调用的函数代码里调用自己！
setInterval(funtion(){},1000);
setTimeout(funtion(){},1000);

可以使用clearInterval（），clearTimeout()来清楚这个调用，

4，Location对象
用于获得当前页面的地址，并把浏览器重定向到新的页面（其实我的理解就是解析当前地址）

Location对象的属性：
location.hostname:返回web主机的域名
location.pathname:返回当前页面的路径和文件名
location.port:返回web主机的端口
location.protocol:返回所使用的web协议
location.href:返回当前页面的url
location.assign()加载新的文档，参数是所要加载文档的路径。

window.location.hostname;

5，screen对象
window.screen对象包含有关用户屏幕的信息
screen.avaiilWidth;//可用的屏幕高度
screen.availHeight;//可用的屏幕宽度
screen.height;//屏幕高度
screen.width;//屏幕宽度

6，navigation对象
7，弹出窗口，cookie

十，js面向对象思想