【Javascript高级编程学习笔记（81）—— 富文本(1)】的更多相关文章

Javascript高级编程学习笔记（81）—— 富文本(1)

富文本编辑 富文本编辑又称为: WYSIWYG(What You See Is What You Get,所见即所得) 常用于博客等用途,虽然没有规范,但是在IE最先引入后其他的浏览器厂商也相继完成了对应功能的实现 该技术的本质就是在 HTML 页面中嵌入<iframe> 通过设置页面的 designMode 属性,使该页面可以被编辑 将该属性设置为 on 后文档就会变得可编辑 "off" 是默认值 以下方的 HTML 代码为例 <!DOCTYPE html>…

Javascript高级编程学习笔记（83）—— 富文本选区(3)

富文本选区 在富文本编辑器中使用 iframe 的 getSelection() 方法可以获取选中的文本 该方法是 window 对象和 document 对象的属性,调用后会返回一个当前选选择文本的 Selection 对象 selection 对象拥有下列属性: anchorNode: 选区起点所在节点 anchorOffset:选区起点在其所在节点中的偏移量 focusNode:选区终点所在节点 focusOffest:选区终点在其所在节点中的偏移量 isCollapsed:布尔值,表示选…

Javascript高级编程学习笔记（82）—— 富文本操作(2)

操作富文本 与富文本编辑器的交互的主要方式就是使用 document.execCommand() 方法 该方法可以对文档执行自定义命令,并且可以应用大多数格式 该方法接收三个参数: 要执行命令的名称 浏览器是否应该为当前页面提供用户界面 执行命令的值 为了保证跨浏览器的兼容性,最好保证第二个参数为 false,因为Firefox会在该参数为 true 时报错 命令 值(第三个参数) 说明 backcolor 颜色字符串 设置文档的背景颜色 bold null 将选中的文本转为粗体显示 copy…

Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本

绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘制文本的X坐标 绘制文本的Y坐标 最大像素宽度 这些方法都以以下属性为基础: font: 表示文本样式,大小,字体, 该属性以 CSS 中指定字体的格式来指定 textAlign: 表示文本对齐方式,可能的值有 "start" "end" "left"…

Javascript高级编程学习笔记（76）—— 表单（4）选择文本

文本框脚本 在HTML中文本框有两种实现方式: <input> <textarea> 这两种实现方式虽然在多数情况下表现一致,但是两者之间仍存在许多重要区别 对于<input>来说,如果需要展现一个文本框则需要将 type 特性设置为“text” 通过设置其 size 特性可以指定文本框中能够显示的最大字符数 通过 value 特性则可以设置文本框的初始值 通过设置 maxlength 特性可以设置文本框接收的最大字符数 <input type="tex…

Javascript高级编程学习笔记（64）—— 事件（8）键盘与文本事件

键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydown:当用户按下键盘上的任意键时触发,按住不放会重复触发 keypress:用户按下键盘上的字符键时触发,按住不放重复触发(按下ESC键也会触发) keyup:用户释放按键触发 所有元素都支持上述三个事件,但只有用户通过文本文本框输入文本时比较常用 文本事件只有一个就是 textInput 事件 该…

Javascript高级编程学习笔记（53）—— DOM2和DOM3（5）遍历

遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测浏览器对于该功能的实现可以使用以下代码 var supportTraversals = document.implementation.hasFeature("Traversal","2.0"); var supportsNodeIterator = (typeof d…

Javascript高级编程学习笔记（37）—— DOM（3）Element

Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 nodeType:1 nodeName:元素标签名 nodeValue:null parentNode:Document.Element tagName:用于访问元素的标签名(为了清晰,返回的值都是大写的标签名,在进行比较时需注意转换) HTML元素 Html 元素都使用 HTMLElement…

Javascript高级编程学习笔记（35）—— DOM（1）节点

DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上就是三种规范,只要是实现了这三种规范,那么这个语言就可以说是JS DOM(文档对象模型)也是一种规范,是针对HTML和XML文档的API(应用程序编程接口) DOM的功能主要是用于将文档解析为一个层次化的节点树,通过DOM提供的API让开发人员能够操作这棵节点树 用于对文档内容进行操作(增.删.改.…

Javascript高级编程学习笔记（15）—— 引用类型（4）RegExp类型

JS中处理字符串最常用的应该就是正则了 同样正则(RegExp)类型也是JS中引用类型的一种 ECMAScript通过 RegExp类型 来支持正则表达式 创建正则 var expression = / pattern / flags; 在上面创建正则实例中 pattern 部分可以是任意简单或复杂的正则表达式,每个正则表达式可以有一个或多个 flags 来标明正则的行为 使用构造函数创建 var expression = new RegExp("pattern","flag…

Javascript高级编程学习笔记（3）—— JS中的数据类型（1）

前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西. 那么这一篇,我们可以正式进入JS的世界了,emmm 前面的东西应该比较基础,大佬们不喜勿喷. 首先学习一门语言,最开始不出意外的话应该是先了解这门语言由什么类型的数据组成,毕竟语言都是建立在这些数据类型的基础之上的. 在介绍数据类型之前,我先大概说一下 typeof 操作符,这是JS中判断一个变…

JavaScript高级编程学习笔记(第三章之一）

继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感:变量.函数名.操作符都是大小写敏感的,比如“text”和“Text”不同. 标识符: 第一个字符必须是字母.下划线或者美元符号($); 之后的字符可以是字母.下划线.美元符号或者数字. 标识符中的字母可以是ASCII和Unicode字母比如À and Æ,但是不推荐这样使用. 按照惯例,ECMASc…

Javascript高级编程学习笔记（98）—— WebGL(4) WebGL上下文(2)

错误 Javascript与WebGL之间的一个最大区别在于,WebGL的操作一般不会抛出错误 如果希望获取WebGL的错误信息,那么就需要手动调用  gl.getError() 方法 该方法会返回以下错误常量之一: gl.NO_ERROR: 上一次操作没有发生错误 gl.INVALID_ENUM: 应该给WebGL方法传入常量但是传错了参数 gl.INVALID_VALUE: 在需要无符号数的地方传入了负值 gl.INVALID_OPERATION: 在当前状态下不能完成操作 gl.OUT_O…

Javascript高级编程学习笔记（97）—— WebGL(3) WebGL上下文(1)

WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 "webgl" 如果浏览器不支持,那么在获取webgl上下文的时候浏览器会返回 null 所以在使用前需要检测返回值 基本的获取 WebGL 代码如下: let drawing = document.getElementById("drawing"); // 检测浏览器…

Javascript高级编程学习笔记（96）—— WebGL(2) 类型化视图

类型化视图 类型化视图一般也被认为是一种类型化数组. 因为其元素必须是某种特定的数据类型,类型化视图都继承自 Dataview Int8Array: 表示8位二补整数(即二进制补数) Uint8Array: 8位无符号整数 Int16Array: 16位二补数 Uint16Array: 16位无符号整数 Float32Array: 32位IEEE浮点值 Float64Array: 64位IEEE浮点值 与上面同名的构造函数都支持三个参数: ArrayBuffer 字节偏移量 字节长度 返回一个类…

Javascript高级编程学习笔记（1）—— JS简介

此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) ECMAScript说白了是定义Javascript的标准,而这种标准与浏览器并无依赖关系. 我们现在前端所使用的Javascript只是遵循这一标准的,以浏览器为宿主平台的脚本语言. 遵循这一标准的脚本语言都可以称之为js. 而js的宿主平台除了我们最常用的浏览器平台之外,还有node,和Adobe…

Javascript高级编程学习笔记（57）—— 事件（1）事件流

事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事件,也就有了事件流的概念 事件流故名思意:也就是事件的流向,所以事件流描述的是从页面中接收事件的顺序 虽然事件流描述的都是事件的流向,但是事件流在当时的两个最大的浏览器厂商的提出中却是两个差不多完全相反的事件流概念 一是IE的冒泡事件流,二是Netscape的捕获事件流 事件冒泡 即事件开始时由最具…

Javascript高级编程学习笔记（80）—— 表单（8）表单序列化

表单序列化 随着 Ajax 的出现,表单序列化成为一种常见需求 以将表单信息序列化为查询字符串为例 我们可以利用表单的 type 属性,以及 name 和 value 实现对表单的序列化 序列化应满足以下几点要求: 对表单字段和值进行 url 编码,使用 & 符号分割 不发送表单的禁用字段 只发送勾选的复选框和单选按钮 不发送 type 为 "reset" 和 "button" 的按钮 多项选择为每一个选中的项单独一个条目 在点击提交按钮提交的情况下,也会发…

Javascript高级编程学习笔记（79）—— 表单（7）选择框脚本

选择框脚本 选择框由<option>和<select>元素创建,为了方便选择框的交互,除了提供表单字段的公有方法之外 HTMLSelectElement 类型还提供下列特有的属性和方法: add(newOption, relOption) : 向控件中插入新的 option 位于 relOption 之前 multiple : 布尔值,表示空间是否允许多选,多选 type 值为 select-multiple 否则为 select-one options : 所有 option 的…

Javascript高级编程学习笔记（78）—— 表单（6）HTML约束验证API

自动切换焦点 使用JS可以极大地提升表单的易用性 其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段 以下方的HTML代码为例: <input type="text" name="tel1" id="txtTel1" maxlength="3"> <input type="text" name="tel2" id="txtTel2"…

Javascript高级编程学习笔记（77）—— 表单（5）过滤输入

在日常实践中,我们常常会需要用户按照某种规则输入数据 但是文本框在默认情况下缺少验证数据的手段,因此需要使用JS来完成此类过滤输入的操作 通过事件和DOM的结合手段就能够将普通的文本框转换为功能型控件 屏蔽字符 有时候我们需要用户的输入不包含某些字符 所以我们可以通过阻止 Keypress 事件的默认事件来完成屏蔽字符的功能 以如下代码为例,可以实现一个只能输入数字的文本框 var textbox = document.getElementById("myInput"); text.a…

Javascript高级编程学习笔记（75）—— 表单（3）表单字段

表单字段 表单作为web应用中不可或缺的一部分,当然也是可以使用原生的 DOM 元素来访问的 除了标准的访问方式之外,每个表单都拥有一个 elements 属性,该属性保存着该表单所有 表单元素 的集合,该集合是一个有序列表,包含着所有的表单字段 这些元素在该集合中出现的顺序,与在文档中出现的顺序一致 在该集合中可以使用 name 和 在文档中的顺序 来对其中的元素进行索引 若有多个表单元素拥有相同的 Name,那么将会返回一个 nodelist 集合 以下方的HTML代码片段为例: <form…

Javascript高级编程学习笔记（66）—— 事件（10）变动事件

变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModified:在DOM结构发生变化时触发,即会在下面所有事件触发后触发 DOMNodeInserted:当一个节点作为子节点插入另一个节点中时触发 DOMNodeRemoved:节点从父节点中移除时触发 DOMNodeInsertedIntoDocument:一个节点被直接插入文档或通过子树间接插入文档后…

Javascript高级编程学习笔记（65）—— 事件（9）复合事件

复合事件 复合事件是 DOM3 中新增的一类事件,用于处理 IME 的输入序列 IME(输入法编辑器)通常用于输入物理键盘上找不到的字符,而这种输入方式通常需要同时按住多个键,但最终只输入一个字符 复合事件就是针对检测和处理这种输入而设计的 复合事件有以下三种: compositionstart:在IME的文本复合系统打开时触发 compositionupdate:向输入字段中插入新字符时触发 compositionend:在IME的文本复合系统关闭时触发,表示返回键盘的正常输入状态 在大体上复…

Javascript高级编程学习笔记（61）—— 事件（5）UI事件

UI事件 UI事件是指那些不一定与用户操作有关的事件 这些事件在DOM规范出现之前,都是以各种不同的形式存在于不同的浏览器 而在DOM事件中为了保证向后兼容,现有的UI事件如下: DOMActivate:表示元素已经被用户操作激活,该事件在DOM3规范中被废弃,因此不建议使用 load:当页面完全加载后在window对象上触发,图像加载完毕在 img 标签触发,嵌入内容加载完毕在 object 元素触发 unload:页面完全卸载后在 window 对象触发,框架卸载完成在框架集上触发,嵌入内容…

Javascript高级编程学习笔记（60）—— 事件（4）事件类型

事件类型 Web浏览器中可能发生的事件有许多种类型 不同类型的事件都有着自己独特的信息 在“DOM3级事件”规范中,规定了以下几类事件: UI事件    当用户与页面元素交互时触发 焦点事件    当元素失去或获得焦点时触发 鼠标事件    当用户通过鼠标在页面上执行操作时触发 滚轮事件    当使用鼠标滚轮或类似设备时触发 文本事件    当在文档中输入文本时触发 键盘事件    当用户通过键盘在页面执行操作时触发 合成事件    当为IME(输入法编辑器)输入字符时触发 变动事件    当底…

Javascript高级编程学习笔记（56）—— DOM2和DOM3（8）低版本IE范围

虽然IE9支持了DOM范围,但是IE8及更早版本并不支持DOM范围 所以IE8以下的更早版本的IE提出了与之类似的概念以供大家使用 也就是 文本范围 var range = document.body.createTextRange(); 文本范围是IE专有的特性,了解就好 范围的简单选择 实现范围选择的最简单方式就是使用范围的 findText()方法 该方法会找到第一次出现的给定文本,并将范围环绕该文本 若没有找到文本则返回 false,找到则返回 true 同样以下方的HTML代码为例:…

Javascript高级编程学习笔记（51）—— DOM2和DOM3（3）操作样式表

操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中<link>以HTMLLinkElement 类型表示 而<style> 以HTMLStyleELement类型表示 但是这两类样式表更加通用的类型则是继承自 StyleSheet 类型的 CSSStyleSheet 其中继承自 StyleSheet 类型的有以下属性: disable…

Javascript高级编程学习笔记（49）—— DOM2和DOM3（1）DOM变化

DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3的背景来历 首先DOM1级主要定义的是HTML和XML文档底层的结构,DOM2和DOM3两个级别则主要致力于为文档引入更加丰富的交互能力 与此同时这两个版本也支持了更加高级的XML特性 首先DOM2分为了许多模块 如下所示: 1. DOM2级核心 2.DOM2级视图 3.DOM2级事件 4.DOM2…

Javascript高级编程学习笔记（48）—— HTML5

HTML变动最大的版本应该就是HTML5了,这里就介绍一些 HTML5新增的DOM相关的API 与类相关的扩充 HTML4在普及后有一个十分重要的变化,即class属性使用的场景越来越多 所以HTML5新增了许多API致力于简化CSS类的用法 1. getElemenetsByClassName() 该方法接收一个参数(包含一个或多个类名的字符串),返回带有指定类名的元素的Nodelist,传入多个类名时类名的顺序没有影响 2. classList属性 该属性保存有一个 DOMTokenList…