分类目录归档:JavaScript

18-JavaScript-Dom4


笔记目录

图片

7 事件高级

7.1 注册事件概述

给元素添加事件,称为注册事件或者绑定事件

注册事件有两种方式∶传统方式方法监听注册方式

  1. 传统注册方式on开头

  2. 用on开头的事件:onclick

  3. <button onclick = "alert('hi~')"></button>
  4. btn.onclick = function{}
  5. 特点:注册事件的唯一性(同一个元素同一个事件只能设置一个处理函数)

  6. 方法监听注册方式addEventListener()

  7. w3...

Read more

19-JavaScript-BOM概述


笔记目录

图片

1 BOM概述

1.1 什么是BOM

  • BOM(Browser Object Model)即浏览器对象模型 ,它提供了独立于内容而与浏览器窗口进行交互的对象 ,其核心对象是 window
  • BOM 由 一系列相关的对象构成 ,并且每个对象都提供了很多方法与属性。
  • BOM 缺乏标准 ,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是 Netscape 浏览器标准的一部分,兼容性较差。

1.2 BOM的构成

BOM 比 DOM 更大,它包含 ...

Read more

17-JavaScript-Dom3


笔记目录

图片

5 节点操作

获取元素的方式:

图片

比较发现,用节点层级关系来获取元素更简单(DOM方法相当于绝对路径,节点方法相当于相对路径)。

5.1 节点概述

概念:网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node来表示。

基本组成:nodeType(节点类型) 、nodeName(节点名称)、nodeValue(节点值)

  • 元素节点nodeType为1
  • 属性节点nodeType为2
  • 文本节点nodeType为3(文本节点包含文字、空格、换行等)

节点操作(主要为元...

Read more

16-JavaScript-Dom2


笔记目录

图片

4 操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等,注意以下都是属性。

4.1 修改元素的内容

element.innerText
// 起始位置到终止位置的全部内容,但它去除了html标签,空格和换行。

element.innerHTML
// 起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
<!DOCTYPE html>
<html lang="en&quo...

Read more

15-JavaScript-Dom1


笔记目录

图片

1 引入

1.1 JS组成

图片

JS基础 阶段:ECMAScript

  • 只是标准规定的基本语法,做不了常用的网页交互效果

Web APIs 阶段:DOM;BOM

  • Web APIs是W3C组织的标准,可以用来做页面交互功能(需要基于ECMAScript)

1.2 API 和 Web API

1.APl (Application Programming Interface,应用程序编程接口):

一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需...

Read more

13-JavaScript-数组


笔记目录

图片

6 数组

  • 作用:数组(Array)可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。
  • 概念:数组是一组数据的集合,其中的每个数据被称作数组元素,在数组中可以存放任意类型元素。数组是一种将一组数据存储在单个变量名下的方式。

6.1 创建数组

  • new 关键字
var arr =new Array();   // 创建了一个空的数组
  • 数组字面量
//创建一个空的数组
var arr=[];
//创建一个有元素的数组
var arr=[1, 2, 3, 4];
//再数组...

Read more

14-JavaScript-对象数据类型


笔记目录

图片

10 自定义对象

  • JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象
  • 前面两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于我们JS独有的

概念:一组无序的相关属性和方法的集合。所有的事物都是对象,例如:字符串,数组,数值,函数等。

组成:

  • 属性:事物的特征,在对象中用属性表示(常用名词)
  • 方法:事物的行为,在对象中用方法表示(常用动词)

为什么需要:保存一个值时,可以使用变量。保存多个值时,可以使用数组,如果要保存一个人的完整信息,需要使用...

Read more

12-JavaScript-运算符与流程控制


笔记目录

图片

4 运算符

运算符( operator )也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。

4.1 算术运算符

图片

使用浮点数(小数)进行运算,会有精度问题,因此尽量使用整数进行运算

console.log(0.1 + 0.2);     // 0.3000000000004
console.log(0.07 * 100);      // 7.000000000001
var num = 0.1 + 0.2;
console.log(num == 0.3);    // f...

Read more

11-JavaScript-基础1


笔记目录

图片

1 初识JavaScript

1.1 JS是什么

  • JavaScript是一种运行在客户端(自己电脑上,有浏览器就够了。不需要远程服务器,安装运行环境)的脚本语言(Script:脚本)
  • 脚本语言∶不需要编译,运行过程中由JS解释器(JS引擎)逐行进行解释并执行
  • 现在也可以基于Node.js技术进行服务器端编程

所以,JS既可以做前台,也可以做后台!

1.2 JS的作用

  • 表单动态校验:密码强度检测,减轻服务器压力(JS产生最初的目的)
  • 网页特效:鼠标放上去有下拉菜单、切换广告条...
  • 服...

Read more

DOM操作


浏览器环境

JavaScript 语言最初是为 Web 浏览器创建的。

下面是 JavaScript 在浏览器中运行时的鸟瞰示意图:

浏览器环境,规格 - 图1

有一个叫做 window 的“根”对象。它有两个角色:

  1. 首先,它是 JavaScript 代码的全局对象,如 全局对象 一章所述。
  2. 其次,它代表“浏览器窗口”,并提供了控制它的方法。

例如,在这里我们将它用作全局对象:

function sayHi() {  alert("Hello");}// 全局函数是全局对象的方法:window.sayH...

Read more