作者文章归档:zuojie@88.com

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 更大,它包含 DOM。

window 对象是浏览器的顶级对象,它具有双重角色。

  1. 它是 JS 访问浏览...

Read more

17-JavaScript-Dom3


笔记目录

图片

5 节点操作

获取元素的方式:

图片

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

5.1 节点概述

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

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

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

节点操作(主要为元素节点)的目的:获取元素

5.2 节点层级

利用DOM树可以把节点划分为不同的层级关系,...

Read more

16-JavaScript-Dom2


笔记目录

图片

4 操作元素

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

4.1 修改元素的内容

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

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

<head>
    <meta charset=&q...

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.API (Application Programming Interface,应用程序编程接口):

一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

2.Web API:

  • 针对浏览器,提供的一套操作...

Read more

13-JavaScript-数组


笔记目录

图片

6 数组

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

6.1 创建数组

  • new 关键字
var arr =new Array();   // 创建了一个空的数组
  • 数组字面量
//创建一个空的数组
var arr=[];
//创建一个有元素的数组
var arr=[1, 2, 3, 4];
//再数组里面可以放任意的数据类型
var arr=[1, 2, "3", &...

Read more

14-JavaScript-对象数据类型


笔记目录

图片

10 自定义对象

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

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

组成:

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

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

var arr=["张三丰","男",1...

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);    // false

4.2 递增和递减运算符

  • 递增:++
  • 递减: --

递增或递减运算符必...

Read more

11-JavaScript-基础1


笔记目录

图片

1 初识JavaScript

1.1 JS是什么

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

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

1.2 JS的作用

  • 表单动态校验:密码强度检测,减轻服务器压力(JS产生最初的目的)
  • 网页特效:鼠标放上去有下拉菜单、切换广告条...
  • 服务端开发(Node.js)
  • 桌面程序(Electron):桌面日历...
  • App(Cor...

Read more

10-H5新特性


目录内容

图片

23 HTML5 新增特性

23.1 语义化标签

图片

以前我们布局基本上都是使用div盒子,但是div盒子对于搜索引擎而言没有任何语义。我们可以将div再细分一下,生成一些语义化的布局标签。于是,HTML5新增加了一些新的标签、新的表单和新的表单属性等。

图片

注意,这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持。

23.2 多媒体标签

使用多媒体标签可以很方便地在页面中嵌入音频和视频,不再使用flash和其他浏览器插件。

23.2.1 视频<video>标签

<video src="文件路径" controls="c...

Read more

9-CSS-界面优化


目录内容

图片

21 用户界面优化

更改一些用户操作样式,提高用户体验,包括:

  • 更改用户的鼠标样式
  • 去掉表单轮廓
  • 防止表单域拖拽
  • 行内元素或者 行内块元素 的垂直对齐方式
  • 溢出文字用 ... 代替
  • 清除盒子边框重叠
  • 文字围绕浮动元素
  • 利用 行内块元素 进行布局
  • 三角形的拓展

21.1 鼠标样式 cursor:pointer;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equ...

Read more