清晨投递-CSDN博客

原创 CSS3新属性兼容性处理

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-transform:rotate(-3deg); /*为Firefox*/ -ms-transform:rotate(-3deg); /*为IE*/ -o-transform:rotate(-3deg); /*为Opera*/ transform:rotate(-3deg);兼容写法写在前面，标准写法写在最后。...

2022-04-22 14:30:45 235

原创 CSS公共样式

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css *//* Document ========================================================================== *//** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of fon.

2022-04-22 14:26:49 126

原创文字折行效果

效果：代码结构：代码：span{ display: table-cell; white-space: nowrap;}i{ display: table-cell;}

2022-04-22 14:06:51 166

原创 js面向对象

面向对象编程介绍两大编程思想面向过程面向对象面向过程编程POP( Process-oriented programming )面向过程就是分析出解决问题所需要的步骤，然后用函数把这些一步一步实现，使用的时候再一个一个的依次调用。举个例子：将大象装进冰箱，面向过程做法。1、打开冰箱门2、将大象装进冰箱3、关上冰箱门面向过程，就是分析好了的步骤，按步骤解决问题。面向对象编程OOP( Object Oriented Programming )面向对象就

2022-02-03 18:08:29 609

原创原生js本地存储

目录概述本地存储特性window.sessionStoragewindow.localStorage案例：记住用户名概述随着互联网的快速发展，基于网页的应用越来越普遍，同时变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。本地存储特性1、数据存储在用户浏览器中2、设置、读取方便，甚至页面刷新不丢失数据3、容量较大，sessionStorage约5M，localStorage约20M4、只能存储字符.

2022-01-31 14:34:07 896

原创 click延时解决方案

移动端会有300ms的延时，原因是移动端屏幕双击会缩放。解决方案：1、禁用缩放。禁用浏览器默认的双击缩放行为<meta name="viewport" content="user-scalable=no">2、利用touch事件自己封装这个事件解决300ms延迟原理：（1）当手指触摸屏幕，记录当前触摸时间（2）当手指离开屏幕，用离开的时间减去触摸的时间（3）如果时间小于150ms，并且没有滑动过屏幕，那么就定义为点击代码如下：//封装...

2022-01-31 13:44:59 777

原创移动端触屏事件

概述移动端浏览器兼容性较好，不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，移动端也有自己独特的地方。比如touch（也称触摸事件），touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。常见的触屏事件触屏touch事件说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触发 <bo...

2022-01-29 15:05:19 361

原创 js 轮播图

话不多说，上代码一、html、css部分<!DOCTYPE html><html lang="zh-cn"><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".

2022-01-18 16:14:59 458

原创动画函数封装

一、动画实现原理核心原理：通过定时器setInterval（）不断移动盒子位置。实现步骤：1、获得盒子当前的位置。2、让盒子在当前位置上加1个移动距离。3、利用定时器不断重复这个操作。4、加一个结束定时的条件。注意：需要给元素添加定位 <style> div { /* 绝对定位 */ position: absolute; left: 0; height: 100px; width: 10

2022-01-16 16:03:54 407

原创 mouseenter 和 mouseover 的区别

当鼠标移动到元素上时就会触发mouseenter事件，类似于mouseover。两者的区别：mouseover：（1）鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter：（1）经过自身盒子才会触发。之所以这样，是因为mouseenter不会冒泡。跟mouseenter搭配鼠标离开mouseleave同样不会冒泡。...

2022-01-16 14:54:14 314

原创 offset、client、scroll三大家族

一、元素偏移量offset系列offset概述offset翻译过来就是偏移量，使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等（1）获得元素距离带有定位父元素的位置。（2）获得元素自身的大小（宽度高度）。（3）注意：返回的数值都不带单位。offset系列属性作用 element.offsetParent 返回作为该元素带有定位的父级元素，如果父级没有定位则返回body element.offsetTop 返回元素相...

2022-01-16 14:49:28 150

原创 JS执行机制

目录一、JS是单线程二、同步任务和异步任务同步异步三、JS执行机制（事件循环）四、代码思考一、JS是单线程单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。二、同步任务和异步任务单线程导致的问题就是后面的任务等待前面任务完成...

2022-01-14 14:41:56 2565

原创 navigator、history对象

2022-01-14 14:33:55 1642

原创 location对象

目录一、什么是location对象？二、URL三、location对象的属性案例：5秒后自动跳转页面案例：获取URL参数四、location对象的常见方法一、什么是location对象？window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以也将这个对象称为location对象。二、URL三、location对象的属性location对象属性返回值 loc

2022-01-14 12:27:51 425

原创定时器以及this指向问题

定时器（两种）概述：window 对象提供了2个非常好用的方法 —— 定时器（1）setTimeout（）（2）setLnterval（）setTimeout() 定时器开启定时器window.setTimeout(调用函数 , 延迟的毫秒数); // '延迟的毫秒数' 后执行setTimeout() 这个调用函数也称为回调函数callback注意：（1）window 可以省略。（2）调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()’三种形式..

2022-01-14 10:58:30 582

原创 BOM以及window对象常用事件

目录什么是BOM？BOM的构成顶级对象windowwindow对象常见事件页面（窗口）加载事件（2种）第一种第二种调整窗口大小事件什么是BOM？（1）BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。（2）BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。（3）BOM缺乏标准，javaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，

2022-01-13 17:25:50 204

原创 JS事件高级

注册事件（2种方式）给元素添加事件，称为注册事件和绑定事件注册事件有两种方式：传统方式和监听注册方式<body> <button>传统方式</button> <button>监听注册方式</button> <button>IE9之前支持</button> <script> var btn = document.querySelectorAll('button');

2022-01-13 13:38:04 191

原创 DOM的核心总结

关于DOM操作，主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。创建1、document.write2、innerHTML3、createElement增1、appendChild2、insertBefore删1、removeChild改主要针对dom的元素属性，dom元素的内容、属性、表单的值等等1、修改元素属性：src、href、title等等2、修改普通元素内容：innerHTML、innerText3、修改表单

2022-01-09 16:27:37 72

原创 javaScript-WebAPIS（二）

排他思想如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法：1、给所有元素清除样式（干掉其他人）2、给当前元素设置样式（留下我自己）3、顺序不能颠倒，首先干掉其他人，再设置自己完成一个案例：有五个按钮，按下时背景设置为粉红色 <style> div { margin: 0 auto; width: 300px; } .bg { background-color: pink;..

2022-01-08 12:00:56 392

原创 javaScript-WebAPIs（一）

下面学习JS的另外一个部分——DOM先来了解一下和API和WebAPIAPI的概念API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。Web API的概念Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。现阶段我们主要针对于浏览器讲解常

2022-01-04 15:03:56 225

原创 javaScript简单类型和复杂类型

目录一、简单类型和复杂类型二、堆和栈三、简单类型的内存分配四、复杂类型的内存分配五、简单类型传参六、复杂类型传参一、简单类型和复杂类型简单类型又叫做基本数据类型或值类型，复杂类型又叫做引用类型。值类型：简单数据类型/基本数据类型，在存储时变量中存储的是本身，因此叫做值类型String、Bollean、Number、Undefined、null引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用类型通过new关键字创建的对象（

2022-01-03 15:08:11 112

原创 javaScript内置对象

内置对象概述javaScript对象分为三种：自定义对象、内置对象、浏览器对象内置对象就是指JS语言自带的一些对象，供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性与方法）最大的优点就是帮助开发者快速开发javaScript提供了多个内置对象：Math、Date、Array、String等等查文档学习一个内置对象的使用，只需要学会其常用成员的使用，可以通过查文档学习。Mozilla开发者网络（MDN）提供了有关开放网络技术（open Web）的信息...

2022-01-01 19:32:16 363

原创 javaScript对象

目录对象概述创建对象的三种方式对象字面量创建对象对象的调用变量、属性、函数、方法总结利用new Object创建对象构造函数方式创建对象new关键字遍历对象属性小结对象概述什么是对象？现实生活中：万物皆对象，对象是一个具体的事物，看得见，摸得着的实物。例如：一本书、一辆汽车、一个人。一本书可以是“对象”，一个数据库、一张网页也可以是“对象”。在javaScript中，对象是一组无序的相关属性和方法的集合。对象是由属性和方法组成的。属性：事物的特

2021-12-30 19:56:10 612

原创 javaScript预解析

目录概述变量预解析和函数与解析变量预解析（变量提升）函数预解析预解析案例1问：console.log(num); // 结果是多少？结果：2问：console.log(num); // 结果是多少？var sum = 10;结果：3问：fu();function fu(){ console.log('打印');}结果：4问：fn();var fn = function (){ console.log('想不到吧.

2021-12-30 14:43:37 263

原创 javaScript作用域

目录概述js没有块级作用域变量的作用域全局变量：局部变量：全局变量和局部变量的区别作用域链概述通常来说，一段程序代码所用到的名字不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。javaScript（es6前）中的作用域有两种；全局作用域局部作用域...

2021-12-30 14:04:02 50

原创 javaScript函数

函数的概念在实际敲代码中，可能会遇到逻辑一样，但是几个值不一样，这个时候可以使用函数，使不用重复敲同一种逻辑。函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。函数的使用函数在使用时分为两步：声明函数和调用函数声明函数：function 函数名() { // 函数体}function 关键字用来声明函数函数命名：通常为了实现某个功能才定义的，通常命名为动词：如getSum。调用函数：函数名(); /...

2021-12-29 16:13:07 141

原创 javaScript数组

数组的概念之前学习的知识，一个变量只能存储一个值。如果想存储一组数据，可以使用数组（Array）。数组概念：数组是指一组数据的集合，其中的每个数据被称为元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。创建数组有两种方式：1.new关键字创建数组var 数组名 = new Array(); // 创建空数组对象2.利用数组字面量创建数组（常用）// 1.使用数组字面量方式创建空的数组var 数组名 = [];// 2.使用数字

2021-12-28 21:10:05 294

原创 javaScript流程控制-循环

循环循环目的：在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句。在JS中，主要有三种类型的循环语句：1、for循环2、while循环3、do...while循环for循环概念：在程序中，一组被重复执行的语句被称之为循环体，能否接着重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。语法结构：// 初始化变量：可以理解为循环的开始值// 条件表达式：可以理解为循环结束的条件// 操作表

2021-12-26 18:00:18 91

原创 javaScript流程控制

流程控制在一个程序中，各代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现要完成的功能。流程控制有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。顺序流程控制概述：它没有特定的语法，程序会按照代码的先后顺序，依次执行。分支流程控制if语句概述：由上到下执行代码的过程中，根据不同的条件、执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。JS语言提供了两种分支结构语句：1、if语句

2021-12-25 20:06:53 327

原创 javaScript操作符

运算符运算符也称为操作符，用于实现赋值，比较和执行运算等功能的符号。javaScript常用算术运算符递增和递减运算符比较运算符逻辑运算符赋值运算符算术运算符1.概括：算术运算使用的符号，用于执行两个变量或值的算术运算。2.浮点数的精度问题浮点数值的最高精度是17位小数，但在进行算术计算时其精度远远不够整数。var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004console.l.

2021-12-24 21:18:12 221

原创 javaScript数据类型

数据类型简介1 为什么需要数据类型2 变量的数据类型简单数据类型1、数据类型的分类2、数字型 Number2.1、数字型进制2.2、数字型三个特殊值3、字符串型 String3.1. 字符串引号嵌套3.2. 字符串转义符3.3 字符串长度4、布尔型 Boolean4.1、Undefined 和 Null获取变量数据类型1、typeof 可用来获取检测变量的数据类型2、不同类型的返回值3、字面量数据类型转换1、什么是数据类...

2021-12-24 17:03:08 55

原创 javaScript变量

目录变量概述变量的使用1.声明变量2.变量赋值3.变量初始化变量语法扩展1.更新变量2.同时声明多个变量3.变量特殊情况变量命名规范交换变量案例变量概述什么是变量？变量是存放数据的容器，通过变量名获取存储在里面的数据，里面的数据也可以修改本质：变量是程序在内存中申请的一块存放数据的空间变量的使用变量在使用时分为两步：声明变量、变量赋值1.声明变量 // var 声明变量关键字 // mess...

2021-12-24 16:38:36 221

原创初识javaScript

创始者：布兰登·艾奇（Brendan Eich，1961~至今）用10天完成JavaScript设计最初命名LiveScript，后来在于Sun合作之后将其命名为JavaScript。JavaScript是什么？是一种运行在客户端的脚本语言，不需要编译，运行过程中由js解释器（js引擎）逐行解释并执行。现在也可以基于node.js技术进行服务端编程js的组成js分为三个部分：ECMAScript（js语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型）js

2021-12-24 16:05:39 245

小戴_博客