JavaScript
文章平均质量分 52
多读书多看报!
~
展开
-
跨域代码练习——模拟百度搜索
<!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 · 125 阅读 · 0 评论 -
了解AJAX及AJAX如何发送请求
由于JavaScript能力有限,它所提供的API都只停留在单机阶段。这样会造成一些功能无法实现,如:无法实现用户登录时,用户在输入用户账户时显示用户对应的头像;无法实现用户注册时,用户输入账号或用户名时提示是否存在;无法实现在留言板功能看到最新的用户留言。 上述这些问题的共同点就是:数据存放在服务端,无法通过已知的API获取。而Ajax的出现就解决了这些问题。 已知的发送请求的方式,就是在地址栏输入地址,回车刷新,对特定的元素的href或src属性,表单的提交,使用ajax通过JavaScri原创 2021-05-04 09:40:55 · 147 阅读 · 0 评论 -
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 · 262 阅读 · 0 评论 -
jQuery的几种显示隐藏方法
jQuery显示隐藏方法hide()方法元素隐藏,隐藏的前提必须是元素display:block;show()方法元素显示,显示的前提必须是元素display:none;toggle()方法在元素隐藏和显示之间进行切换这三种方法设置的效果,在过程中还可以出现过渡动画 • 如果不传参数,直接显示和隐藏就没有过渡动画 • 如果传参数: •单词格式:”slow“ , “normal” , “fast”原创 2021-04-02 09:02:26 · 1486 阅读 · 2 评论 -
jQuery中的入口函数
jQuery中的入口函数入口函数:原生Js: window.onloadjQuery中的入口函数语法1 $(document).ready(function(){ //获取元素 });语法2$(function(){ //获取元素 })这里要注意的是:onload事件在加载时,要等待所有的页面中的资源(DOM树、图片、视频、音频等外部资源)加载完毕之后,才会执行;jQuery的入口函数,仅仅需要等待DOM树加载完成就立即执行<scr原创 2021-04-02 08:29:29 · 410 阅读 · 0 评论 -
jQuery排序及应用(Tab栏特效的实现)
jQuery排序eq()排序,可以看作是一个筛选方法jQuery 中获得的对象,内部包含选择的一组原生 js 对象,在 jQuery 对象中会进行一个新的大的排序,这个排序与原来的 HTML 结构没有关系。所以eq() 方法在 jQuery 对象中通过下标获取某个对象,下标是 jQuery 对象中的大的排序的下标。//选中所有p标签var $ps = $("p");//生成了一个jquery对象,内部包含了所有的元素js对象// 是一个类数组对象,内部会按照获取顺序进行一个大排序//原创 2021-03-28 15:41:14 · 185 阅读 · 0 评论 -
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 · 211 阅读 · 0 评论 -
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 · 69 阅读 · 0 评论 -
jQuery链式调用
链式调用jQuery对象调用任何方法(除了节点关系方法)执行完后,方法都会有一个返回值,返回值就是jQuery对象自己,这个现象给我们提供了便利,可以对执行结果继续打点调用jQuery的方法和属性。即——可以使用jQuery对象进行连续打点调用console.log($(this).css("background-color", "pink").html("hello"));jQuery对象调用除了节点关系的方法之外,其他的方法执行后,返回值就是对象自己,可以继续链式调用其他的jQuery对象原创 2021-03-28 14:38:12 · 155 阅读 · 0 评论 -
jQuery关系查找方法
jQuery关系查找方法$(this):在原生的DOM操作中,事件函数内部都有一个this关键字指向的就是触发事件的事件源;在jQuery中将this关键字传递给$()方法,得到的就是指向自己的jQuery对象,这样就可以使用jQuery方法了.parent()父级:jQuery对象都有一个parent()方法,得到的是自己的父级,父级得到的也是一个jQuery对象,可以直接继续打点调用jQuery方法和属性children()子级:可以得到自己的所有子级元素组成的jQuery对象;得到的子级组成的原创 2021-03-28 14:24:24 · 74 阅读 · 0 评论 -
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 · 658 阅读 · 0 评论 -
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 · 592 阅读 · 0 评论 -
了解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 · 55 阅读 · 0 评论 -
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 · 369 阅读 · 0 评论 -
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 · 535 阅读 · 0 评论 -
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 · 127 阅读 · 0 评论 -
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 · 170 阅读 · 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 · 82 阅读 · 0 评论 -
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 · 65 阅读 · 0 评论 -
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 · 491 阅读 · 0 评论 -
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 · 274 阅读 · 0 评论 -
ECMAScript 和JavaScript的故事
想要了解一下ECMAScript和JavaScript的关系,先了解 ECMAScript是什么。 通常我们将 ECMAScript 看作是 JavaScript 的标准规范。 实际上ECMAScript 只是提供了最基本的语法,JavaScript 在语言基础上进行了扩展。JavaScript 是 ECMAScript 的扩展语言,也可以说JavaScript 是 ECMAScript 的扩展语言。 从2015 年开始 ES 保持每年一个版本的迭代,ES2015 开始按照年原创 2021-03-19 01:03:24 · 121 阅读 · 0 评论 -
解析Js正则表达式
Js正则表达式正则表达式是对字符串操作的一种逻辑公式这里推荐一个正则表达式的在线测试网站:正则表达式在线测试正则语法在 JavaScript 中,正则表达式也是对象,是一种索引类型。使用一个正则表达式字面量是最简单的方式。两个 / 是正则表达式的定界符。创建正则的方法有两种: //创建正则的第一种方法 , 正则的字面量 var reg = /abc/; //第二种,通过 构造函数 的创建 var reg1 = new RegExp("adf")使原创 2021-03-17 14:34:52 · 93 阅读 · 0 评论 -
Js函数闭包的理解及闭包的问题的解决
函数闭包函数就是闭包,当一个函数被创建时,它的内部的语句、变量、函数等,共同形成了闭包。这里简单分析下闭包函数执行调用过程 function outer(){ var a = 12; //形成闭包环境中的变量不是一成不变的,可以被更改 function inner(){ console.log(a ++); } return inner; }原创 2021-03-16 11:09:21 · 306 阅读 · 0 评论 -
Js函数arguments及高阶函数应用
函数的成员 – argumentsarguments: 函数在调用时,传入的所有的实参集合(类数组对象)arguments.callee :arguments的一个属性,指向的是函数本身函数名.caller: 函数的调用者,如果在全局调用,返回的调用者为 null。函数名.length :形参的个数函数名.name: 函数的名称 //arguments 记录的是所有实参 //使用 arguments 模仿制作一个求最大数的方法 function原创 2021-03-16 08:47:11 · 102 阅读 · 0 评论 -
关于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 · 209 阅读 · 0 评论 -
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 · 154 阅读 · 0 评论 -
JS函数的三种定义方式
函数的定义方式函数声明:必须有名字,会函数提升,在预解析阶段就已经创建,声明前后都可以调用//函数声明//定义函数名function fn(){ console.log(123);}函数表达式:一种变量赋值,函表达式可以没有名字(匿名函数),没有函数提升。//将函数赋值给一个变量,可以是匿名函数var fn = function(){ console.log(123);};由于函数声明提升,函数声明定义的函数,其函数名可以在函数声明之前调用,而函数表..原创 2021-03-15 15:12:18 · 286 阅读 · 0 评论 -
Js 对象之间的继承及原型链查找分析
Js 对象之间的继承构造函数的属性继承①对象拷贝 :使用for…in循环继承父对象属性<script> var student1 = { name : "lisi", id : 1213, meaasge : function(){ console.log(name + "," + id); } }; ..原创 2021-03-15 12:36:54 · 133 阅读 · 0 评论 -
原生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 · 258 阅读 · 0 评论 -
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 · 4441 阅读 · 0 评论 -
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 · 96 阅读 · 0 评论 -
原生Js 实现简单无缝滚动轮播图
效果展示如下:<html><head> <style> *{ margin: 0; padding: 0; } .scroll{ position: relative; width: 830px;/*展示宽度 展示4个图+3个边框=830*/ height: 130px;原创 2021-03-09 21:43:31 · 207 阅读 · 0 评论 -
JavaScript 面向对象编程思想的理解
JS 面向对象面向对象①对象是单个事物的抽象②对象是一个容器。封装了属性和方法属性:对象的状态方法:对象的行为实际开发中,对象是一个抽象的概念,可以理解为数据集或功能集。ECMAScript-262 把对象定义为:无序属性的集合,其属性可以包含基本值、对象或函数面向对象编程 (OOP),是一种编程开发思想。将现实世界的关系抽象成一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟。面向对象与面向过程面向过程就是亲力亲为,面面俱到,步步紧跟,有条不紊。面向对象原创 2021-03-09 21:42:09 · 715 阅读 · 0 评论 -
原生js实现轮播图
原生js 使用for循环和排他思想实现轮播图 轮播、切换功能。这里排他思想指的是排除其他,保留自己,方法就是最开始将所有的项包括选中项都设置为默认样式,再遍历数组给相应的选中项设置自己的样式具体代码和注释如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg原创 2021-03-09 21:36:25 · 118 阅读 · 0 评论 -
Js BOM中用定时器实现简单运动会遇到的一些小问题及解决
简单运动简单运动:是一种视觉暂留效果,只要元素变化过程时间够短,给人眼造成的效果就是一个运动的效果,人眼的视觉残留的时间0.1~0.4 s可以通过定时器,实现每隔一个极短时间(50~100毫秒左右),执行函数,函数内部让运动的属性值发生变化定时器常见问题1将定时器的开始和停止过程写在不同的事件函数内部,容易出现用户错误点击情况: 简单运动代码如下: <html> <head> <meta c..原创 2021-03-09 21:35:06 · 221 阅读 · 0 评论 -
BOM 中的location对象和history对象
location 对象location 对象是window对象下的一个属性,使用时可以省略window对象location可以获取或者设置浏览地址栏的URL<body> <input type="button" value="点击显示" id="btn"> <p id="txt"></p> <script> var btn = document.getElementById("btn..原创 2021-03-09 21:31:25 · 123 阅读 · 0 评论 -
Js 原型链
Js 原型链原型链查找机制每当代码读取某个对象的某个属性时,都会执行一次搜索,目标时具有给定名字的属性:①搜索首先从对象实例本身开始②如果在实例中找到了具有给定名字的属性,则返回该属性的值③如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性④如果在原型对象中找到了这个属性,则返回该属性的值function Student(name,id){ this.name = name; this.id = id; } //获取对象的原创 2021-03-09 21:30:29 · 71 阅读 · 0 评论 -
Js 原型对象——prototype
在介绍prototype原型对象之前,先了解一下静态成员和实例成员是什么:静态成员和实例成员使用构造函数方法创建对象时,可以给构造函数和创建的实例对象添加属性和方法,这些属性和方法都叫做成员。 function Student(name,id){ this.name = name; this.id = id; this.message = function(){ console.log(this.name + ","原创 2021-03-09 21:29:13 · 119 阅读 · 0 评论 -
关于构造函数浪费内存的问题解决
构造函数的问题:浪费内存function Student(name,id){ this.name = name; this.id = id; this.type = "student";//this内部的type属性值是不变的 //每个对象的 message方法都是一样的 this.message = functon(){ console.log(this.name + "," + t原创 2021-03-09 21:28:18 · 281 阅读 · 0 评论