JavaScript
关注
分享
扫一扫
文章平均质量分 78
吴声子夜歌
个人学习记录
展开
-
JS--常用的校验正则表达式
类型正则表达式描述数字校验^[0-9]*$0~n个数字^\d{n}$n位整数^\d{n,}$至少n位的数字^\d{m,n}$m~n位的数字^([1-9][0-9]*)+(.[0-9]{1,2})?$非零开头，且最多带两位小数的数字^(\-)?\d+(\.\d{1,2})?$带1~2位小鼠的整数或负数^[1-9]\d...原创 2019-09-30 20:51:01 · 827 阅读 · 0 评论 -
JS--JavaScript键盘事件响应顺序（keydown->keypress->keyup）
键盘响应顺序当按下键盘时，会触发多个事件，它们将按顺序发生。对于字符键来说，键盘事件的影响顺序如下：1.keydown2.keypress3.keyup对于非字符键（如功能键或特殊键）来说，键盘事件的响应顺序如下：1.keydown2.keyup如果按下字符键不放，则keydown和keypress事件将逐个发生，直至松开按键。如果按下非字符键不放，则只有keydown事件持续...原创 2019-09-27 18:14:52 · 1905 阅读 · 0 评论 -
JS--JavaScript使用键盘事件、键盘事件属性（keyCode、charCode、target...）、使用键盘控制页面元素
键盘事件当用户操作键盘时会触发键盘事件，键盘事件主要包括下面3种类型：keydown： 在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是Opera浏览器不支持这种连续操作。该事件处理函数返回false时，会取消默认的动作（如输入的键盘字符，在IE和Safari浏览器下还会禁止keypress事件响应）keypress： 按下某个键盘键并释放时触发。如果按住某个键，会不断触发...原创 2019-09-27 17:52:11 · 2918 阅读 · 0 评论 -
JS--JavaScript使用鼠标事件（click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove）
鼠标事件事件类型说明click单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上，并按了回车键时，同样会触发事件dblclick双击鼠标左键时发生，如果右键也按下则不会发生mousedown单击任意一个鼠标按钮时发生mouseout鼠标指针位于某个元素上，且将要移出元素的边界时发生mouseover鼠标指针移出某个元素，到另一...原创 2019-09-26 23:10:13 · 11457 阅读 · 0 评论 -
JS--JavaScript使用event对象、event对象属性、方法和事件委托
使用event对象event对象由事件自动创建，代表事件的状态，如事件发生的源节点，键盘按键的响应状态，鼠标指针的移动位置，鼠标按键的响应状态等信息。event对象的属性提供了有关事件的细节，其方法可以控制事件的传播。2级 DOM Events 规范定义了一个标准的事件模型，它被除了IE怪异模式以外的所有现代浏览器所实现，而IE定义了专用的、不兼容的模型。在DOM事件模型中，event对象...原创 2019-09-26 21:38:48 · 1162 阅读 · 1 评论 -
JS--JavaScript注册事件addEventListener()、销毁事件removeEventListener()
注册事件在DOM事件模型中，通过调用对象的addEventListener()方法注册事件，用法如下：element.addEventListener(String type, Function listener, boolean useCapture);type：注册事件的类型名。事件类型与事件属性不同，事件类型名没有on前缀。例如，对于事件属性为onclick来说，所对应的事件类型应...原创 2019-09-26 19:59:58 · 6761 阅读 · 0 评论 -
JS--JavaScript事件处理基础、事件模型、事件流（冒泡型、捕获型、混合型）、绑定事件（静态绑定和动态绑定）、事件处理函数
JavaScript事件基础JavaScript与用户之间的交互是通过事件驱动来实现的，事件驱动是面向对象程序设计的重要概念，其核心就是以消息为基础、以事件来驱动（message based， event driven）。当网页对象发生特定事件时，浏览器会自动生成一个事件对象（Event），事件对象通常会沿着DOM节点进行传播，知道被脚本捕获。如果为事件绑定响应程序（事件处理函数），浏览器就会调...原创 2019-09-26 19:09:53 · 1195 阅读 · 0 评论 -
JS--JavaScript属性节点特性，创建属性节点，读取、设置、删除属性（getAttribute、setAttribute、removeAttribute）
属性节点属性节点由Attr类型表示，在文档树种被称为元素的特性，习惯称之为标签的属性。属性节点具有以下特征：nodeType值为11nodeName值为特性的名称nodeValue值为null在HTML中不包含子节点在XML中子节点可以是Text、EntityReference访问属性节点Attr是Element的属性，作为一种节点类型，它继承了Node类型的属性和方法。不过A...原创 2019-09-26 17:33:19 · 2325 阅读 · 1 评论 -
JS--JavaScript文本节点特性，访问、创建、操作文本节点（appendData、deleteData、insertData、replaceData...）
文本节点文本节点由Text类型表示，包含纯文本内容，或转义后的HTML字符，但不能包含HTML代码。Text节点具有以下特征：nodeType值为3nodeName值为“#text”nodeValue值为节点所包含的文本parentNode是一个Element类型节点不包含子节点访问文本节点使用文本节点的nodeValue属性或data属性可以访问Text节点中包含的文本，这两...原创 2019-09-26 11:24:33 · 1942 阅读 · 0 评论 -
JS--JavaScript元素节点Element特性、访问元素（getElementById、getElementByTagName）、创建元素createElement
元素节点Element类型是最常用的节点类型，它具有以下特征：nodeType值为1nodeName值为元素的标签名称，也可以使用tagName属性。在HTML中，返回标签名始终为大写，在脚本中比较需要全部小写化：if(element.tagName.toLowerCase() == “div”){}nodeValue值为nullparentNode是Document或Element类...原创 2019-09-26 10:22:20 · 2334 阅读 · 0 评论 -
JS--JavaScript页面事件（页面初始化onload、页面卸载onunload）、beforeunload事件
页面初始化load事件类型在页面完全加载完毕的时候触发。该事件包含所有的图形图像、外部文件（如CSS、JS文件等）的加载，也就是说，在页面所有内容全部加载之前，任何DOM操作都不会发生。为window对象绑定load事件类型的方法有两种：1. 直接为window对象注册页面初始化事件处理函数：window.onload = function(){ alert("页面加载完毕");}2...原创 2019-09-27 20:05:14 · 6019 阅读 · 0 评论 -
JS--JavaScript焦点处理（获取焦点focus、失去焦点blur）
焦点处理焦点处理主要包括focus（获取焦点）和blur（失去焦点）事件类型。所谓焦点，就是激活表单字段，使其可以响应键盘事件。获取焦点：focus当单击或使用Tab键切换到某个表单元素或超链接对象时，会触发该事件。focus事件是确定页面内鼠标当前定位的一种方式。在默认情况下，整个文档处于焦点状态，但是单击或者使用Tab键可以改变焦点位置。‘示例：在页面加载完毕后，将焦点转移到表单中的第...原创 2019-09-27 21:18:28 · 83975 阅读 · 0 评论 -
JS--JavaScript选择文本（select事件）、检测字段值（change事件）
选择文本当在文本框或文本区域内选择文本时，将触发select事件。通过该事件，可以设计用户选择操作的交互行为。在IE9+、Opera、Firefox、Chrome和Safari中，只有用户选择了文本，而且要释放鼠标，才会触发select事件；但是在IE8及更早版本中，只要用户选择了一个字母，不必释放鼠标，就会触发select事件。另外，在调用select()方法时也会触发select事件。示...原创 2019-09-27 22:26:32 · 8538 阅读 · 1 评论 -
JS--JSON解析字符串的方法详解
JSON解析字符串的方法在服务器与客户端之间进行数据交换时，通常采用JSON字符串的方式传递数据。当客户端获得JSON字符串时，需要将字符串转换成JSON对象，然后再进行处理。JSON字符串和JSON对象：//JSON字符串var jsonStr = "{name:'tom',age:18}";//JSON对象var jsonObject = {name:'tom', age:18};...原创 2019-09-30 16:20:21 · 1732 阅读 · 0 评论 -
JS--JSON简介、结构、数据类型
JSON简介XML虽然具有跨平台和跨语言的优势，但是在服务器端生成XML以及客户端解析XML时，往往会导致代码复杂，开发效率极低。JSON为Web应用开发者2提供了另一种数据交换格式。JSON（JavaScript Object Notation）是一种轻量级数据交换格式，是存储和交换文本信息的语法规范。JSON采用完全独立于语言的文本格式，比XML更小、更快、易于解析，是一种理想的数据交换语...原创 2019-09-30 15:45:02 · 1494 阅读 · 0 评论 -
JS--AJAX获取JSON数据、获取头部信息
获取HTML文本通过XMLHttpRequest对象的responseText属性获取返回的JSON数据字符串，然后可以使用evaluate()方法将其解析为本地JavaScript对象，从该对象中再读取任何想要的信息。示例：将JSON对象字符串转换为本地对象<%-- Created by IntelliJ IDEA. User: 19798 Date: 2019/9/28...原创 2019-09-29 23:27:23 · 3095 阅读 · 0 评论 -
JS--AJAX获取HTML文本、获取JavaScript脚本
获取HTML文本设计响应信息为HTML字符串是一种常用方法，这样再客户端就可以直接使用innerHTML属性把获取的字符串插入到网页中。示例：<%-- Created by IntelliJ IDEA. User: 19798 Date: 2019/9/28 Time: 9:39--%><%@ page contentType="text/html;ch...原创 2019-09-29 22:54:37 · 3202 阅读 · 0 评论 -
JS--AJAX获取XML数据、XMLHttpRequest对象响应属性
XMLHttpRequest对象响应属性XMLHttpRequest对象通过responseText、responseBody、responseStream或responseXML属性获取响应信息，说明如下：响应信息说明responseBody将响应信息正文以Unsigned Byte数组形式返回responseStream以ADO Stream对象形式返回响应字...原创 2019-09-29 21:47:58 · 2080 阅读 · 0 评论 -
JS--AJAX跟踪状态readyState、终止ajax请求abort()方法
跟踪状态XMLHttpRequest对象通过readyState属性实时跟踪异步交互状态。一旦当该属性发生变化时，就触发readystatechange事件，调用该事件绑定的回调函数。readyState属性值：返回值说明0未初始化。表示对象已经建立，但是尚未初始化，即尚未调用open()方法1初始化。表示对象已经建立，即尚未调用send()方法2发送数...原创 2019-09-29 20:51:34 · 2158 阅读 · 0 评论 -
JS--AJAX建立XMLHttpRequest连接、发送GET请求、发送POST请求
建立XMLHttpRequest连接创建XMLHttpRequest对象之后，就可以使用该对象的open()方法建立一个HTTP请求。open()方法用法如下：oXMLHttpRequest.open.(bstr Method, bstr Url, var Async, bstr User, bstrPassword);...原创 2019-09-29 20:02:13 · 2255 阅读 · 0 评论 -
JS--AJAX基础、获取Ajax引擎对象、解决XMLHttpRequest兼容问题
AJAXAJX即（asynchronous Javascript And XML）异步JavaScript和XML，可以使网页实现异步更新，就是不重新加载整个页面的情况下，对网页的某部分进行更新（局部刷新）。传统的网页如果需要更新内容，必须重载整个网页页面。XMLHttpRequest是JavaScript一个外挂组件，用来实现客户端与服务器端异步通信，所有Ajax应用都要借助该组件才能够实现...原创 2019-09-28 09:50:49 · 1171 阅读 · 0 评论 -
JS--JavaScript提交表单（submit事件）、重置表单、取消默认提交表单（单击按钮、回车）
提交表单使用< input > 或 < button >标签都可以定义提交按钮，只要将type属性值设置为“submit”即可，而图像按钮则是通过将 < input >的type属性值设为“image”。当单击按钮或图像按钮时，就会提交表单。submit事件类型仅在表单内提交按钮，或者在文本框中输入文本时按回车键触发。示例1：单击【提交】按钮后，触发sub...原创 2019-09-27 23:12:09 · 16372 阅读 · 0 评论 -
JS--JavaScript节点插入、删除、替换、克隆(appendChild、cloneNode、insertBefore、normalize、removeChild、replaceChild)
操作节点Node类型为所有节点定义了很多原型方法，以方便对节点进行操作，其中获得所有浏览器一致支持的方法如下表：Node类型原型方法说明：方法说明appendChild()向节点的子节点列表的结尾添加新的子节点cloneNode()复制节点hasChildNodes()判断当前节点是否拥有子节点insertBefore()在指定的子节点前插入新的...原创 2019-09-25 23:31:37 · 4867 阅读 · 0 评论 -
JS--JavaScript访问节点（childNodes、parentNode、firstChild、lastChild、nextSibling、previousSibling）
访问节点通过节点之间的树形关系，可以定位文档中的每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历。ownerDocument：返回当前节点的根元素（document对象）parentNode：返回当前节点的父节点。所有的节点都仅有一个父节点childNodes：返回当前节点的所有子节点的节点列表firstChild：返回当前节点的首个子节...原创 2019-09-25 22:17:22 · 3141 阅读 · 0 评论 -
JS-JavaScript节点Node的nodeName和nodeValue、节点之间的树状关系
节点的名称和值使用节点的nodeName和nodeValue属性可以读取节点的名称和值。这两个属性完全取决于节点的类型，具体如下表：节点的nodeName和nodeValue属性说明：节点类型nodeaName返回值nodeValue返回值Document#documentnullDocumentFragment#document-fragmentnull...原创 2019-09-25 21:36:57 · 2197 阅读 · 0 评论 -
JS--JavaScript数组Array(join、split、reverse、concat、slice)详解
JavaScript数组数组（Array）是一组有序数据集合，拥有大量方法，适合完成一些复杂的运算。定义数组定义数组通过构造函数Array()和运算符new来实现，具体方法如下：1. 定义空数组：var a = new Array();通过这种方式定义的数组是 一个没有任何元素的空数组。2. 定义带有参数的数组：var a = new Array(1,2,3,"4","5");...原创 2019-09-22 19:24:55 · 3873 阅读 · 0 评论 -
JS--JavaScript对象类型
JavaScript对象对象（Object）是面向对象编程的核心概念，它是已经命名的数据集合，也是一种比较复杂的数据结构。创建对象在JavaScript中，对象是由new运算符生成，生成对象的函数被称为类（或称构造函数、对象类型）。生成的对象被称为类的实例，简称为对象。实例：调用系统内置类型函数，实例化几个特殊对象var o = new Object(); //构造原型对象var da...原创 2019-09-22 18:26:58 · 1095 阅读 · 0 评论 -
JS--JavaScript函数（匿名函数、闭包函数等）详解
JavaScript函数JavaScript是函数式编程语言，在JavaScript脚本种可以随处看到函数，函数构成了JavaScript源码的主体。定义函数定义函数的方法有两种：使用function语句声明函数//方式一：命名函数function f(){ //函数体}//方式二：匿名函数var f = function(){ //函数体}命名函数的方法也被称为...原创 2019-09-22 16:57:31 · 2146 阅读 · 1 评论 -
JS--JavaScript数据类型（数值、字符串、布尔值）详解
JavaScript数据类型JavaScript是一种弱类型语言，在定义变量时不需要指定类型，一个变量可以存储任何类型的值。不过这并不等于JavaScript不区分数据类型，只不过在运算时，JavaScript能自动转换数据类型。但是在特定条件下，还需要用户了解JavaScript的数据类型。在JavaScript中，数据存在两种截然不同的存储方式。其中一种是直接存储数据，称为值类型数据；另一...原创 2019-09-22 11:53:56 · 3235 阅读 · 0 评论 -
JS--JavaScript语句（循环语句、跳转语句、异常处理语句、function语句）详解
JavaScript循环语句循环语句就是能够重复执行相同操作的语句。作为JavaScript的基本结构，循环语句在应用开发中经常使用。与if语句一样，循环语句也有两种基本语法形式:while语句和for语句。1. while语句：while(condition){ statements}while语句在每次循环开始之前都要计算condition表达式。如果为true，则执行循环体的语...原创 2019-09-22 10:45:13 · 1452 阅读 · 0 评论 -
JS--JavaScript语句（表达式语句、语句块、条件语句if、switch）详解
JavaScript语句语句就是JavaScript指令，通过这些指令可以执行特定任务，或者设计程序的逻辑结构。从功能上看，JavaScript语句可以分为声明语句、表达式语句、选择语句、循环语句、控制语句等。表达式语句和语句块如果再表达式的尾部附加一个分号就会形成一个表达式语句。JavaScript默认独立一行的表达式也是表达式语句，解析时自动补加分号。表达式语句是最简单、最基本的语句...原创 2019-09-22 09:57:28 · 1708 阅读 · 0 评论 -
JS--JavaScript表达式和运算符（结合性、优先级）详解
JavaScript表达式表达式指可以运算，且必须返回一个值的式子。表达式一般由值、变量、运算符、子表达式构成。最简单的表达式可以是一个简单的值或变量：1 //数字表达式"a" //字符常表达式true //布尔值表达式a //变量表达式值表达式的返回值是它本身，变量表达式的返回值为变量存储或引用的值。把这些简单的表达式合并为一个复杂的表达式，那么连接这些表达式的符号就是运...原创 2019-09-21 23:03:54 · 1834 阅读 · 0 评论 -
JS--JavaScript变量详解(全局变量、局部变量)
JavaScript变量JavaScript使用var关键字声明变量。声明变量的5种常规用法如下：var a; //声明单个变量。var关键字与变量名之间以空格分隔var b, c; //声明多个变量。变量之间以逗号分隔var d = 1; //声明并初始化变量。等号左侧是变量名，等号右侧是值var e = 2, f = 3; //声明并初始化多个变量。以逗号分隔多个变量...原创 2019-09-21 21:07:22 · 4045 阅读 · 1 评论 -
JS--JavaScript语法基础（编码、注释、关键字、保留字）
JavaScript语法基础1. 语言编码：JavaScript语言建立在Unicode字符集基础之上，因此在脚本中，用户可以使用双字节的字符命名常量、变量或函数等。var 我 = “张三”; //声明双字节变量名称document.write("<h1>" + 我 + "</h1>");但是，考虑到JavaScript脚本嵌入在网页中，如果网页编码与脚本字符编...原创 2019-09-21 20:31:38 · 5465 阅读 · 3 评论 -
JS--JavaScript数据类型检测（typeof、constructor）详解
检测数据类型typeof运算符能够检测数据类型，其返回一个用于识别操作数类型的字符串。对于任何变量来说，typeof运算符总是以字符串的形式返回以下6种类型之一：“number"“string”“boolean”“objcet”“function”“undefined”不幸的是，在使用typeof检测null值时，返回的是"object"，而不是"null"。可以定义一个简单...原创 2019-09-22 20:27:45 · 2516 阅读 · 0 评论 -
JS--JavaScript数值计算与类型转换详解
JavaScript数值计算JavaScript在执行数值运算时，常会出现浮点数溢出问题。例如：0.1 + 0.2 不等于 0.3num = 0.1 + 0.2;//0.300000000000000004这是JavaScript中最常报告的Bug，并且这是遵循二进制浮点数算数标准（IEEE 754）而导致的结果。这个标准适合很多应用，但它违背了数字基本常识。幸运的是，浮点数中的整数运...原创 2019-09-22 21:19:29 · 1911 阅读 · 0 评论 -
JS--JavaScript增强数组排序（根据奇偶性排序、整数浮点数分开排序）
增强数组排序sort方法不仅仅按字母顺序进行排序，还可以根据其他顺序执行操作。这时就必须为方法提供一个比较函数的参数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b，其返回值如下：如果根据自定义评判标准，a小于b，在排序后的数字中a应该出现在b之前，就返回一个小于0的值。如果a等于b，就返回0.如果a大于b，就返回一个大于0的值。1...原创 2019-09-22 22:45:59 · 1518 阅读 · 0 评论 -
JS--JavaScript节点Node概述、节点类型、nodeType详解
节点Node概述DOM 1.0定义了Node接口，该接口为DOM的所有节点类型定义了原始类型。JavaScript实现了这个接口，定义所有节点类型必须继承Node类型。作为Node的子类或孙类，都拥有Node的基本属性和方法。节点类型DOM规定：整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，如此等待。每个节点都有一个n...原创 2019-09-25 20:41:38 · 2637 阅读 · 0 评论 -
JS--JavaScriptDOM基础及各版本特性（DOM1.0、DOM2.0、DOM3.0）
DOM基础DOM（Document Object Model，文档对象模型）是W3C制定的一套技术规范，用来描述JavaScript脚本怎样与HTML或XML文档进行交互的Web标准。DOM规定了一系列标准接口，允许开发人员通过标准方式访问文档结构，操作网页内容、控制样式和行为等。DOM各版本1998年W3C对DOM进行标准化，并先后推出了3个不同的版本，下面重点说明以下。注意，每个版本都是...原创 2019-09-25 20:01:29 · 1345 阅读 · 0 评论 -
JS--JavaScript中的document对象概述、API详解、文档对象模型
document对象在浏览器窗口中，每个对象都会包含一个document属性，该属性引用窗口中显示HTML文档的document对象。document对象与它所包含的各种节点（如表单、图像和链接）构成了文档对象模型。访问文档对象浏览器在加载文档时，会自动构建文档对象模型，把文档中同类元素对象映射到一个集合中，然后以document对象属性的形式允许用户访问。以下集合都是HTMLColle...原创 2019-09-25 16:02:28 · 1575 阅读 · 0 评论