美文网首页
网页编程day-42:JS中的对象

网页编程day-42:JS中的对象

作者: 开源oo柒 | 来源:发表于2019-09-28 22:45 被阅读0次

一、Array对象

1.数组的声明:

JS中的数组类似Java中的ArrayList,声明时可以不指定长度,长度是可变的,并且元素的类型可以混合存放。

(1)方式一:

var 数组名 = new Array();

(2)方式二:

var 数组名 = new Array(长度);

(3)方式三(推荐):

var 数组名 =[值1,值2...];

(4)方式四:

var 数组名 = new Array(值1,值2...);

2.数组的遍历:

(1)方式一(for):

For(var i=0;i<arr.length;i++){

console.log(Arr[i]);

}

(2)方式二(foreach):

for(var i in arr){//i代表数组的下标

console.log(Arr[i]);

}

3.常用的方法:

1)push():向数组的末尾添加一个或多个元素,并返回新长度;

2)pop():删除并返回数组的最后一个元素;

3)unshift():移除第一个元素;

4)splice(index,length):从指定下标开始,删除几个元素;

二、JS中的事件

1.什么是事件?

事件是可以被 JavaScript 侦测到的行为。

2.常用的事件:

1)onclick:鼠标点击某个对象;

2)ondblclik:鼠标双击某个对象;

3)onfocus:元素获得焦点;

4)onblur:元素失去焦点;

5)onchange:用户改变域的内容;

6)onmouseover:鼠标移上;

7)onmouseout:鼠标移出;

8)Onsubmit:提交;

9)onkeydown:键盘按下;

10)onkeyup:键盘被松开;

11)onmousemove:鼠标被移动;

三、BOM对象和DOM对象

1.BOM和DOM的关系:

(1)什么是Bom?

1)BOM是Browser Object Model的简写,即浏览器对象模型。

2)BOM由一系列对象组成,是访问、控制、修改浏览器的属性的方法;

3)BOM没有统一的标准(每种客户端都可以自定标准)。

4)BOM的顶层是window对象。

(2)什么是DOM?

1)DOM是Document Object Model的简写,即文档对象模型。

2)DOM用于XHTML、XML文档的应用程序接口(API)。

3)DOM提供一种结构化的文档描述方式,从而使HTML内容使用结构化的方式显示。

4)DOM由一系列对象组成,是访问、检索、修改XHTML文档内容与结构的标准方法。

5)DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。

6)DOM的顶层是document对象。

2.BOM对象Windows:

(1)三种弹框的方式:

1)Alert:只含有确实按钮;

2)Confirm:含有确定按钮和取消按钮的弹框;

3)Prompt:含有输入内容的弹窗;

(2)定时器:

1)SetTimeout:延迟指定的毫秒数调用一次函数,执行1次;

2)SetInterval:每隔指定的毫秒数调用一次函数,执行多次;

3)清除定时器:clearInterval()/clearTimeout();

(3)打开和关闭浏览器:

1)open():打开指定的页面;

2)close():关闭浏览器窗口;

3.location/history/navigator对象:

(1)Location对象:

1)Href:获取当前的URL地址;

2)Port:获取端口号;

3)Hostname:获取主机名称;

4)Host:获取主机加端口号;

5)Reload:刷新网页;

(2)history对象:

1)back():后退按钮;

2)forward():前进按钮

3)window.history.go(args):args如果是正数表示前进指定的页面;如果是负数表示后退指定的页面。

(3)Screen对象:

1)Screen.height;Screen.width;获得屏幕分辨率。

(4)Navigator对象:

window.navigator.userAgent:返回由客户机发送服务器的 user-agent 头部的值。

4.DOM结构点类型:

(1)DOM节点分类:

1)元素节点 element node;

2)属性节点 attribute node ;

3)文本节点 text node;

(2)DOM节点的关系:

1)父子关系(parent-child):<html> 元素作为父级,<head> 和 <body> 元素作为子级;

2)兄弟关系(Sibling):<a> 和 <h1> 元素就是兄弟关系;<title> 和 <h1> 元素并不是兄弟关系;

(3)DOM操作的内容:

1)查询元素(进行操作元素、或者元素的属性、文本);

2)操作文本;

3)操作属性;

4)操作CSS样式(一个特殊的属性style);

5)操作元素;

5.DOM编程获得元素的方式:

(1)方式一(直接获得):

1)通过id名称获得:

document.getElementById(id名称);

2)通过name获得节点对象:

document.getElementsByName("name");

3)通过class 的名称获得对象:

ocument.getElementsByClassName("class");

(2)方式二(间接获得):

1)获得div下的所有的子节点,空白的文本也是一个节点:div.childNodes;

2)Inp.previousElementSibling:获取当前节点的上一个节点不包含空文本;

3)Inp.nextElementSibling:获取当前节点的下一个节点不包含空文本;

6.操作元素属性:

(1)方式一:

1)直接操作修改元素的属性值;

var ty=inp1.type;

var va=inp1.value;

var na=inp1.name;

(2)方式二:

2)使用getAttribute获取元素属性;调用setAttribute()方法操作元素的属性;

7.操作元素样式:

(1)通过调用getELementById获取id名称的对象,获取css样式,只支持行内式;

(2)通过增加class类增加对应的css样式;Css的内嵌式。

相关文章

  • 网页编程day-42:JS中的对象

    一、Array对象 1.数组的声明: JS中的数组类似Java中的ArrayList,声明时可以不指定长度,长度是...

  • Javascript(6)

    JS中的DOM对象 标签是静的,js作用实现交互 一、定义 文档对象模型 文档:整个HTML网页 对象:网页中的每...

  • 面试题的总结与解答

    1,js中this指向的理解 在js面向对象编程里我们避免不了使用this,所以理解this指向对于在面向对象编程...

  • 浅谈JS中的面向对象

    浅谈JS中的面向对象 本文主要说说本人在JS中对面向对象的理解。 计算机编程语言主要分为面向过程式编程和面向对象式...

  • three.js实现网页3D渲染

    three.jsThree.js是当下最流行的网页3D渲染JS引擎,其主要是对WebGL编程以面向对象方式进行的封...

  • 初学JavaScript(了解js)

    一、定义 1、js js是一种可以用来给网页增加交互性的编程语言。js是一种脚本语言。js是一种面向对象的语言。 ...

  • 2018-01-18

    js中的面向对象核心 js是基于对象的编程语言,在后面的学习中我们通过一种模式使其转化成为面向对象的语言。js面向...

  • 终于真正理解js原型继承原理

    js面向对象编程中,可以用函数声明对象 以下声明两个对象, function Student() {} funct...

  • 3-javascript 构造函数

    js中面向对象编程是基于构造函数(consstructor)和原型链(prototype)的。 构造函数作为对象的...

  • javascript面向对象编程

    javascript面向对象编程一(封装) 通俗易懂绝对干货 JS面向对象编程

网友评论

      本文标题:网页编程day-42:JS中的对象

      本文链接:https://www.haomeiwen.com/subject/sihjyctx.html