18Function类型
Function类型 Function类型与函数 函数是这样的一段 Javascript代码,它只定义一次,但可能被执行或调用多次。 Function类型是 JavaScript提供的引用类型之一,通过 Function类型创建 Function对象。 在Javascript中,函数也是以对象的形式存在的。每个函数都是一个 Function对象。 函数名,本质就是一个変量名,是指向某个Function对象的引用。 每一个函数都是一个Function类型的函数、 12345678910111213function fn() { console.log("this is fn function");}var f = function () { console.log("this is f function");};// 函数是一个对象console.log(fn instanceof Object); //trueconsole.log(f instanceof Object); //true// 函数 ...
17Object对象
Object对象 创建对象的三种形式 创建空对象 12var obj1 = new Object(null);var obj2 = new Object(undefined); 创建一个与给定值对应类型的对象 12var obj3 = new Object(100);console.log(obj3); //[Number: 100] 当以非构造函数形式被调用时,Object 等同于 new Object()。 12var obj4 = Object(); //函数调用var obj5 = new Object(); //构造函数调用 属性描述符 Javascript提供了一个内部数据结构,用于描述对象的值,控制其行为,例如该属性是否可写、是否可配置、是否可修改以及是否可枚举等。这个内部数据结构被称为“属性描述符”。 对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。 数据描述符 键 值 默认值 value 该属性对应的值,可以是任何有效的Javascript值(数值,对象,函数等)。 undefiend writable 当且仅 ...
16JavaScript的面向对象
JavaScript中的面向对象 面向对象是什么 面向对象编程的全称为 Object Oriented Prograrnming,简称为OOP。面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。 面向对象编程可以看作是使用一系列对象相互协作的软件设计。面向对象程序设计的目的是在编程中促进更好的灵活性和可维护性。凭借其对模块化的重视,面向对象的代码开发更简单,更容易理解。 所有的程序是由一定的属性和行为对象组成的,不同的对象的访问通过函数调用来完成,对象间所有的交流都是通过方法调用,通过对封装对象数据,提高复用率。 面向对象编程的三个主要特征是:封装;2)继承;3)多态。 任何事物都可以看作对象,相似的可以看作一类。类是群体,对象是个体。 JavaScript是一种基于原型的面向对象语言,而不是基于类的。 封装 只关心入口和出口,而不关心过程 继承 继承通常是指类与类之间的关系。如果两个类都有相同的属性或方法,那么可以让一个类继承于另类,这样就不需要在前者再次定义同样的属性或方法。 多态 不同的对象可以定义具有相同名称的方法,方法是作用于所在的对象中。这种不同对象 ...
15BOM编程艺术
BOM编程艺术 什么是BOM BOM的全称为 Browser Object Model,被译为浏览器对象模型 BOM提供了独立于HTML页面内容,而与浏览器相关的一系列对象。主要被用于管理浏览器窗口及与测览器窗口之间通信等功能。 BOM由一系列对象构成,这些对象可以简单理解为是由各个览器所提供的,例如 Window对象等。 Window对象 window对象是BOM中最核心的对象 全局作用域 在浏览器环境中运行javascript逻辑时,在全局作用域中定义的对象、变量和函数都是Window对象的属性和方法。 123456789101112131415var test = 666console.log('test:', test)console.log('windows.test:', window.test)function t() { console.log('this is function')}t()window.t()delete window.testconsole.log(& ...
14表单操作
表单操作 获取表单 获取表单元素 通过常规方式 Document对象方式。document.getElementById('form')等。 通过Document的属性forms document.forms 返回结果为HTMLCollection。 通过表单的name名字。 此方法不推荐。因为在新版本的浏览器中可能不再支持。 如果返回结果为一个时类型为对象,多个时是集合。 获取表单组件元素 常规方式 Document对象方式。document.getElementById('form_input')等。 通过表单元素的属性elements 12var f = document.forms[0]console.log(f.elements) 表单操作 文本框的操作 选择当前文本框的所有内容 1234567<form action="#" id="myform"> <input type="text" id="username" name=& ...
13事件
事件类型 依赖于设备的输入事件:键盘事件和鼠标事件,这些事件都是直接和设备相关的。 独立于设备的输入事件:例如cick事件等,这些事件并没有直接与设备相关 用户界面的相关事件:用户界面事件属于较高级的事件,一般多用于表单中的组件。状 变化的相关事件:这些事件与用户行为无关,而是由网络或浏览器触发的。 特定API事件:这些事件多用于特定场景的实现,例如 HTML5中提供的拖放API中的事件等 与错误处理的相关事件 注册事件 注册事件指:就是将 Javascript函数与指定的事件相关联。 句柄:被绑定的函数成为该事件的句柄。 通过事件属性 123456<button id="btn1" onclick="fn()">按钮</button><script> function fn() { console.log('你终于点击了我') }</script> DOM中相关对象提供的事件属性 123456 ...
12样式操作
获取内联样式 1<p id="p1" style="color: red;">666</p> 内联样式即写在标签里的样式(返回文本类型) 12var pElement = document.getElementById('p1').getAttribute('style')console.log(pElement) 通过DOM对象获取。(返回对象) 12var pElement = document.getElementById('p1')console.log(pElement.style) 对象的方法如下: cssText 声明块的文本内容 length 属性数量 item() 属性名 getPropertyValue() 属性值 获取外联样式 12var stylesheetList = document.styleSheetsconsole.log(stylesheetList) 其中CSSRule对象包含一组css规则 ...
11Element对象
什么是Element对象 DOM的标准规范中提供了 Elementi对象,该对象提供了HTML页面中所有元素所具有的属性和方法。 DOM标准规范中提供了Node对象,主要是依靠DOM节点树结构访问和更新HTML页面的内容。 而DOM标准规范中提供了 Element对象,主要是依靠DOM元素树结构访问和更新HTML页面的内容。 定位元素 1234567<div class='container'> <div></div> <div></div> <div></div> <div></div> <div></div></div> getElementsByTagName 123var container = document.getElementsByClassName("container")[0]var elements = container.getElements ...
10Node对象
判断节点类型 节点类型 nodeName nodeType nodeValue Document文档节点 #document 9 null Element元素节点 元素节点的元素名 1 null Attr属性节点 属性节点的属性名 2 属性节点的属性值 Text文本节点 #text 3 文本节点的内容 获取父节点 获取父节点包括两个分别为 获取父节点:parenNode 获取指定节点的父节点,其父节点不一定是元素节点。 获取父节点元素:parentElement 获取指定节点的父元素节点,其父节点必须是元素节点。 通常情况下parentNode ≈ parentElement,但是特殊情况是<html>元素的父节点是document对象 获取子节点 firstChild 获取指定节点的第一个子节点 lastChild 获取指定节点的最后一个子节点 childNodes 获取所有的子节点,返回一个NodeList集合,但此集合为动态集合 12345var childNodes = parentElement.chi ...
09Document对象
什么是Document对象 document对象在DOM中代表了HTML页面 document也是DOM解析HTML页面的入口。 定位页面元素 定位页面元素常用的方法: 方法名 参数传入 作用 返回类型 示例 getElementById() ID名 通过页面元素的id属性值定位元素 单个节点,既是Node也是Element类型 getElementById('p1') getElementsByName() name 通过页面元素的name属性值定位元素 NodeList getElementsByName("pElement") getElementsByClassName() class 通过页面元素的class属性定位元素 HTMLCollection getElementsByClassName("pElements") getElementsByTagName() 元素名 通过元素的元素名定位元素 HTMLCollection getElementsByTagName("p" ...












