js知识点清单

javaweb的js部分

自己总结的知识点清单，如果转发请注明出处，尊重原创，虽然写的不怎么样吧，哈哈 ，内容中有些时候是不连贯的，那是本人做的笔记，或者写的感想，不影响阅读。有错误的地方还请批评指正。

Js部分

Document.write(“  ”)   可以往HTML里面写文字或者标签也可以

对大小写敏感

Alert(内容)     弹出一个对话框

Js事件

1.    事件

事件是可以被javascript检测到的行为

2.    主要事件

属性                                                                       描述

 

onClick                                                            单击事件

onMouseOver                                                 鼠标胫骨事件

onMouseOut                                                   鼠标移出事件

onChange                                                       文本内容改变事件

onSelect                                                           文本框选中事件

onFocus                                                          光标聚集事件

onBlur                                                             移开光标事件

onload                                                             网页加载事件

onUnload                                                        关闭网页事件

js的DOM对象

1.    DOM简介

DOM操作HTML

1） JavaScript能改变页面中的所有HTML元素

2） JavaScript能够改变页面中的所有HTML属性

3） JavaScript能够改变页面中的所有css样式

4） JavaScript能够对页面中的所有事件作出反应

2.    DOM操作HTML

1.1、     改变HTML输出流

注意。绝对不要在文档加载完成之后使用document.write()。这会覆盖该文档

1.2、     寻找元素

通过id寻找HTML元素

通过标签名找到HTML元素

1.3、     改变HTML内容

使用属性:innerHTML

1.4、     改变HTML属性

使用属性：attribute

2.      DOM操作css

2.1、     通过DOM对象改变css

语法：document.getElementById(id).style.property=new style;

3.      DOM-EventListener:

方法：addEventListener();

removeEventListener();

 

addEventListener(“事件比如click”,”方法名或者匿名函数”);                   用于向指定元素添加事件句柄

removeEventListener();         移除方法添加的事件句柄

js事件详解

1.    事件流

描述的是在页面中接受事件的顺序

1.1、     事件冒泡

由最具体的元素接受，然后逐级向上传播至最不具体的节点（文档）

1.2、     事件捕获

最不具体的节点先接受事件，而最具体的节点应该是最后接受事件

2.      事件处理

2.1、     HTML事件处理

直接添加到HTML结构中，比如直接添加到button中的onclick属性

2.2、     DOM的0级事件

把一个函数赋值给一个事件处理程序属性

Document.getElementById(id).onclick=function (){      }

弊端：当拥有多个事件的时候，那么脚本前面的事件会被覆盖掉

2.3、     DOM的2级事件

addEventListener(“事件名”,”事件处理函数”,”布尔值”);

true：事件捕获

false：事件冒泡

removeEventListener();

2.4、     IE事件处理程序小于等于IE8的

attachEvent

detachEvent

3.      事件对象

在触发DOM事件的时候，都会产生一个对象。

3.1、     事件对象event：

1）：type:获取事件类型

2）：target：获取事件目标

3）：stopPropagation():阻止事件冒泡

不然会由小到大的范围执行一次

4):preventDefault():阻止事件的默认行为

Js内置对象

JavaScript中所有事物都是对象：字符串、数值、数组、函数、日期……

每个对象带有属性和方法

JavaScript允许自定义对象

1.    自定义对象

1）：定义并创建实例对象

People = new Object();

2）：使用函数来定义对象。然后创建新的对象实例

Functionpeople(age,name){

This.name=name;

This.age=age;

}

 

JsDOM对象控制HTML

1.    方法

getElementsByName()-------获取name

getElementsByTagName()-----------获取元素

getAttribute()----------------------获取元素属性

setAttribute()----------------------设置元素属性

childNodes()-----------------------访问子节点

parentNode()----------------------访问子节点

createElement()--------------------创建元素节点

createTextNode--------------------创建文本节点

insertBefore()----------------------插入节点

removeChild-----------------------删除节点

offsetHeight-----------------------网页尺寸（不包含滚动条）

scrollHeight------------------------网页尺寸（包含滚动条）

appendChild()---------------------添加到父节点的子节点

document.body.offsetHeight----------高度

document.body.offsetWidth----------宽度

 

js的浏览器对象

1.    window对象

window对象是BOM的核心，window对象是指当前的浏览器窗口，所有的JavaScript全局对象、函数以及变量均自动成为window对象的成员

全局变量是window的属性，

全局函数是window对象的方法

甚至HTML DOM的document也是window对象的属性之一。

1.1，     window尺寸

window.innerHeight------浏览器窗口的内部高度

window.innerWidth---------浏览器窗口的内部高毒

不包含工具栏和滚动条的

1.2，     window方法

window.open(“新的网页”.”网页名字”,”属性，比如width =100”)---打开新窗口

window.close()----关闭当前窗口

2.      计时器

2.1、计时事件：

通过JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为计时事件。

2.2、计时方法：

1):setInterval(函数，毫秒)----------间隔指定的毫秒数不停地执行指定的代码

Vara= setInterval(…………)

clearInterval(a)

clearInterval()-----用于停止setInterval()执行的函数代码

2）setTimeout()—暂停指定的毫秒数执行指定的代码

clearTimeoutl()-----用于停止setTimeout ()执行的函数代码

 

参数位置和上面的一样，可以通过调用自己的函数来重复执行代码，来达到不断刷新的目的

3.      history对象

3.1、history对象

Window.history对象包含浏览器的历史(url)的集合

3.2、     history方法

history.back()------------与浏览器的后腿按钮相同

history.forward()---------与浏览器中的点击按钮向前相同

history.go(数字)--------------进入历史中某个页面

4.      location对象

window.location对象用于获取当前页面页面的地址（URL），并把重定向到新的页面

4.1，location的属性

Location.hostname       返回web主机的域名

Location.pathname      返回当前页面的路径和文件名

Location.port               返回web主机的端口

Location.protocol         返回所使用的web协议

Location.href               属性返回当前页面的url

Location.assign()         方法加载新的文档。跳转到某个页面

5.      Screen对象

Window.screen对象包含有关用户屏幕的信息

属性：

Screen.availWidth------可用的屏幕的宽度

Screen.availHeight------可用屏幕的高度

Screen.Height----------屏幕高度

Screen.width--------屏幕宽度

Js面向对象

,面向对象函数名字，既可以当成对象，函数也可以当成

this它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象

定义方式：

Function People(name){

This._name=name;

}

People.prototype.say= function(){

Alert(“hello”);

}

这是一个js的面向对象

用函数模拟一个类       prototype      原型链

第二种方式

FunctionPerson(name){

Var_this={}----------相当于创建一个对象承载了构造器

_this._name=name;

_this.sayHello=function(){

Alert(“hello”);

}

Return _this;

}

继承：

FunctionStudent(){

 

}

Student.prototype =     new People();--------继承

Vars = new Student();

s.say();

第二种方式

FunctionTeacher(){

Var  _this =Person();

VarsuperSay = _this.sayHello;

_this.sayHello= function(){

superSay,call(_this);

alert(“THello”);

}

Return_this;

}

封装：

{function(){

Function People(){

 

}

People.prototype.say= function(){

Alert(“hello”);

}

Window.People= People;------------如果想要调用内部的用window对象

}()

};--------------要加一个分号

 原文地址http://www.bieryun.com/2532.html