小白张幺幺-CSDN博客

原创梳理一下JS中的继承方法

JS中的继承什么是继承？继承可以在一个对象中去访问另一个对象的方法或者属性，提高代码自由度。方法一、通过call继承1.解决引用类型继承问题例：// 父类 function Parent(name) { this.name = name; this.color = ['pink', 'red']; } // 子类 function Child() { Parent.call(thi

2020-11-17 20:46:14 604

HTML5中的拖拽以及使用原生js实现拖拽效果1. HTML5中的拖拽1.1 相关知识拖拽元素：可以为元素添加draggable="true"来让元素能够被拖拽。拖拽元素的事件监听：（应用于拖拽元素）ondragstart：当拖拽开始时调用ondragleave：当鼠标离开拖拽元素时调用ondragend：当拖拽结束时调用ondrag：整个拖拽过程都会调用目标元素：把元素A拖拽到元素B里，那么元素B就是目标元素。页面中任何一个元素都可以成为目标元素。目标元素的事件监听：（应用于目标元

2020-11-17 19:55:18 795

原创移动端的touch事件详解

移动端的touch事件触摸事件的起源随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页，我们平时在pc浏览器上用的鼠标事件，比如：click, mouseover等，已经无法满足移动设备触摸屏的特点，触摸时代的到来，离不开那些触摸事件。触摸事件touchstart、touchmove和touchend的出现是因为iOS版Safari浏览器为了向开发人员传达一些信息而新添加的事件。因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件

2020-11-10 20:18:53 3140

原创移动端适配之rem详解

移动端适配之rem详解rem是什么？rem（font size of the root element）是指相对于根元素的字体大小的单位。1rem等于根元素的font-size，即只需要设置根元素的font-size，其它元素使用rem单位时，设置成相应的百分比即可。为什么需要rem？（与传统的单位的区别）px：是相对于显示器屏幕分辨率而言的相对长度单位。在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。em：是继承父级的（相对于父元素）。假

2020-11-10 19:17:23 3313

原创媒体查询（-@media）的用法详解

媒体查询（-@media）的用法详解媒体查询可以用来干什么？@media的作用：媒体查询可以在指定的设备上使用对应的样式替代原有的样式。可以简单理解为：告诉浏览器，当满足某条件时，调用某样式。当满足条件A时，调用A样式；当满足条件B时，调用B样式。检测1.viewport(视窗) 的宽度与高度2.设备的宽度与高度3.朝向 (智能手机横屏，竖屏) 。4.分辨率等等语法和操作符语法一：内联@media@media 查询条件表达式｛ CSS样式｝例：@media not|only m

2020-11-03 20:03:30 19144 1

原创 bootstrap中的栅格系统详解

bootstrap中的栅格系统简介什么是栅格系统？Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。（十二栅格系统）原理栅格系统通过行（row）与列（column）组成页面布局，页面内容就放入这些创建好的容器中。使用规则1.内容必须放在创建好的"container"容器中。例：<div class="container"> <!-- 行 --&g

2020-11-03 19:34:05 2097

原创 jQuery中有关节点一些操作

jQuery中的节点操作DOM 中有一个非常重要的功能，就是节点模型，也就是 DOM 中的“M”。页面中的元素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。而使用jQuery中的节点操作可以大大的减少操作量。节点操作1.动态创建元素把创建的标签以字符串的方式直接写在$()里面即可。例：// $()函数的另外一个作用：动态创建元素 var $li = $(“<li>我是一个li元素</li>”)

2020-10-27 20:57:40 149

原创 jQuery中的动画方法分析

jQuery中的动画jQuery中的动画是什么？用jQuery实现动画，原理非常简单：我们只需要以固定的时间间隔（例如，0.1秒），每次把DOM元素的CSS样式修改一点（例如，高宽各增加10%），看起来就像动画了。但是要用JavaScript手动实现动画效果，需要编写非常复杂的代码。如果想要把动画效果用函数封装起来便于复用，那考虑的事情就更多了。使用jQuery实现动画，代码已经简单得不能再简化了：只需要一行代码就可以解决。jQuery内置的几种动画样式一、show/hide （显示／隐藏）直

2020-10-27 20:22:41 794 1

原创 CSS3之动画和过渡

CSS3之动画和过渡一、动画（animation）在CSS3中什么是动画？在CSS3中使元素从一种样式逐渐变化为另一种样式的效果被称作为动画。创建动画剧本（@keyframes）1.@keyframes 规则是创建动画。2.@keyframes 规则内指定一个 CSS 样式逐步从目前的样式更改为新的样式。语法@keyframes move{ /* 背景颜色由红色变为黄色 */ from {background: red;} to {background: yellow;}

2020-10-20 20:51:21 372

原创 CSS3弹性盒子常用使用方法详解

CSS3中的弹性盒子布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现；2009年，W3C提出了一种新的方案—Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。弹性盒子是 CSS3 的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。组成内容

2020-10-20 20:23:30 1883

原创百度地图API的一些调用

百度地图API的一些调用调用百度地图的API可以非常方便的实现我们需要的地图的功能，今天研究了一下调用百度地图API，显示定位信息、地图标注、路径导航等问题处理起来真的很方便。功能很强大，调用也很方便，可以实现的功能非常多，有一点要注意：调用API要有一个开发者密钥，申请过程十分简单。1.申请ak：调用百度地图API，首先你需要得在官网注册一个帐号然后申请一个密钥，注册网址：http://lbsyun.baidu.com/，在打开网页的最下方可以申请密钥2.如果只是想在浏览器及本地测试，创建应用类型

2020-10-10 19:50:17 847

原创 JS中的继承（部分）

JS中的继承（部分）什么是继承？继承可以在一个对象中去访问另一个对象的方法或者属性，提高代码自由度。方法一、通过call继承1.解决引用类型继承问题例：// 父类 function Parent(name) { this.name = name; this.color = ['pink', 'red']; } // 子类 function Child() { Parent.call

2020-10-08 19:51:58 189

原创 JS原型中的constructor属性

JS原型中的constructor属性定义constructor 属性返回对创建此对象的数组函数的引用。语法object.constructorthis指向constructor,构造函数，对这个名字，我们都不陌生，constructor始终指向创建当前对象的构造函数。这里有一点需要注意的是，每个函数都有一个prototype属性，这个prototype的constructor指向这个函数，这个时候我们修改这个函数的prototype时,就发生了意外。例：function Person(n

2020-10-08 19:14:47 1302

原创 JS之原型的基本使用

JS中的原型js中的原型毫无疑问一个难点，对于这个难点我们都应该先熟练的使用，然后自己整理一套属于自己的理解说辞，才不会忘记。原型（对象属性）1.原型是function对象的一个属性，它定义了构函数制造出的对象的公共祖先，通过该构造函数的对象，可以继承该原型的属性和方法，原型也是对象使用构造函数创建对象：例Person.prototype.name = "小明"; function Person() { } var person = new Person();

2020-10-08 18:52:53 173

原创 JS中的同步任务和异步任务的概念以及区别

JS中的同步和异步单线程语言js是一门单线程语言，所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。如果一个任务耗时过长，那么后面的任务就必须一直等待下去，会拖延整个程序，常见浏览器无反应，可能就是一段代码死循环，造成程序卡住在这个位置，无法继续。而js之所以会是单线程语言的原因和它的用途有很大的关系，我们都知道，JavaScript作为浏览器的脚本语言，主要用来实现与用户的交互，利用JavaScript，我们可以实现对DOM的各种各

2020-10-08 18:16:19 1464

原创 JavaScript中的Math类

JavaScript中的Math类Math类的简介最近在运用canvas(画布)的一些方法去绘制一些东西时，经常会搭配Math类来使用，所以就想来对Math类的方法来做一个总结。首先Math类是一个很有用的数学帮助类，使用也非常简单，这个类比较特殊，首先他和String类一样都是用final修饰，所以不能有子类，还有就是它的构造方法是私有的，也就是我们不能通过new的方法在其它类中构造Math对象，那么我们怎样调用它的方法，原来它的所有的方法都是静态方法，也就是可以直接使用类名就可以访问方法了。方法

2020-09-27 22:33:09 387

原创 HTML5中的canvas（画布）

HTML5中的canvas画布（）1、关于canvas的简介1.canvas是HTML5标签，表示画布，canvas只是作为图像绘制的容器，所有的绘制工作都在脚本JavaScript内部完成。2.canvas的作用：①绘制基础图形；②绘制文字；③图形变形和图片合成；④处理图片和视频；⑤动画实现；⑥制作小游戏等等。3.支持canvas的浏览器：Firefox, safari, chrome, opera, IE9等。2、创建和获取① 查看当前浏览器是否支持canvas：可以在canvas标签内书

2020-09-27 20:42:44 1549

原创 JS中的事件流程以及DOM2级事件绑定与DOM0级事件绑定

JS中的事件流程以及DOM2级事件绑定与DOM0级事件绑定事件流程事件流程分为三个阶段：捕获阶段、目标阶段、冒泡阶段。捕获阶段：事件从最顶层元素开始执行，一层层往下，直到精确元素。目标阶段：事件在精确元素上执行。冒泡阶段：事件从精确元素开始执行，一层层往上，直到顶层元素（注：高级浏览器的顶层元素是window，ie8以下的浏览器顶层元素是document）DOM0级事件的绑定语法：box.onclick = function(){}//元素.事件行为=函数相当于给一个元素的属性赋值,只

2020-09-20 21:54:22 1706

原创 JS使用防抖和节流来减少影响性能的因素

JS中的防抖和节流什么是防抖和节流在前端开发中会遇到一些频繁的事件触发，例如input，keyup，keydown，scroll，resize，mousemove等，这非常影响性能，所以我们需要控制它们触发的频率，方法就是防抖与节流。防抖防抖的原理就是：要等你触发完事件 n 秒内不再触发事件，我才执行。 function debounce(func, wait) { var timeout; return function () { var conte

2020-09-20 20:56:12 368

原创 JS中的深拷贝（深克隆）和浅拷贝（浅克隆）

JS中的深拷贝（深克隆）和浅拷贝（浅克隆）一、浅拷贝：例：// 对象var obj1 = { a: 1, b: 2};var obj2 = obj1;obj2.a = 3;console.log(obj1); // {a: 3, b； 2}console.log(obj2); // {a: 3, b: 2}// 数组var arr1 = [1, 2, 3];var arr2 = arr1;arr2.push(4);console.log(arr1); /

2020-09-13 15:40:19 322

原创 JS定时器的使用方法详解

JS定时器的使用什么是定时器？定时器就是由JS提供了一些原生方法来实现延时去执行某一段代码。定时器的分类一、第一种是一次性的：setTimeout：设置一个定时器，在定时器到期后执行一次函数或代码段使用方法：var timer=setTimeout(fun,毫秒数)清除的方法：clearTimeout(timer)二、第二种是周期性的：setInterval: 以固定的时间间隔重复调用一个函数或者代码段使用方法：var timer=setInterval(fun,毫秒数)清除的方

2020-09-13 14:52:17 3635

原创 JS中的作用域概念以及注意事项

JS中的作用域一.什么是作用域1.javaScript作用域：就是某个变量在某个范围内起作用和效果，目的是为了提高程序的可靠性更重要的是减少命名冲突。2.js的作用域分为（es6）之前:全局作用和局部作用域。例： <script> //1.全局作用域：整个script标签或者是一个单独的js文件 var num = 10; //2.在函数内部就是局部作用域（函数作用域）这个变量只在函数内部起效果和作用 functio

2020-09-06 20:11:45 693 1

原创 JS之代码简洁（补充）

JS之代码简洁（补充）前言我们在编写程序应该想到将为未来的自己和“其他人”编写代码，而不仅仅只编写当前能工作就行的代码。所以，在编写代码时一定要尽量让自己的代码更加的简洁，从而易于人理解的、易于更改或扩展。一.函数1.使用长而具有描述性的名称。考虑到函数表示某种行为，函数名称应该是动词或短语，用以说明其背后的意图以及参数的意图。函数的名字应该说明他们做了什么。//不好的方式function notif(user) { // ...}//好的方式function notifyUser(e

2020-09-06 18:05:29 168

原创 JS之代码简洁（部分）

JS之代码简洁（部分）前言我们在编写程序应该想到将为未来的自己和“其他人”编写代码，而不仅仅只编写当前能工作就行的代码。所以，在编写代码时一定要尽量让自己的代码更加的简洁，易于人理解的、易于更改或扩展的代码。1. 强类型检查用全等于( === ) 代替等于 ( == )。例：// 如果处理不当，它会极大地影响程序逻辑。就比如你要往东走，但是却由某种原因，让你往西走0 == false // true0 === false // false2 == "2" // true2 === "2"

2020-08-30 20:39:58 233

原创 js中的try-catch-finally和throw（错误的捕获和抛出）

js中的try-catch-finally和throw（错误的捕获和抛出）什么情况下适合使用错误的捕获和错误的抛出？我觉得应该捕获那些你确切地知道该如何处理的错误，捕获错误的目的在于避免浏览器以默认方式处理它们(比如不友好的提醒、代码终止，界面卡住或者崩溃)，而抛出错误的目的在于提供错误发生具体原因的消息，以提示我们更准确的处理他们。方法捕获错误：try-catch-finally抛出错误：throw使用方法捕获例：try{ // 可能会导致错误的代码 // 如

2020-08-29 16:56:44 1098

原创 JS中如何判断一个对象是否为数组？

JS中如何判断一个对象是否为数组？为什么要判断一个对象是否为数组呢？首先，我们应该都知道typeof操作符对于一些常用类型的判断是非常轻松简便的，但是当它遇到null类型和Array对象这两个时，都会被判断为object例：console.log(typeof null); // objectconsole.log(typeof [1,2,3]); // objectconsole.log(typeof '这是一段字符串'); // stringconsole.log(typeof 1)

2020-08-23 20:18:55 3383

原创 JS中的replace()配合正则表达式使用的方法

JS中的replace()配合正则表达式使用的方法replace()方法的作用replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。replace()的语法string.replace(regexp,replacement);第一个参数regexp为：声明了要替换的模式的RegExp对象（正则表达式）。第二个参数replacement为：一个字符串，声明的是替换文本或生成替换文本的函数，比如声明为","，那么匹配到的字符会被替换为","replac

2020-08-22 16:50:41 3368

原创 JS中的正则表达式概念以及部分使用方法

JS中的正则表达式正则表达式的作用是什么？正则表达式用于定义一些字符串的规则，计算机可以根据这个规则，来检查一个字符串是否符合规则，将字符串中符合规则的内容匹配出来。如何创建一个正则表达式？创建一个正则表达式有两种方式：一、构造函数方式例：var reg = new RegExp('\d', 'gim');通过 new 构造一个正则表达式对象，其中第一个参数 ‘\d’ 是正则内容，第二个参数 ‘gim’ 是修饰符。两个参数皆为字符串类型。修饰符的作用是对匹配过程进行限定。i表示对匹配的内容

2020-08-15 17:02:46 233

原创 JS中的isNaN()方法详解

JS中的isNaN()方法isNaN存在的意义由于NaN是唯一一个不等于自身的值，所以它不像其他值，可以用相等操作符来判断是否等于自身。比如undefined == undefined和undefined === undefined都会返回true，而NaN == NaN和NaN === NaN都会返回false，所以isNaN()就诞生了，那么它可以用来干什么呢？下面就来介绍一下它的作用：判断原理isNaN函数接受一个参数，原理是先尝试将参数转换为数值型，调用的是Number()方法，再进行判断

2020-08-15 16:17:26 3490

原创 JS中改变this指向的两种方法

JS中改变this指向的两种方法thisthis是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。this一般指向的是当前被调用者，但也可以通过其它方式来改变它的指向，下面将介绍两种改变this指向的方式：1.call()call(thisObj[, arg1[, arg2[, …]]])第一个参数就是要更改this指向的对象，为必选参数; 之后的参数要根据调用的函数是否需要传入参数(为可选的)例：

2020-08-09 21:36:24 1359

原创分析JS中的闭包

JS中的闭包什么是闭包？我们都知道，js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，而外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的，那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢？闭包就是用来解决这一需求的，我理解闭包的本质就是在一个函数内部创建另一个函数。从而达到能够读取其他函数

2020-08-09 14:23:47 131

空空如也

空空如也