- 博客(55)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 留言板主要代码展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2021-05-04 14:42:14
3030
1
原创 了解Ajax响应数据的渲染及模板引擎
Ajax的响应数据格式有：XML，一种数据描述的手段，缺点：数据冗余太多。JSON（JavaScript Object Notation，JavaScript）对象表示法，数据描述的手段，类似于JavaScript字面量方式。服务端采用JSON格式返回数据，客户端按照JSON格式解析数据。这些数据协议都是Ajax在请求过程中会用到的，所以当服务器发出某种格式的数据时，客户端就可以采用JavaScript相应的方法解析这种格式。JSON Serverjson-server 是一个Nod
2021-05-04 11:51:30
233
原创 理解跨域
了解跨域前，先了解同源策略同源策略同源策略是浏览器的一种安全策略，所谓同源是指域名、协议、端口完全相同。若只有目录不同则仍是同源。在同源策略下，只有同源的地址才可以相互通过Ajax的方式请求。在同源策略下，浏览器不允许Ajax跨域获取服务器数据。同源或者不同源说的是两个地址之间的关系，不同源地址之间请求称为——跨域。跨域解决方案JSONP json with padding，是一种借助于script标签发送跨域请求的技巧。原理就是在客户端借助script标签请求服务器的一个地址。
2021-05-04 11:37:53
94
原创 跨域代码练习——模拟百度搜索
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2021-05-04 11:32:28
122
原创 Ajax常用封装库——Axios
Axios 是目前应用最为广泛的 AJAX 封装库Axios的特性有：从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF使用axios时，需要通过使用script标签引入：https://unpkg.com/axios/dist/axios.min.jsaxios的中文网链接：Axios中文网Axios API向axio
2021-05-04 10:52:58
243
原创 jQuery中Ajax的使用
在使用原生Ajax发送一个请求时，过程多少有点繁琐，jQuery中对于Ajax请求有它自己的封装好的函数，使用起来分方便。 在jQuery中有专门的Ajax封装，具体参照JQuery-Ajax参考手册网址这里用一段练习代码展示下使用方法：//使用要引入jQuery文件 <script src="../jq/jquery-1.12.4.min.js"></script> $.ajax({ url:"http://localhost:3000/users",
2021-05-04 10:20:39
65
原创 如何封装一个Ajax请求函数
如何封装Ajax函数一个Ajax函数：// 一个Ajax函数var xhr = null;if(window.XMLHttpRequest){ xhr = new XMLHttpRequest;}else{ xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open("GET","https://jsonplaceholder.typicode.com/users");xhr.send(null);xhr.onreadystat
2021-05-04 10:03:48
439
原创 了解AJAX及AJAX如何发送请求
由于JavaScript能力有限，它所提供的API都只停留在单机阶段。这样会造成一些功能无法实现，如：无法实现用户登录时，用户在输入用户账户时显示用户对应的头像；无法实现用户注册时，用户输入账号或用户名时提示是否存在；无法实现在留言板功能看到最新的用户留言。 上述这些问题的共同点就是：数据存放在服务端，无法通过已知的API获取。而Ajax的出现就解决了这些问题。 已知的发送请求的方式，就是在地址栏输入地址，回车刷新，对特定的元素的href或src属性，表单的提交，使用ajax通过JavaScri
2021-05-04 09:40:55
144
原创 jQuery的animate动画方法及动画排队问题解决
animate（）动画方法作用：执行css属性集的自定义动画语法：$(selector).animate(styles,speed,easing,callback)• 参数1： css 的属性名和运动结束位置的属性值的集合。• 参数2：可选，规定动画的速度，默认是 “normal”。其他值，“slow”、“normal”、“fast”，数字格式，单位为毫秒。• 参数3：可选，规定在不同的动画点中设置动画速度的 easing 函数，值包含 swing（变速） 和linear（匀速）。
2021-04-02 09:20:31
254
原创 jQuery的几种显示隐藏方法
jQuery显示隐藏方法hide（）方法元素隐藏，隐藏的前提必须是元素display:block；show（）方法元素显示，显示的前提必须是元素display:none;toggle（）方法在元素隐藏和显示之间进行切换这三种方法设置的效果，在过程中还可以出现过渡动画 • 如果不传参数，直接显示和隐藏就没有过渡动画 • 如果传参数： •单词格式：”slow“ , “normal” , “fast”
2021-04-02 09:02:26
1447
2
原创 jQuery中的入口函数
jQuery中的入口函数入口函数：原生Js： window.onloadjQuery中的入口函数语法1 $(document).ready(function(){ //获取元素 });语法2$(function(){ //获取元素 })这里要注意的是：onload事件在加载时，要等待所有的页面中的资源（DOM树、图片、视频、音频等外部资源）加载完毕之后，才会执行；jQuery的入口函数，仅仅需要等待DOM树加载完成就立即执行<scr
2021-04-02 08:29:29
403
原创 jQuery排序及应用(Tab栏特效的实现)
jQuery排序eq（）排序，可以看作是一个筛选方法jQuery 中获得的对象，内部包含选择的一组原生 js 对象，在 jQuery 对象中会进行一个新的大的排序，这个排序与原来的 HTML 结构没有关系。所以eq() 方法在 jQuery 对象中通过下标获取某个对象，下标是 jQuery 对象中的大的排序的下标。//选中所有p标签var $ps = $("p");//生成了一个jquery对象，内部包含了所有的元素js对象// 是一个类数组对象，内部会按照获取顺序进行一个大排序//
2021-03-28 15:41:14
180
原创 jQuery实现验证码控制按钮及图片放大功能分析
下面分享两个小案例：1、实现发送验证码控制按钮禁用主要步骤及代码思路是，添加点击按钮事件按钮被禁用替换按钮内的内容每隔1s进行倒计时的变换倒计时到0时，停止倒计时，按钮恢复发送按钮内容更改，禁用取消<body> <input type="text" id="txt"> <input type="button" id="btn" value="发送"> <script src="../jq/jqu
2021-03-28 15:13:39
208
原创 jQuery其他关系查找方法
jQuery其他关系查找方法find()后代元素:传递一个规定的选择器作为参数,查找范围是jQuery对象的所有后代兄弟元素紧邻的兄弟元素方法:next()下一个兄弟prev()前一个兄弟多选方法nextAll()后面所有兄弟preAll()前面所有兄弟<style> *{ margin: 0; padding: 0; } .box{ border: 1px solid #000; backgr
2021-03-28 15:13:02
64
原创 jQuery链式调用
链式调用jQuery对象调用任何方法(除了节点关系方法)执行完后,方法都会有一个返回值,返回值就是jQuery对象自己,这个现象给我们提供了便利,可以对执行结果继续打点调用jQuery的方法和属性。即——可以使用jQuery对象进行连续打点调用console.log($(this).css("background-color", "pink").html("hello"));jQuery对象调用除了节点关系的方法之外，其他的方法执行后，返回值就是对象自己，可以继续链式调用其他的jQuery对象
2021-03-28 14:38:12
150
原创 jQuery关系查找方法
jQuery关系查找方法$(this):在原生的DOM操作中,事件函数内部都有一个this关键字指向的就是触发事件的事件源;在jQuery中将this关键字传递给$()方法,得到的就是指向自己的jQuery对象,这样就可以使用jQuery方法了.parent()父级:jQuery对象都有一个parent()方法,得到的是自己的父级,父级得到的也是一个jQuery对象,可以直接继续打点调用jQuery方法和属性children()子级:可以得到自己的所有子级元素组成的jQuery对象;得到的子级组成的
2021-03-28 14:24:24
72
原创 jQuery常用事件方法——mouseenter、mouseleave、hover方法
jQuery常用事件方法jQuery事件方法与原生Js事件方法名称类似,不需要写on,通过jQuery对象打点调用,括号内参数是事件函数mouseenter()方法:鼠标进入一个元素触发的事件mouseleave()方法:鼠标离开一个元素触发的事件注意:mouseenter和mouseleave没有事件冒泡,在使用时替换mouseover和mouseout更加合适下面是代码对比：<div class="parent"> <div class="box"
2021-03-28 14:20:22
638
原创 jQuery选择器及操作类名方法
jQuery选择器css2.1和css3选择器参数：必须是字符串格式的选择器<div class="box" id="box"><p>1</p><p>2</p></div> <p>hello</p><script src="../jq/jquery-1.12.4.min.js"></script><script> //jQuery选择器
2021-03-28 14:03:58
580
原创 了解jQuery
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库jQuery下载地址：http://jquery.com/download/https://www.bootcdn.cn/jquery/使用过程中，具体参考 API 应用手册https://jquery.cuishifeng.cn/jquery极大的简化了DOM操作，让编程变得更加简单高效jQuery常见操作$()方法：在DOM操作中，jquery封装了一个获取元素的方法$()在jquery中，只有一个全
2021-03-28 11:47:24
52
原创 for...in、forEach、for...of三种循环对比
for …of循环ES6 引入了一种全新的遍历方式 for…of 循环，作为遍历所有数据结构的统一方式创建一个obj对象和arr数组const obj = { name:"li", age:21, id:001} const arr = [11,22,33,44];使用for…in 循环//for...in 循环for(var k in obj){ console.log(obj[k]);}使用for…of循环//for..of循环for(let i of
2021-03-19 09:37:58
365
原创 ES6 新增class类定义对象类型
在ES2015之前，定义对象的类型，通常使用定义构造函数的方法和定义构造函数的原型对象的方法去定义。在ES2015中 新增了class类定义对象类型class 类//以前的方法 定义一个类型并定义方法function Person(name,age){ this.age = age; this.name = name;}//在原型对象上添加方法Person.prototype.message = function(){ console.log(`${this.name} i
2021-03-19 01:36:36
529
原创 ES6的Set、Map、Symbol
Set 数据结构 set 数据结构，可以理解为集合，与数组类似，内部的成员是唯一的(不重复)。const a = new Set();a.add(1),add(2).add(100).add(1);a这个集合通过add方法添加数据后，会有返回值，返回值是它本身，所以可以采用链式添加的方式添加数据。如果遇到重复的数据添加，只添加一次。遍历这个集合：a.forEach(i => console.log(i));还可以使用ES2015的新增的循环for…offor(let i of
2021-03-19 01:27:40
122
原创 ES6 中对象字面量的增强和对象扩展方法
对象字面量的增强：在ES6中，在对象中，属性名和变量名相同的时候，可以省略冒号和后面的变量引用const flag = "flag";const obj = { name:"li", flag, age : 21}console.log(obj);对象内部的函数定义方式也可进行简化const obj = { name:"li", age:21, //message:function(){} message(){ console.log(this.n
2021-03-19 01:24:05
168
2
原创 ES6 箭头函数
箭头函数 使用 => 的方式替代了function，使代码更加简短、清晰易读，尤其是极大的简化了回调函数的编写。普通方式编写函数function fn(a){ console.log('function：') return a+1;}console.log(fn(1));使用箭头函数 编写//箭头函数 编写const fun = (a) => { console.log('fun invoked 箭头函数') return a+2;}
2021-03-19 01:16:33
74
原创 ES6 模板字符串的认识与扩展
模板字符串反引号（``）,可以保留字符串中的回车、换行。支持插入js语句、变量名、表达式、方法的调用等 const name = "li"; const str = `hello , ${name}`; console.log(str);//hello , li模板字符串标签函数将console.log看作一个打印输出的函数，如下，是一个模板字符串标签函数，它输出的结果是一个数组形式的：[’hello world‘]const str = console.log(`hello
2021-03-19 01:14:25
61
原创 ES6 数组、对象的解构
数组的解构以前的普通方法获取数组内的值//以前的普通方法const arr = [1,2,3];const a = arr[0];const b = arr[1];const c = arr[2];console.log(a,b,c);ES6 中 利用数组结构，可以很简单的将数组中的值获取到//数组解构 （给一个数组赋值被解构数组,按位置提取被解构数组的元素）const arr = [1, 2, 3];//将a,c,b按顺序存入数组，再给它赋值arr，就能按顺序获取到数组arr的值
2021-03-19 01:10:48
484
原创 ES6 关键字块级作用域、let、const
首先什么是作用域？作用域 - 某个成员能够起作用的范围。在 ES2015 之前，ES 只有两种作用域全局作用域和函数作用域，在ES2015之后：• 全局作用域• 函数作用域• 块级作用域块级作用域就是被{}所包围的区域感受没有块级作用域会出现的问题：应该执行9次，外层循环3次，内层循环3次 for(var i = 0;i < 3;i ++){ for(var i = 0;i < 3;i ++){ console.log(i);//实际只执行了3次
2021-03-19 01:08:09
272
原创 ECMAScript 和JavaScript的故事
想要了解一下ECMAScript和JavaScript的关系，先了解 ECMAScript是什么。 通常我们将 ECMAScript 看作是 JavaScript 的标准规范。 实际上ECMAScript 只是提供了最基本的语法，JavaScript 在语言基础上进行了扩展。JavaScript 是 ECMAScript 的扩展语言，也可以说JavaScript 是 ECMAScript 的扩展语言。 从2015 年开始 ES 保持每年一个版本的迭代，ES2015 开始按照年
2021-03-19 01:03:24
118
原创 解析Js正则表达式
Js正则表达式正则表达式是对字符串操作的一种逻辑公式这里推荐一个正则表达式的在线测试网站：正则表达式在线测试正则语法在 JavaScript 中，正则表达式也是对象，是一种索引类型。使用一个正则表达式字面量是最简单的方式。两个 / 是正则表达式的定界符。创建正则的方法有两种： //创建正则的第一种方法 ， 正则的字面量 var reg = /abc/; //第二种，通过 构造函数 的创建 var reg1 = new RegExp("adf")使
2021-03-17 14:34:52
86
原创 Js函数闭包的理解及闭包的问题的解决
函数闭包函数就是闭包，当一个函数被创建时，它的内部的语句、变量、函数等，共同形成了闭包。这里简单分析下闭包函数执行调用过程 function outer(){ var a = 12; //形成闭包环境中的变量不是一成不变的，可以被更改 function inner(){ console.log(a ++); } return inner; }
2021-03-16 11:09:21
295
原创 Js函数arguments及高阶函数应用
函数的成员 – argumentsarguments： 函数在调用时，传入的所有的实参集合（类数组对象）arguments.callee ：arguments的一个属性，指向的是函数本身函数名.caller： 函数的调用者,如果在全局调用，返回的调用者为 null。函数名.length ：形参的个数函数名.name： 函数的名称 //arguments 记录的是所有实参 //使用 arguments 模仿制作一个求最大数的方法 function
2021-03-16 08:47:11
98
原创 关于Js中call、apply、bind方法分析及应用
callcall（）方法功能：指定函数的this，执行函数并传参参数：fn.call(thisArg,arg1,arg2,ar3,…) thisArg 指定让this指向的对象，若指定了null或者undefined则内部this指向window arg1,arg2,ar3,…参数列表 返回值是函数自己的返回值 与apply（）方法类似，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply（）方法接受的是一个包含多个参数的数组。
2021-03-15 21:58:28
201
原创 JS函数调用方式及this分析
函数的调用和 this①普通的函数调用是通过给函数名或者变量名添加（）的方式执行。 function fn(){ console.log(1); }; fn();②构造函数，通过new关键字进行调用（也可以使用（）调用，只是功能不全） function Student(name){ this.name = name; }; var s1 = new Student("li");③对象中的方法，通过对象打点调用函数，然后加括号（）
2021-03-15 15:15:22
149
原创 JS函数的三种定义方式
函数的定义方式函数声明：必须有名字，会函数提升，在预解析阶段就已经创建，声明前后都可以调用//函数声明//定义函数名function fn(){ console.log(123);}函数表达式：一种变量赋值，函表达式可以没有名字（匿名函数）,没有函数提升。//将函数赋值给一个变量，可以是匿名函数var fn = function(){ console.log(123);};由于函数声明提升，函数声明定义的函数，其函数名可以在函数声明之前调用，而函数表..
2021-03-15 15:12:18
283
原创 Js 对象之间的继承及原型链查找分析
Js 对象之间的继承构造函数的属性继承①对象拷贝 :使用for…in循环继承父对象属性<script> var student1 = { name : "lisi", id : 1213, meaasge : function(){ console.log(name + "," + id); } }; ..
2021-03-15 12:36:54
130
原创 原生Js随机方块代码理解
一个简单Js的练习，在div盒子中生成随机的方块。这里可以将div划分成n个方块，每个方块的位置可以由横纵坐标来确定，方块的实际left、top位置就是方块的横坐标*方块的宽、纵坐标**方块的高。这样每次就可以确定除随机方块出现的位置在哪里。这是页面布局html：<body> <div class="stage" id="stage"> </div> <script src="js/tools.js"></s
2021-03-15 08:42:14
253
原创 Js引入问题--Uncaught TypeError: Cannot read property ‘appendChild‘ of undefined 的分析与解决
在<head>内引入外部Js ，报错出异常，显示Uncaught TypeError: Cannot read property ‘appendChild’ of undefined，属性未定义。为什么出现这种问题。查找很久发现这跟Js、DOM加载顺序有关，由于写在了<head>内，它会先执行，但是此时由于DOM还未加载完，而Js里有需要获取DOM中元素的语句要执行，这时就会出现异常，Js报错Uncaught TypeError: Cannot read property.
2021-03-10 09:18:01
4417
原创 JS 原型语句 - prototype的其他用法
原型语法 function Student(name,id){ this.name = name; this.id = id; } //获取对象的prototype Student.prototype.type = "student"; Student.prototype.message = function(){ console..
2021-03-09 23:09:28
94
原生Js实现轮播图.html
2021-03-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人