一、浏览器对象(BOM)的层次结构

20181029JS的event对象 JQuery的用法 - 图1

(一)windows的内置方法

1、setInterval

  1. 语法:setIntervalString||函数对象,时间t(毫秒数))<br /> 设置轮巡:每隔t时间自动执行字符串或者函数,并返回唯一的id值。

2、clearInterval

语法:clearInterval(id)
清除轮巡。

3、setTimeout

语法:setTimeout(String||函数对象,时间t(毫秒数))
设置延时:隔t时间后自动执行一次字符串或者函数,并返回唯一的id。

4、clearTimeout

语法:clearInterval(id)
清除延时。

(二)、History

前一步和后一步的操作
1、javascript:void(0);伪协议,样式类似于超链接,但不做超链接跳转。
例:
后退一个
前进一个

(三)、Location

地址栏
window.Location=”要跳转的地址”
可以取代超链接a标签。

(四)、Navigator

浏览器的内核信息。
navigator.userAgent 获取当前浏览器的内核信息。

二、灰掉操作

1、在html的标签中使用

在按钮中添加disabled属性,属性值为disabled或者disabled=“disabled”。

2、在JS中操作

标签对象.disabled=true,表示灰掉;
标签对象.disabled=false,表示亮起;

三、JS非布尔环境中的“与”和“或”

1、非布尔环境中的或“||”

语法:元素1 || 元素2
解释:根据值得非布尔环境得返回值:
如果前面为true,则返回前面的那个元素;
如果前面为false,则返回后面的那个元素。

2、非布尔环境中的与“&&”

语法:元素1&& 元素2
解释:根据值得非布尔环境得返回值:
如果前面为true,则返回后面的那个元素;
如果前面为false,则返回前面的那个元素。

四、event对象

1、定义

event对象是触发事件时的详细信息。
产生时机:一定是伴随着事件的发生而产生;
包含的内容:事件触发时的详细信息,比如:具体按的是哪个键,点击的是鼠标的左键还是右键等等。

2、获取event对象

语法:
(1)IE浏览器方式:var evt = window.event;
(2)其他浏览器和高版本的IE浏览器:var evt =event;(这里的event须在绑定事件的函数中以实参传入)
为规避不同浏览器的问题,选择以下写法:
var evt=window.event || event;

1)获取按键码

evt.keyCode
注意:根据浏览器不同,可能按键码代表的值不同。

2)获取鼠标按键码

evt.button
注意:根据浏览器不同,可能按键码代表的值不同。

3)获取浏览器内核信息

evt.Navigator.userAgent
例题:获取浏览器内核信息,选择合适的按键码

function exam(event){
    var evt=window.event||event;
    var but=evt.button;
    //获取浏览器内核信息,根据内核信息写对应的代码
    var msg=navigator.userAgent;
    if(msg.toLowerCase().indexOf("msie")!=-1){
        if(but==1||but==2){
            alert("你一定按的是左键或右键!!!");
        }
    }else{
        if(but==0||but==2){
            alert("你一定按的是左键或右键!!!");
        }
    }
}

五、JavaScript的继承

1、原型链继承

将父类的实例作为子类的原型。

2、构造继承

<script type="text/javascript">
    //person为父类
    var Person = function(name,age){
        this.name = name;
        this.age = age;
    }

    //student为子类
    function Student(name,age){
        this.id = 123456;
        this.tmp = Person;
        this.tmp(name,age);
    }

    //新建学生对象
    var stu = new Student("zhangsan",20);

    //测试
    function test(){
        console.log(stu);
        alert(stu.name)
        alert(stu.age)
        alert(stu.id)
    }
</script>
<html>
    <input type="button" value="test" onclick="test()"/>
</html>

3、实例继承

4、拷贝继承

5、组合继承

6、寄生组合继承

六、Json对象

1、声明方式

var 变量名={键:值,键:值…}
注意:键:String
值:Object
类似于java中Map容器:Map

2、往json对象中存值

Json对象.键名 = 值

3、取出json中的值

(1)方式一

语法:json对象.键名

(2)方式二

   语法:jason对象[键名]<br />**注意:中括号中,如果加引号表示键名,不加引号表示变量。**

3、遍历jason对象

for(var I in json对象){ }
注意:javaScript中的for(var i in 对象)循环:
(1)如果遍历的对象是数组时,变量i为数组的索引;
(2)如果遍历的对象时json对象时,变量i为json对象的属性。

六、JQuery的用法

1、jquery的准备工作

两种方式:相当于onload事件。

(1)第一种方式

语法:$(document).ready(function(){})

(2)第二种方式

语法:$(function(){})
注意:两种方式等效,一般写第二种

2、jquery选择器

jquery有许多选择器,需要时可以查找。此处罗列最基本的选择器:

(1)元素选择器

语法:$(“标签名”)

(2)id选择器

语法:$(“#id值”)

(3)类选择器

语法:$(“.class值”)

(4)包含选择器

语法:$(“祖先选择器 子孙选择器”)

(5)属性选择器

语法:$(“[属性名=值]”)

3、绑定事件

语法:对象.事件名(function(){要执行的内容})
注意:此处的事件名必须去掉on。