2021年08月_黄晶谛

原创响应状态分析

XMLHttpRequest的响应状态readystate共有5个，不同的状态代表着请求执行的不同阶段。readyState=0 表示XMLHttpRequest对象准备完毕readyState=1 表示已经发送了请求readyState=2 表示浏览器已经收到了服务器的响应数据readyState=3 表示正在解析数据readyState=4 表示数据已经解析完成，可以使用了，但是返回的数据不一定是正常的完整例子：<!DOCTYPE html><html lang="e

2021-08-30 19:47:51 335

原创 Ajax响应数据解析

Ajax响应数据主要有responseText和responseXML两种，解析主要分为这两种格式的解析，其中最常用的是responseText，并将其转为JSON进行解析。1、解析responseText<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JSON数据解析</title> <script type=

2021-08-30 19:47:17 729

原创同源策略及jsonp实现跨域

1、浏览器的同源策略同源策略/**SOP（Same origin policy）**是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。http://www.example.com/detail.htmlhttps://www.example.com/detail.html 协议不同http://api.exa

2021-08-30 19:46:47 149

原创 JSON和XML格式

通常情况下，服务器和浏览器之间使用JSON格式或XML格式进行数据传输。更进一步，JSON可以用作任何编程语言的数据格式，应用更广泛，而且JavaScript提供了内建函数，可以将JSON格式的字符串转换为原生的JavaScript对象。一、格式说明1、JSONJavaScript Object Notation(JavaScript 对象标记法),是一种存储和交换数据的语法,JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把

2021-08-30 19:46:31 335

原创 post请求参数分析

主要包括post请求参数处理和参数传递问题。post请求参数处理// 1、请求参数拼接var param = "uname="+uname + "&password=" + password;xhr.open("post", "01test.html", true);// 2、需要设置请求头 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// 3、发送请求时需要传递请求参数，且不需

2021-08-30 19:46:06 3242

原创 get请求参数分析

主要包括get请求参数处理和参数传递问题。get请求参数处理// 1、请求参数拼接var param = "uname="+uname + "&password=" + password;// 2、将拼接后的参数进行编码，然后拼接到请求路径URL上xhr.open("get", "01test.html?" + encodeURI(param), true);get请求参数传递// 在执行请求发送时，必须传递参数为nullxhr.send(null);//get请求，这里需

2021-08-30 19:45:57 3835

原创 Ajax基础

1、什么是AJAXAJAX，即Asynchronous JavaScript And XML，并不是一门编程语言，是组合了浏览器内建的XMLHttpRequest对象(从Web服务器请求数据)和JavaScript、DOM(显示和使用数据)。Ajax 的核心是 XMLHttpRequest 对象。2、创建XMLHttpRequest对象所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。但是老版本的 Internet

2021-08-30 19:45:44 94

原创 jQuery动画方法animate()

在jQuery中，提供了专门用于实现动画效果的animate()方法，原型如下：animate: function( prop, speed, easing, callback )四个参数的含义如下prop 必须的，代表动画中元素的最终属性值speed 动画执行时间easing 动画执行效果callback 回调函数例：移动盒子$("div").eq(0).animate({left:800}, 8000);例：停止动画/** * 停止动画 * clearQueue 是

2021-08-30 19:45:26 884

原创 jQuery事件

在jQuery中，有简单事件、bind绑定事件、delegate委托绑定事件、on事件绑定几种事件绑定方式。一、事件的绑定1、简单事件如点击事件，可以通过click(handler)进行绑定，但是这种方式不能同时注册多个事件。$(selector).click(function(){});2、bind绑定事件可以同时为多个事件绑定同一个事件处理函数，如下形式：$(selector).bind("click mouseenter", function(){});3、delegate委托事件

2021-08-30 19:45:07 81

原创 jQuery三组基本动画

主要介绍jQuery中的三组基本动画：显示与隐藏、滑入与滑出、淡入与淡出。1、显示与隐藏主要是show()和hide()方法// 直接显示$("div").show();// 1000ms显示出来，动画持续时间，可以是毫秒值，也可以是字符串$("div").show(1000);// 设置显示速度：fast normal slow$("div").show("fast");// $("div").show([speed],[callback]);// 设置显示持续时间，或回调函

2021-08-30 19:44:15 307

原创 jQuery中的常用方法及链式编程

1、取值和设置值html()设置标签中间显示的标签或内容，类似于innerHTMLtext()设置标签中间显示的文本内容，类似于innerTextval()设置input标签中value的值，类似于valuecss()设置元素的样式，类似于style注意： html()、text()、val()三个方法，当没有传参时，表示取值，否则表示设置值。2、获取兄弟元素next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）nextAll();//当前元素之后的所有兄弟元素pr

2021-08-29 16:42:45 201

原创 jQuery操作样式

1、css操作1.1 利用css(name,value)设置样式设置单个样式/** * 设置样式 * name：样式名 * value：样式值 */$("li").css("fontSize", "32px");$("li").css("color", "yellow");$("li").css("backgroundColor", "pink");$("li").css("border", "1px solid red");一次设置多个样式/** * 一次设置多个样式

2021-08-29 16:06:31 96

原创 jQuery选择器

1、选择器分类jQuery选择器是用于准确选取特定的元素的，常用的选择器有ID选择器、标签选择器、类选择器等，此外常用的还有层级选择器、组合条件选择器、索引选择器等。2、选择器的应用基本选择器// id选择器$("#three").css("backgroundColor", "red");// 类选择器$(".green").css("backgroundColor", "green");// 标签选择器$("li").css("color", "pink");// 并集选

2021-08-29 15:45:04 139

原创 jQuery简介

1、什么是JavaScript框架库普通的JavaScript有很多缺点，如控件的操作方式不统一、浏览器兼容性问题、代码量较大、易出错等，因此出现了很多对JavaScript的封装的库，如ExtJS、jQuery等。2、什么是jQueryjQuery 是一个 JavaScript 库，其内部任然是调用JavaScript实现的，jQuery 极大地简化了 JavaScript 编程。特点Wirte Less, Do More.优点较好地解决了不同浏览器的兼容性问题，对于不同的控件具有统一的操

2021-08-29 12:23:46 144

原创正则表达式

1、正则表达式概述什么是正则表达式正则表达式，Regular Expression，是一种字符串匹配模式，是由元字符或限定符组成的一个式子，用来检索、替换符合某个模式的文本。组成正则表达式由普通字符和特殊字符(元字符)组成。作用字符串匹配：给定的字符串是否符合正则表达式的过滤逻辑；字符串提取：从字符串中获取我们想要的特定部分，如提取邮箱信息、手机号码等字符串替换：替换字符串中的敏感词等2、元字符2.1 常用元字符常用的元字符： . 表示除了\n以外的任意一个字符 []

2021-08-29 11:28:47 313

原创函数闭包的应用

1、函数的使用函数中的几个属性function f1(x, y){ console.log(f1.name);// 函数的名字 console.log(f1.length);// 函数定义中的参数个数 console.log(f1.arguments.length);// 实参的个数 console.log(f1.caller);// 函数的调用者}函数作为参数使用function sortFn(ele1, ele2){ if (ele1 > ele2){

2021-08-29 10:56:32 143

原创函数中this的指向问题

函数中的this指向分以下几类情况：普通函数中的this/** * 普通函数中的this: window */function testQuery(){ console.dir(this);}定时器方法中的this/** * 普通函数中的this: window */setInterval(function (){ console.dir(this);}, 1000);构造函数中的this/** * 构造函数中的this: 实例对象 */functi

2021-08-29 10:07:57 228

原创 JavaScript面向对象编程

1、什么是面向对象面向对象编程 —— Object Oriented Programming，简称 OOP ，是一种编程开发思想。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。面向对象的特性封装、继承、多态2、对象的创建通过构造函数创建对象。// 构造函数function Person(name, age){ this.name = name; this.age = age;}此时，设计了一个代表人的类，具有nam

2021-08-29 09:57:13 84

原创浏览器对象模型BOM

1、BOM的概念BOM，Browser Object Model，即浏览器对象模型，它提供了独立于内容、可直接操作浏览器的对象结构。它提供了多个对象，包括以下几个：1、window对象，是JS的最顶层对象，其他的BOM对象都是window对象的属性；2、document对象，文档对象；3、location对象，浏览器当前URL信息；4、navigator对象，浏览器本身信息；5、screen对象，客户端屏幕信息；6、history对象，浏览器访问历史信息；通过BOM对象的相关操作，可以

2021-08-29 09:24:41 169

原创元素的事件

1、为元素添加或移除事件的方式var box = document.getElementById('box');方式一// 添加事件box.onclick = function () { console.log('点击后执行');};// 移除事件box.onclick = null;方式二// 添加事件,eventFn为事件处理函数box.addEventListener('click', eventFn, false);// 移除事件,eventFn为事件处理函数

2021-08-29 08:38:02 174

原创 DOM节点操作

1、DOM的节点操作获取元素节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>获取元素的相关节点</title></head><body><div id="dv"> <span>这是div中的第一个span标签</span> <p>这是di

2021-08-28 18:55:25 115

原创 JavaScript的基本组成

1、JavaScript的组成部分JavaScript可以分为三个部分：ECMAScript标准、DOM、BOM。ECMAScript标准即JS的基本语法，JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关。DOM即文档对象模型，Document Object Model，用于操作页面元素，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。-BOM即浏览器对象模型，Browser Ob

2021-08-28 18:47:56 3248

原创 JavaScript中的对象(二)

1、JavaScript中的对象分类在JavaScript中，对象可以分为三种：内置对象、浏览器对象和自定义对象。JavaScript提供了多个内置对象，如Math、Date、Array等，其用法可以通过MDN或W3C查询。2、内置对象的使用MathMath是JavaScript中的一个和数学有关的内置对象，提供了数学常数和方法，如Math.PI、Math.random()、Math.floor()、Math.ceil()、Math.abs()等。Math.PI // 圆周率Ma

2021-08-28 18:15:24 86

原创 JavaScript中的对象(一)

1、对象的基本理解JavaScript的对象是无序属性的集合。其属性可以包含基本值、对象或函数。对象中包含属性和方法，属性即对象所描述的事物的特性，方法即对象所描述的事物的行为。2、对象的创建方式在JavaScript中，对象的可以通过字面量或构造函数进行创建。利用字面量创建对象// 创建空对象var person = {};// 字面量方式创建对象person.name = "小明";person.age = 10;person.sayHi = function (){ co

2021-08-28 17:56:52 91

原创作用域和预解析

1、作用域变量的作用范围，称为作用域。从作用域的角度，可以将变量分为全局变量和局部变量。全局变量具有全局作用域，局部变量具有局部作用域。作用域链函数内指向函数外的链式结构，就称作作用域链。2、预解析JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程。预解析过程：把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。把函数的声明提升到当前作用

2021-08-28 17:41:42 145

原创 JS函数基础

1、JS函数概念和定义概念通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行，在ECMAScritpt中的函数使用function关键字来声明，后跟一组参数和函数体。定义function functionName(arg0, arg1, ..., argN){ statements}函数声明和函数表达式// 函数声明function 函数名() { // 函数体}// 函数表达式var fn = function () { // 函数体}

2021-08-28 13:31:38 95

原创 JS数组基础

1、基本概念在JavaScript中，数组是一组数据的有序集合，数组中的数据的类型可以不同，而且数组的长度是可以动态调整的。2、数组的定义方式可以通过数组字面量的方式创建数组。如// 创建一个空数组var arr1 = [];// 创建一个包含3个数值的数组，多个数组项以逗号隔开var arr2 = [1, 3, 4]; // 创建一个包含2个字符串的数组var arr3 = ['a', 'c']; 3、数组的属性通常需要用到的数组的长度属性。// 获取数组的长度属性cons

2021-08-28 13:06:02 123

原创 JavaScript基础介绍

1、变量命名规范规则 - 必须遵守的，不遵守会报错由字母、数字、下划线、$符号组成，不能以数字开头不能是关键字和保留字，例如：for、while。区分大小写规范 - 建议遵守的，不遵守不会报错变量名必须有意义遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword2、数据类型简单数据类型Number、String、Boolean、Undefined、Null复杂数据类型Object3、代码注释单行注释// 这

2021-08-28 12:52:15 92

原创 HTML5常用API

1、判断网络连接状态 window.addEventListener("online", function (){ $(".tips").text("网络已连接").fadeIn(500).delay(1000).fadeOut(); }); window.addEventListener("offline", function (){ $(".tips").text("网络已断开").fadeIn(500).delay(1000).fadeOut()

2021-08-28 11:56:01 392

原创浏览器兼容性处理

在遇到浏览器兼容性问题时，需要针对不同版本的浏览器进行判断，再进一步进行兼容处理，如IE浏览器的版本判断：基本运算符如下：! [if!IE] NOT 运算符。这被放在特性,算符, 或者子表达式的前面以反转该表达式的布尔值含义。lt [if lt IE 5.5] 小于运算符。第一项小于第二项时返回 true。lte [if lte IE 6] 小于或等于运算符。第一项小于或等于第二项时返回 true。gt [if gt IE 5] 大于运算符。第一项大于第二项时返回 true。gte [if gt

2021-08-28 11:47:43 89

晶谛-giserDev