![](https://img-blog.csdnimg.cn/336ac9cf32db439198ee8d641440c79a.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 84
这是学习前端过程中最重要的一部分,需要不断地巩固训练
bear*6
努力的小熊
展开
-
jQuery选择器
常用API一、jQuery选择器1、jQuery基础选择器2、jQuery层级选择器3、隐式迭代4、jQuery 筛选选择器5、jQuery筛选方法6、下拉菜单案例7、jQuery 里面的排他思想二、jQuery样式操作1、操作 css 方法2、设置类样式方法3、类操作与className区别三、jQuery效果1、 显示隐藏效果2、滑动效果3、事件切换4、动画队列及其停止排队方法5、淡入淡出效果6、自定义动画 animate四、jQuery属性操作1、设置或获取元素固有属性值 prop()2、设置或获取元原创 2022-01-08 12:05:25 · 592 阅读 · 0 评论 -
ES6新语法(Set集合、Map集合)
set集合一、Set集合1、操作方法1、add()2、delete()3、has()4、clear()5、for...of ()2、set案例1、数组去重2、交集A∩B3、并集A∪B4、差集A-B二、Map集合1、操作方法1、set()2、get()3、has()4、delete()5、clear()6、for...of遍历7、转为数组8、forEach()遍历一、Set集合Set集合:是一种数据结构,结构类似于数组,且没有重复的值。主要用于数组去重,字符串去重。1、操作方法1、add()用于添加原创 2022-01-07 15:42:47 · 1699 阅读 · 1 评论 -
ES6新语法(解构赋值、模板字符串)
解构赋值、模板字符串一、解构赋值1、解构数组1、变量声明并赋值时的解构2、变量先声明后赋值的解构3、默认值4、交换变量5、解析一个从函数返回的数组6、忽略某些返回值7、将剩余数组赋值给一个变量2、解构对象1、基本赋值2、无申明赋值3、给新的变量名赋值4、默认值5、给新的变量命名并提供默认值二、模板字符串一、解构赋值 解构赋值语法是一种JavaScript表达式,通过解构赋值,可以将属性/值从对象/数组中取出,赋原创 2022-01-06 16:31:14 · 726 阅读 · 2 评论 -
ES6新语法(let和const)
let一、let二、const三、临时死区四、循环中let和const的使用五、let、const、var 的区别 在ES5中,我们通常用var声明变量,但是在JavaScript中用’var'来声明变量会出现变量提升的情况,即通过"var"声明的变量,系统都会把声明隐式的升至顶部,这样的特性往往会让刚接触JavaScript及习惯其他语言的开发人员不适应,导致程序出现问题。所以ES6就给我们新增了两种新的声明格原创 2021-12-31 17:14:05 · 1475 阅读 · 1 评论 -
网页轮播图(详细版)
在网页中,我们经常会看到各种轮播图的效果,它们到底是怎样实现的呢?今天,我们就一起来看一下!首先,我们需要准备若干张图片,在这里我准备了五张图片。功能需求:鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。点击右侧按钮一次,图片往左播放一张,以此类推, 左侧按钮同理。图片播放的同时,下面小圆圈模块跟随一起变化。点击小圆圈,可以播放相应图片。鼠标不经过轮播图, 轮播图也会自动播放图片。鼠标经过,轮原创 2021-12-24 20:37:07 · 57817 阅读 · 61 评论 -
JavaScript之动画函数封装
动画函数一、动画函数原理一、动画函数原理核心原理:通过定时器 setInterval() 不断移动盒子位置。实现步骤:获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位,才能使用element.style.left如下所示:...原创 2021-12-24 11:53:32 · 2635 阅读 · 1 评论 -
PC端网页特效(offset、client、scroll系列)
PC端网页特效一、元素偏移量 offset 系列二、元素可视区 client 系列三、元素滚动 scroll 系列一、元素偏移量 offset 系列offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意: 返回的数值都不带单位offset常用的属性有:二、元素可视区 client 系列三、元素滚动 scroll 系列...原创 2021-12-21 18:53:37 · 493 阅读 · 0 评论 -
JavaScript之立即执行函数
我们知道,在一般情况下,函数必须先调用才能执行,如下所示,我们定义了一个函数,并且调用,function fn(){ console.log(1); } fn();打印结果为:如果不调用的话,我们打印的结果永远不会显示。所以这里就会提到我们的立即执行函数,所谓立即执行函数,就是不需要调用,立马就能执行的函数。立即执行函数有两种最常见的写法:(function(){})()(function(){}())举个例子: (function fn(){原创 2021-12-21 17:17:03 · 1162 阅读 · 0 评论 -
动态生成表格案例(HTML+CSS+JS)
在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除。实现代码为:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0;原创 2021-12-21 16:07:06 · 5296 阅读 · 0 评论 -
模态框拖拽效果实战(HTML+CSS+JS)
在这里做一个模态框拖曳的案例,在这里要实现的功能有:点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层。点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。鼠标松开,可以停止拖动模态框移动。实现思路为:点击弹出层, 模态框和遮挡层就会显示出来 display:block;点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none;在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标。触发事件是鼠标按原创 2021-12-21 15:41:37 · 831 阅读 · 0 评论 -
放大镜效果实战(HTML+CSS+JS)
在浏览网页时,我们经常会看到各种各样放大镜效果,那么小熊今天就来模拟一下该效果。我们要实现的功能为:当鼠标经过小图片时, 会在小图片上显示一个小的遮挡层并将遮挡层里面的内容放大显示,当鼠标离开时,让遮挡层和放大显示的图片消失掉。实现思路为:先让小的遮挡层跟随鼠标移动。因为遮挡层坐标以父盒子为准,所以把鼠标坐标给遮挡层不合适。首先是获得鼠标在盒子的坐标,之后把数值给遮挡层做为left 和top值。但是为了美观,在这里可以将遮挡层中间的坐标给鼠标,即让遮挡层位置再减去盒子自身高度和宽度的一半。然后用到原创 2021-12-21 15:41:13 · 1837 阅读 · 0 评论 -
JavaScript正则表达式
正则表达式:原创 2021-12-14 14:38:13 · 617 阅读 · 0 评论 -
JSON和JSONP区别浅析
JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。 JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不是一回事:JSON是一种数据交换格式,而JSONP是一种非官方跨域数据交互协议。 我们拿谍战片.原创 2021-12-08 19:25:32 · 1034 阅读 · 0 评论 -
JSONP跨域详解 + 模拟百度搜索
JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,在后来的Web服务中非常流行,JSONP看起来与JSON差不多,只不过是被包含在函数中调用的JSON,就像下面这样:callback({"name": "王欢"});JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面 中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。下面就是一个典型的JSONP请求。https://free原创 2021-12-08 18:43:47 · 909 阅读 · 0 评论 -
前端之JSON详解
JSON一、语法1、简单值2、对象3、数组二、解析与序列化1、JSON对象1、stringify()方法2、parse()方法2、序列化选择1、过滤结果2、字符串缩进3、toJSON()方法3、解析选项 JSON:( JavaScript Object Notation JavaScript 对象标记法) 是一种存储和交换数据的语法。JSON 是通过 JavaScript 对象标记法书写的文本。它是一种数据格式,原创 2021-12-07 20:34:07 · 12271 阅读 · 4 评论 -
数据在不同页面的传递(URL参数获取)
网页中,我们常常遇到这种情况,当我们在某个页面输入信息的时候,会跳转到另一个页面,并且会将我们输入的信息传递到另一个页面中,怎样操作呢?今天,我们就来实战一下,比如,现在有两个页面,当我们在一个页面输入用户信息的时候,就会跳转到另一个页面并显示,xx欢迎登录的界面。 先来看看设计思路:第一个登录页面,里面有提交表原创 2021-12-06 18:10:20 · 1376 阅读 · 1 评论 -
JavaScript之BOM(location对象、navigator对象、history 对象)
三大对象一、location对象1、URL2、location 对象的属性3、location 对象的方法二、navigator对象三、history对象window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL 。 因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象。接下来我们就具体的看一下。一、location对象1、URL统一资源定位符 (Uniform Resource Locator, URL) 是互联网上原创 2021-12-06 16:56:07 · 515 阅读 · 0 评论 -
JavaScript之定时器
定时器一、 setTimeout() 定时器在很多页面中,我们都可以看到一些倒计时或者和时间相关的效果,今天小熊将就JavaScript里面的倒计时做一概述。首先,我们先来看看定时器,在JS中,有两种定时器:一、 setTimeout() 定时器语法:window.setTimeout(调用函数, [延迟的毫秒数]);setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。例如:写一个页面,让其五秒钟后弹出‘你好’。代码如下:window.setTimeout原创 2021-12-02 21:58:35 · 8251 阅读 · 3 评论 -
JavaScript之BOM(BOM构成、常用事件)
BOM一、BOM1、什么是BOM?2、BOM的构成二、window对象的常用事件1、窗口加载事件2、调整窗口大小事件三、定时器四、JS执行队列一、BOM1、什么是BOM?BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Ne原创 2021-12-02 16:25:46 · 2070 阅读 · 2 评论 -
JavaScript之事件委托
事件委托一、什么是事件委托二、事件委托的原理三、事件委托的作用一、什么是事件委托 事件委托也称为事件代理。就是利用事件冒泡,把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托就无法实现。举个简单的例子: 例如快递员有100个快递要分别送给100个学生, 如果一个个的送花费时间较长。同时每个学生领取原创 2021-12-01 19:28:52 · 929 阅读 · 0 评论 -
JavaScript之阻止事件冒泡
事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。 我们需要注意的是:事件冒泡本身的特性,会带来的坏处,也会带来的好处,在后续的博客我会详细说明。 所以我们在这里将论述一下如何阻止事件冒泡。 .原创 2021-12-01 17:04:49 · 860 阅读 · 0 评论 -
JavaScript之DOM事件流
事件流一、什么是DOM事件流二、DOM事件流的验证一、什么是DOM事件流 事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。 DOM事件流分为三个阶段:捕获阶段当前目标阶段冒泡阶段 &nb原创 2021-12-01 15:49:38 · 949 阅读 · 8 评论 -
JavaScript之DOM(事件高级)
事件高级一、注册事件(绑定事件)1、addEventListener 事件监听方式2、attachEvent 事件监听方式二、删除事件(解绑事件)三、DOM事件流四、事件对象五、阻止事件冒泡六、事件委托(代理、委派)七、常用的鼠标事件八、常用的键盘事件一、注册事件(绑定事件)给元素添加事件,称为注册事件或者绑定事件。注册事件有两种方式:传统方式和方法监听注册方式1、addEventListener 事件监听方式 eventTarget.addEventListener(type, listener原创 2021-11-29 22:08:35 · 392 阅读 · 0 评论 -
JavaScript之排他思想详述
在前面的博客中,小熊更新了相关操作元素的方法,但是如果有同一组元素,我们想要某一个元素实现某种样式,这时需要怎么办呢? 这里就要用到循环的排他思想。排他思想的算法就是:排除掉其他的(包括自己),然后再给自己设置想要实现的效果。总而言之,排他思想的实现步骤就是所有元素全部清除与设置当前元素。可以简单理解为:所有元素全部清除样式(干掉其他人)给当前元素设置样式 (留下我自己)需要注意的是:这里的顺序不能颠倒。比如,页面有五个按钮,我们想要给它实现循环点击事件:当点到哪个按钮,就让哪个按钮变原创 2021-11-25 16:32:05 · 3976 阅读 · 3 评论 -
JavaScript之DOM(二)(节点操作)
DOM原创 2021-11-25 15:44:20 · 651 阅读 · 1 评论 -
JavaScript之DOM(一)(获取元素、事件基础、操作元素)
DOM 前言一、 DOM 简介1、什么是DOM?2、DOM树的构建二、获取元素三、事件基础四、 操作元素五、结点操作前言前面我们学习了JavaScript语法的相关知识,现在我们就要进入到DO提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、 DOM 简介1、什么是DOM?文档对象模型(Document Object Model.原创 2021-11-25 13:51:15 · 2076 阅读 · 0 评论 -
JavaScript之递归
递归一、什么是递归?二、利用递归求数学题1、求1 * 2 * 3 * 4 ...*n的阶乘。2、 求斐波那契数列 。三、利用递归求:根据id返回对应的数据对象一、什么是递归? 如果一个函数在内部可以调用其本身,那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数。如下所示:function fn(){ fn();}fn();  原创 2021-11-23 20:21:47 · 1028 阅读 · 3 评论 -
JavaScript之闭包
闭包一、什么是闭包二、 闭包的作用 在JavaScript部分,闭包是很重要的东西,所以我们今天就闭包的相关知识做一总结。首先,在了解闭包前,我们先要知道作用域的相关知识,前面作用域相关博客有解释,这里不在赘述。接下来我们来看一下什么是闭包?一、什么是闭包闭包(closure)指有权访问另一个函数作用域中变量的函数。 ----- JavaScript 高级程序设计原创 2021-11-23 15:09:32 · 1022 阅读 · 7 评论 -
JavaScript之严格模式详述
文章目录一、什么是严格模式二、开启严格模式1、为脚本开启严格模式2、为函数开启严格模式三、 严格模式中的变化1. 变量规定2、严格模式下 this 指向问题3、函数变化一、什么是严格模式 JavaScript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式,即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的原创 2021-11-22 22:45:26 · 1551 阅读 · 3 评论 -
JavaScript函数this指向问题
函数进阶原创 2021-11-22 20:40:54 · 471 阅读 · 1 评论 -
JavaScriptES5新方法
文章目录1、数组方法2、字符串方法3、对象方法ES5 中给我们新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括:数组方法字符串方法对象方法接下来我们一一进行讲解。1、数组方法迭代(遍历)方法:forEach()、map()、filter()、some()、every();2、字符串方法3、对象方法...原创 2021-11-22 18:09:25 · 464 阅读 · 0 评论 -
for、for...in、for...of、forEach的区别
循环一、for语句二、for...in语句三、for...of 语句四、forEach语句一、for语句for语句是先测试语句,增加了进入循环之前的初始化代码,以及循环执行后要执行的表达式。语法如下:var count= 10;for(var i=0;i<count;i++){console.log(i);}以上代码在循环开始前定义了变量i的初始值为0,然后求值条件表达式,如果求值结果为true(i<count),则执行循环体。因此循环体也有可能不被执行。如果循环体被执行了,则原创 2021-11-18 17:29:41 · 650 阅读 · 1 评论 -
JavaScript深拷贝、浅拷贝详述
开发过程中,有时会遇到把现有的一个对象的所有成员属性拷贝给另一个对象的需求,这就是拷贝。那么,接下来我们就来讲讲JavaScript里面的拷贝。在JavaScript中,将我们的拷贝分为两类,一类是深拷贝,还有一类是浅拷贝。 那么怎么区分深拷贝和浅拷贝呢? &原创 2021-11-17 18:54:05 · 937 阅读 · 2 评论 -
JavaScript垃圾回收机制
文章目录1、垃圾回收机制的原理2、清除策略1、标记清除2、引用计数3、性能问题4、管理内存JavaScript具有自动垃圾回收机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。在编写JavaScript程序时,开发人员不用担心内存使用问题,所需内存的分配以及无用内存的回收完全实现了自动管理。1、垃圾回收机制的原理 这种垃圾回收机制的原理其实很简单:找出那些不在继续使用的变量,然后释放其不在占用的内存。所以,垃圾原创 2021-11-17 15:58:57 · 119 阅读 · 0 评论 -
JavaScript原型链
ECMAScript中,原型链是实现继承的主要方法,其基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法。这里我们把原型链单独拎出来进行介绍。大家还记得构造函数、原型和实例的关系吗?我们一起来回顾一下:每个构造函数都有一个原型对象,原型对象都包括一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,假如我们让原型对象等于另一个类型的实例,结果会怎样呢?显然,此时的原型对象将包含一个指向另一个原型的指针,相应的,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型原创 2021-11-17 00:08:28 · 517 阅读 · 0 评论 -
JavaScript组合继承(ES5)
继承一、借用构造函数继承父类型属性二、借用原型对象继承父类型方法 ES6之前并没有给我们提供 extends 继承。我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承。一、借用构造函数继承父类型属性 核心原理: 通过 call()把父类型的 this 指向子类型的 this,这样就可以实现子类型继承父类型的属原创 2021-11-16 22:13:38 · 278 阅读 · 0 评论 -
JavaScript原型对象this指向问题
this指向一、this指向二、修改this指向1、call()方法2、apply()方法一、this指向构造函数中的this 指向实例对象。那么原型对象this的指向呢?如下:function Student(age,name){ this.age = age; this.name = name; } var that; Student.prototype.score = fun原创 2021-11-16 22:07:24 · 1282 阅读 · 3 评论 -
JavaScript构造函数和原型
构造函数和原型一、构造函数和原型1、构造函数2、构造函数的问题3、构造函数原型 prototype4、对象原型 __proto__5、constructor 构造函数6、构造函数、实例、原型对象三者之间的关系7、原型链8、JavaScript 的成员查找机制(规则)9、原型对象this指向10、 扩展内置对象二、继承1、call()2、借用构造函数继承父类型属性3、借用原型对象继承父类型方法三、类的本质一、构造函数和原型1、构造函数构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始原创 2021-11-16 21:28:00 · 856 阅读 · 0 评论 -
JavaScript面向对象
面向对象一、面向对象编程介绍1、两大编程思想1、面向对象2、面向过程2、面向对象的优势3、面向对象的特征4、面向过程和面向对象的对比二、ES6 中的类和对象1、对象2、类3、创建类4、类 constructor 构造函数5、类添加方法三、类的继承1、继承2、super 关键字一、面向对象编程介绍1、两大编程思想1、面向对象面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。举个例子:将大象装进冰箱,面向对象做法为:先找出对象,并写出这些对象的功能:大象对象-----进去冰箱对象原创 2021-11-15 20:10:30 · 1351 阅读 · 0 评论 -
JavaScript内置对象
内置对象一、内置对象二、Math对象1、Math对象的使用2、生成指定范围的随机数三、日期对象1、Date()方法的使用1、 获取当前时间必须实例化2、 Date() 构造函数的参数3、日期对象的使用1、get方法的使用2、set方法的使用3、获取时间戳1、通过日期对象的valueof()或getTime()方法2、使用“+”运算符转换为数值型3、使用HTML5新增的Date.now()方法四、数组对象1、数组对象的创建2、检测是否为数组3、添加删除数组元素的方法4、数组排序5、 数组索引方法数组去重案例6原创 2021-11-09 00:14:07 · 974 阅读 · 1 评论