2019年09月_吴声子夜歌

原创 jQuery--DOM对象与jQuery对象的转换

在JavaScript中，通过getElementById()、getElementsByClassName()和querySelector()等方法来获取要页面中的HTML元素。示例：获取DOM对象var menuDiv = document.getElementById("menuDiv");var baseSpan = menuDiv.getElementsByClassName("b...

2019-09-30 23:25:02 680

原创 jQuery--jQuery概述、优势、各版本对浏览器的支持情况、引入jQuery库

jQuery概述JavaScript语言是NetScape公司开发的一种脚本语言，其功能强大，交互性强，是Web前端语言发展过程中的一个重要里程碑。JavaScript的实时性、跨平台、使用简单且安全性较高等特点决定了其再Web前端涉及中的重要第位。但随着浏览器种类的推陈出新，JavaScript对浏览器的兼容性收到了极大挑战，网页前端设计者往往因浏览器的不兼容而导致工作量大增。2006年1月...

2019-09-30 21:43:27 2755

原创 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 800

原创 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 1599

原创 JS--JSON简介、结构、数据类型

JSON简介XML虽然具有跨平台和跨语言的优势，但是在服务器端生成XML以及客户端解析XML时，往往会导致代码复杂，开发效率极低。JSON为Web应用开发者2提供了另一种数据交换格式。JSON（JavaScript Object Notation）是一种轻量级数据交换格式，是存储和交换文本信息的语法规范。JSON采用完全独立于语言的文本格式，比XML更小、更快、易于解析，是一种理想的数据交换语...

2019-09-30 15:45:02 1453

原创 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 3029

原创 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 3108

原创 JS--AJAX获取XML数据、XMLHttpRequest对象响应属性

XMLHttpRequest对象响应属性XMLHttpRequest对象通过responseText、responseBody、responseStream或responseXML属性获取响应信息，说明如下：响应信息说明responseBody将响应信息正文以Unsigned Byte数组形式返回responseStream以ADO Stream对象形式返回响应字...

2019-09-29 21:47:58 1969

原创 JS--AJAX跟踪状态readyState、终止ajax请求abort()方法

跟踪状态XMLHttpRequest对象通过readyState属性实时跟踪异步交互状态。一旦当该属性发生变化时，就触发readystatechange事件，调用该事件绑定的回调函数。readyState属性值：返回值说明0未初始化。表示对象已经建立，但是尚未初始化，即尚未调用open()方法1初始化。表示对象已经建立，即尚未调用send()方法2发送数...

2019-09-29 20:51:34 2112

原创 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 2196

原创 JS--AJAX基础、获取Ajax引擎对象、解决XMLHttpRequest兼容问题

AJAXAJX即（asynchronous Javascript And XML）异步JavaScript和XML，可以使网页实现异步更新，就是不重新加载整个页面的情况下，对网页的某部分进行更新（局部刷新）。传统的网页如果需要更新内容，必须重载整个网页页面。XMLHttpRequest是JavaScript一个外挂组件，用来实现客户端与服务器端异步通信，所有Ajax应用都要借助该组件才能够实现...

2019-09-28 09:50:49 1133

原创 JS--JavaScript提交表单（submit事件）、重置表单、取消默认提交表单（单击按钮、回车）

提交表单使用< input > 或 < button >标签都可以定义提交按钮，只要将type属性值设置为“submit”即可，而图像按钮则是通过将 < input >的type属性值设为“image”。当单击按钮或图像按钮时，就会提交表单。submit事件类型仅在表单内提交按钮，或者在文本框中输入文本时按回车键触发。示例1：单击【提交】按钮后，触发sub...

2019-09-27 23:12:09 14912

原创 JS--JavaScript选择文本（select事件）、检测字段值（change事件）

选择文本当在文本框或文本区域内选择文本时，将触发select事件。通过该事件，可以设计用户选择操作的交互行为。在IE9+、Opera、Firefox、Chrome和Safari中，只有用户选择了文本，而且要释放鼠标，才会触发select事件；但是在IE8及更早版本中，只要用户选择了一个字母，不必释放鼠标，就会触发select事件。另外，在调用select()方法时也会触发select事件。示...

2019-09-27 22:26:32 8105 1

原创 JS--JavaScript焦点处理（获取焦点focus、失去焦点blur）

焦点处理焦点处理主要包括focus（获取焦点）和blur（失去焦点）事件类型。所谓焦点，就是激活表单字段，使其可以响应键盘事件。获取焦点：focus当单击或使用Tab键切换到某个表单元素或超链接对象时，会触发该事件。focus事件是确定页面内鼠标当前定位的一种方式。在默认情况下，整个文档处于焦点状态，但是单击或者使用Tab键可以改变焦点位置。‘示例：在页面加载完毕后，将焦点转移到表单中的第...

2019-09-27 21:18:28 80706

原创 JS--JavaScript页面事件（页面初始化onload、页面卸载onunload）、beforeunload事件

页面初始化load事件类型在页面完全加载完毕的时候触发。该事件包含所有的图形图像、外部文件（如CSS、JS文件等）的加载，也就是说，在页面所有内容全部加载之前，任何DOM操作都不会发生。为window对象绑定load事件类型的方法有两种：1. 直接为window对象注册页面初始化事件处理函数：window.onload = function(){ alert("页面加载完毕");}2...

2019-09-27 20:05:14 5489

原创 JS--JavaScript键盘事件响应顺序（keydown->keypress->keyup）

键盘响应顺序当按下键盘时，会触发多个事件，它们将按顺序发生。对于字符键来说，键盘事件的影响顺序如下：1.keydown2.keypress3.keyup对于非字符键（如功能键或特殊键）来说，键盘事件的响应顺序如下：1.keydown2.keyup如果按下字符键不放，则keydown和keypress事件将逐个发生，直至松开按键。如果按下非字符键不放，则只有keydown事件持续...

2019-09-27 18:14:52 1814

原创 JS--JavaScript使用键盘事件、键盘事件属性（keyCode、charCode、target...）、使用键盘控制页面元素

键盘事件当用户操作键盘时会触发键盘事件，键盘事件主要包括下面3种类型：keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是Opera浏览器不支持这种连续操作。该事件处理函数返回false时，会取消默认的动作（如输入的键盘字符，在IE和Safari浏览器下还会禁止keypress事件响应）keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发...

2019-09-27 17:52:11 2795

原创 JS--JavaScript使用鼠标事件（click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove）

鼠标事件事件类型说明click单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上，并按了回车键时，同样会触发事件dblclick双击鼠标左键时发生，如果右键也按下则不会发生mousedown单击任意一个鼠标按钮时发生mouseout鼠标指针位于某个元素上，且将要移出元素的边界时发生mouseover鼠标指针移出某个元素，到另一...

2019-09-26 23:10:13 10825

原创 JS--JavaScript使用event对象、event对象属性、方法和事件委托

使用event对象event对象由事件自动创建，代表事件的状态，如事件发生的源节点，键盘按键的响应状态，鼠标指针的移动位置，鼠标按键的响应状态等信息。event对象的属性提供了有关事件的细节，其方法可以控制事件的传播。2级 DOM Events 规范定义了一个标准的事件模型，它被除了IE怪异模式以外的所有现代浏览器所实现，而IE定义了专用的、不兼容的模型。在DOM事件模型中，event对象...

2019-09-26 21:38:48 1100 1

原创 JS--JavaScript注册事件addEventListener()、销毁事件removeEventListener()

注册事件在DOM事件模型中，通过调用对象的addEventListener()方法注册事件，用法如下：element.addEventListener(String type, Function listener, boolean useCapture);type：注册事件的类型名。事件类型与事件属性不同，事件类型名没有on前缀。例如，对于事件属性为onclick来说，所对应的事件类型应...

2019-09-26 19:59:58 6222

原创 JS--JavaScript事件处理基础、事件模型、事件流（冒泡型、捕获型、混合型）、绑定事件（静态绑定和动态绑定）、事件处理函数

JavaScript事件基础JavaScript与用户之间的交互是通过事件驱动来实现的，事件驱动是面向对象程序设计的重要概念，其核心就是以消息为基础、以事件来驱动（message based， event driven）。当网页对象发生特定事件时，浏览器会自动生成一个事件对象（Event），事件对象通常会沿着DOM节点进行传播，知道被脚本捕获。如果为事件绑定响应程序（事件处理函数），浏览器就会调...

2019-09-26 19:09:53 1140

原创 JS--JavaScript属性节点特性，创建属性节点，读取、设置、删除属性（getAttribute、setAttribute、removeAttribute）

属性节点属性节点由Attr类型表示，在文档树种被称为元素的特性，习惯称之为标签的属性。属性节点具有以下特征：nodeType值为11nodeName值为特性的名称nodeValue值为null在HTML中不包含子节点在XML中子节点可以是Text、EntityReference访问属性节点Attr是Element的属性，作为一种节点类型，它继承了Node类型的属性和方法。不过A...

2019-09-26 17:33:19 2160 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 1877

原创 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 2255

原创 JS--JavaScript节点插入、删除、替换、克隆(appendChild、cloneNode、insertBefore、normalize、removeChild、replaceChild)

操作节点Node类型为所有节点定义了很多原型方法，以方便对节点进行操作，其中获得所有浏览器一致支持的方法如下表：Node类型原型方法说明：方法说明appendChild()向节点的子节点列表的结尾添加新的子节点cloneNode()复制节点hasChildNodes()判断当前节点是否拥有子节点insertBefore()在指定的子节点前插入新的...

2019-09-25 23:31:37 4274

原创 JS--JavaScript访问节点（childNodes、parentNode、firstChild、lastChild、nextSibling、previousSibling）

访问节点通过节点之间的树形关系，可以定位文档中的每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历。ownerDocument：返回当前节点的根元素（document对象）parentNode：返回当前节点的父节点。所有的节点都仅有一个父节点childNodes：返回当前节点的所有子节点的节点列表firstChild：返回当前节点的首个子节...

2019-09-25 22:17:22 3018

原创 JS-JavaScript节点Node的nodeName和nodeValue、节点之间的树状关系

节点的名称和值使用节点的nodeName和nodeValue属性可以读取节点的名称和值。这两个属性完全取决于节点的类型，具体如下表：节点的nodeName和nodeValue属性说明：节点类型nodeaName返回值nodeValue返回值Document#documentnullDocumentFragment#document-fragmentnull...

2019-09-25 21:36:57 2133

原创 JS--JavaScript节点Node概述、节点类型、nodeType详解

节点Node概述DOM 1.0定义了Node接口，该接口为DOM的所有节点类型定义了原始类型。JavaScript实现了这个接口，定义所有节点类型必须继承Node类型。作为Node的子类或孙类，都拥有Node的基本属性和方法。节点类型DOM规定：整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，如此等待。每个节点都有一个n...

2019-09-25 20:41:38 2500

原创 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 1255

原创 JS--JavaScript中的document对象概述、API详解、文档对象模型

document对象在浏览器窗口中，每个对象都会包含一个document属性，该属性引用窗口中显示HTML文档的document对象。document对象与它所包含的各种节点（如表单、图像和链接）构成了文档对象模型。访问文档对象浏览器在加载文档时，会自动构建文档对象模型，把文档中同类元素对象映射到一个集合中，然后以document对象属性的形式允许用户访问。以下集合都是HTMLColle...

2019-09-25 16:02:28 1478

原创 JS--JavaScript中的History对象API、screen对象的API、设置弹出窗口居中

history对象history对象存储浏览器窗口的浏览历史，通过window对象的history属性可以访问该对象。实际上，history对象存储最近访问的、有限条目的URL信息。为了保护客户端浏览信息的安全和隐私，history对象禁止JavaScript脚本直接操纵这些访问信息。History对象允许使用length属性读取列表中URL的个数，并可以调用back()、forward()和...

2019-09-24 23:02:15 808

原创 JS--JavaScript中的location对象概述和API详解

location对象概述location对象存储当前页面与位置（URL）相关的信息，表示当前显示文档的Web地址。使用window对象的location属性可以访问。location对象定义了8个属性，其中7个属性分别指向当前URL的各部分信息，另一个属性（href）博阿寒了完整的URL信息，详细说明如下表：属性说明href声明了当前显示文档的完整URL，与其他loca...

2019-09-24 21:43:30 1485

原创 JS--JavaScript使用window对象控制窗口大小(innerWidth、innerHeight)和位置(moveTo()、moveBy())、设置随机移动弹窗（小网站专用...）

控制窗口位置使用window对象的screenLeft和screenTop属性可以读取或设置窗口的位置，即相对于屏幕左边和上边的位置。IE、Opera和Chrome都支持这两个属性。Firefox支持使用window对象的screenX和screenY属性进行相同的操作，Safari和Chrome也同时支持这两个属性。示例：跨浏览器获取窗口左边和上边的位置var leftPos = (typ...

2019-09-24 20:40:40 6872

原创 JS--JavaScript使用window对象操作框架集frameset中的各窗口(frames[])

框架集中的window对象在HTML文档中，如果页面包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始）从左至右、从上至下访问每个window对象，或者使用使用框架集名称访问每个window对象。每个window对象都有一个name属性，其中包含框架的名称。在每一个框架中，window对象始终指向的都是那个框架实例，...

2019-09-24 19:25:43 2128

原创 JS--JavaScript操作BOM（浏览器对象模型、window对象概述、window.open()方法打开窗口）

window对象window对象是BOM的核心，代表浏览器窗口的一个实例。在浏览器中，window对象既是JavaScript访问浏览器窗口的接口，又是JavaScript的全局对象（Global）。因此在全局作用域中声明的所有变量和函数也是window对象的属性和方法。访问浏览器窗口通过window对象可以访问浏览器窗口，同时与浏览器相关的其他客户端对象都是window的子对象，通过win...

2019-09-23 23:11:13 1618

原创 JS--JavaScript字符串替换（replace()方法、正则表达式匹配、函数作为参数）详解

字符串替换使用字符串的replace()方法可以实现字符串替换操作。该方法包含两个参数：第一个：表示执行匹配的正则表达式，也可以传递字符串第二个：表示准备代替匹配的子字符串var s = "index.html";var b = s.replace("html", "htm");replace()方法同时执行查找和替换两个操作。该方法将在字符串中查找与正则表达式相匹配的子字符串，...

2019-09-23 20:35:10 19548 1

原创 JS--JavaScript增强数组排序（根据奇偶性排序、整数浮点数分开排序）

增强数组排序sort方法不仅仅按字母顺序进行排序，还可以根据其他顺序执行操作。这时就必须为方法提供一个比较函数的参数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b，其返回值如下：如果根据自定义评判标准，a小于b，在排序后的数字中a应该出现在b之前，就返回一个小于0的值。如果a等于b，就返回0.如果a大于b，就返回一个大于0的值。1...

2019-09-22 22:45:59 1467

原创 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 1855

原创 JS--JavaScript数据类型检测（typeof、constructor）详解

检测数据类型typeof运算符能够检测数据类型，其返回一个用于识别操作数类型的字符串。对于任何变量来说，typeof运算符总是以字符串的形式返回以下6种类型之一：“number"“string”“boolean”“objcet”“function”“undefined”不幸的是，在使用typeof检测null值时，返回的是"object"，而不是"null"。可以定义一个简单...

2019-09-22 20:27:45 2370

原创 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 3572

vuedevtools安装.zip

空空如也