是瑞瑞小甜心-CSDN博客

原创 33、flexible分析

33、flexible分析(function flexible(window, document) { // 获取的html 的根元素 var docEl = document.documentElement // dpr 物理像素比 var dpr = window.devicePixelRatio || 1 // adjust body font size 设置body字体大小 function setBodyFontSize() {

2021-12-18 16:19:52 216

原创 32、立即执行函数

32、立即执行函数<script> // 1.立即执行函数: 不需要调用，立马能够自己执行的函数 function fn() { console.log(1); } fn(); // 2. 写法也可以传递参数进来 // 两种写法：1.(function() {})() 2.(function(){}()); (function(a, b) {

2021-12-18 16:19:07 174

原创 31、本地存储

31、本地存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。1.本地存储（webStorage）特性1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3、容量较大，sessionStorage约5M、localStorage约20M4、只能存储字符串，可以将对象JSON.stringify() 编码后存储5、xxxxxStorage.getItem(xxx)如果xx

2021-12-18 16:18:20 191

原创 30、移动端常用开发框架

30、移动端常用开发框架1.框架概述框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。前端常用的框架有 Bootstrap、Vue、Angular 等2. BootstrapBootstrap 是一个简洁、直观、强悍的前端开发框架，它让 web 开发更迅速、简单。它能开发PC端，也能开发移动端Bootstrap JS插件使用步骤：1.引入相关js 文件2.复制HTML 结构3.修改对应样式

2021-12-18 16:17:43 4025 1

原创 29、移动端常用开发插件

29、移动端常用开发插件1. 什么是插件移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我完成操作，那么什么是插件呢？JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。我们以前写的animate.js 也算一个最简单的插件fastclick 插件解决 300ms 延迟。使用延时GitHub官网地址： https://github.com/ftlabs/fast

2021-12-18 16:17:05 590

原创 28、移动端常见特效

25、移动端常见特效1.案例: 移动轮播图移动端轮播图功能和基本PC端一致。可以自动播放图片手指可以拖动播放轮播图案例分析:自动播放功能开启定时器移动端移动，可以使用translate 移动想要图片优雅的移动，请添加过渡效果window.addEventListener('load', function() { // alert(1); // 1. 获取元素 var focus = document.querySelector('.focus

2021-12-18 16:16:31 196

原创 27、 classList 属性

27、 classList 属性classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。该属性用于在元素中添加，移除及切换 CSS 类。有以下方法添加类：element.classList.add（’类名’）；focus.classList.add('current');移除类：element.classList.remove（’类名’）;focus.classList.remove('current');切换类：element.classList

2021-12-18 16:15:51 281

原创 26、触屏事件

26、触屏事件1. 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下：<body> <div></div> <script&g

2021-12-18 16:15:23 661

原创 25、常见网页特效案例

25、常见网页特效案例1. 案例：网页轮播图轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求：鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。图片播放的同时，下面小圆圈模块跟随一起变化。点击小圆圈，可以播放相应图片。鼠标不经过轮播图，轮播图也会自动播放图片。鼠标经过，轮播图模块，自动播放停止。案例分析：因为js较多，我们单独新建js文件夹，再新建js文件，引入页面中。此时需要添加

2021-12-18 16:14:46 319

原创 24、动画函数

24、动画函数1. 动画实现原理核心原理：通过定时器 setInterval() 不断移动盒子位置。实现步骤：获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位，才能使用element.style.left<body> <div></div> <script> // 动画原理：通过定时器 setInterval() 不断移动盒子位置

2021-12-18 16:14:09 73

原创 23、mouseenter 和mouseover的区别

23、mouseenter 和mouseover的区别当鼠标移动到元素上时就会触发mouseenter 事件类似 mouseover，它们两者之间的差别是mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发之所以这样，就是因为mouseenter不会冒泡跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡<body> <div class="father">

2021-12-17 22:03:37 66

原创 22、scroll 元素滚动

22、scroll 元素滚动1. scroll 概述scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。2. 页面被卷去的头部如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。<body> <div> 我是内容我是内容我是内容我是内容我是内容我是内容

2021-12-17 22:03:10 1489

原创 21、client元素可视区

21、client元素可视区1. client概述client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。<body> <div></div> <script> // client（可视区）和offsetWidth最大的区别就是 client不包含边框 // padding+wid

2021-12-17 22:02:27 99

原创 20、offset 元素偏移量

20、offset 元素偏移量1. offset 概述offset 翻译过来就是偏移量，我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位<body> <div class="father"> <div class="son"></div> </div> &lt

2021-12-17 22:01:51 1098

原创 19、history对象

19、history对象window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。<body> <a href="list.html">点击我去往列表页</a> <button>前进</button> <script> var btn =

2021-12-17 22:01:11 88

原创 18、navigator对象

2021-12-17 22:00:28 83

原创 17、location对象

17、location对象1. 什么是 location 对象2.URL// 获取URL参数<body> <form action="index.html"> 用户名： <input type="text" name="uname"> <input type="submit" value="登录"> </form><script> console.log(l

2021-12-17 21:59:55 487

原创 16、JS执行机制

16、JS执行机制以下代码执行的结果是什么？ console.log(1); setTimeout(function () { console.log(3); }, 1000); console.log(2);以下代码执行的结果是什么？ console.log(1); setTimeout(function () { console.log(3); }, 0); console.log(2);1. JS 是单线程单线程就意味着，所有任务需要

2021-12-17 21:59:19 1611

原创 15、this指向问题

15、this指向问题this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。现阶段，我们先了解一下几个this指向全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）方法调用中谁调用this指向谁构造函数中this指向构造函数的实例 <body> <button>点击</button> &lt

2021-12-17 21:58:38 67

原创 14、定时器

14、定时器window 对象给我们提供了 2 个非常好用的方法-定时器。setTimeout()setInterval()1.setTimeout() 炸弹定时器1.1 开启定时器普通函数是按照代码顺序直接调用。简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。例如：定时器中的调用函数，事件处理函数，也是回调函数。以前我们讲的 element.onclick = function(){} 或者 element.addEventLi

2021-12-17 21:57:58 113

原创 13、BOM

13、BOM1. 什么是BOM BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。2. BOM的构成BOM 比 DOM 更大，它包含 DOM。3. 顶级对象window

2021-12-16 21:49:58 65

原创 12、常用的键盘事件

12、常用的键盘事件1. 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 // document.onkeyup = function() { // console.log('我弹起了'); // } document.addEventListener('keyup', function() {

2021-12-16 21:49:20 881

原创 11、常用鼠标事件

11、常用鼠标事件1. 案例：禁止选中文字和禁止右键菜单<body> 我是一段不愿意分享的文字 <script> // 1.禁用右键菜单 contextmenu document.addEventListener('contextmenu', function(e) { e.preventDefault(); }) // 2. 禁止选中文字 sel

2021-12-16 21:48:18 92

原创 10、事件高级

10、事件高级1. 注册事件（2种方式）2. 事件监听2.1addEventListener()事件监听（IE9以后支持）eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。2.2attacheEvent()事件监听（IE678支持） eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的

2021-12-16 21:47:54 75

原创 9、DOM的核心总结

9、DOM的核心总结关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。1. 创建2. 增3. 删4. 改5. 查6. 属性操作

2021-12-16 21:46:25 91

原创 8、节点操作

8、节点操作1. 节点概述网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。 HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。一般节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。2. 节点层级利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

2021-12-16 21:45:39 860

原创 7、自定义属性操作

7、自定义属性操作1. 获取属性值 <div id="demo" index="1" class="nav"></div> <script> var div = document.querySelector('div'); // 1. 获取元素的属性值 // (1) element.属性 console.log(div.id); // (2) element.getAttr

2021-12-16 21:44:33 454

原创 6、排他思想（算法）

6、排他思想（算法）如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：所有元素全部清除样式（干掉其他人）给当前元素设置样式（留下我自己）<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button>

2021-12-16 21:43:51 104

原创 5、操作元素

5、操作元素 JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）1. 改变元素内容（获取或设置）innerText改变元素内容 <button>显示当前系统时间</button> <div>某个时间</div> <p>123</p> <script>

2021-12-16 21:43:29 582

原创 4、事件基础

4、事件基础1. 事件概述JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解：触发— 响应机制网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。2. 事件三要素事件由三部分组成事件源事件类型事件处理程序，我们也称为事件三要素事件源（谁）：触发事件的元素事件类型（什么事件）：例如 click 点击事件事件处理程序（做啥）：事

2021-12-16 21:42:45 1099

原创 3、获取元素

3、获取元素1.根据ID获取语法：document.getElementById(id)作用：根据ID获取元素对象参数：id值，区分大小写的字符串返回值：元素对象或 null案例代码<body> <div id="time">2019-9-9</div> <script> // 因为文档页面从上往下加载，先有标签，所以script写到标签的下面 var timer = document.get

2021-12-15 19:24:48 835

原创 2、DOM 介绍

2、DOM 介绍1. 什么是DOM 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。2. DOM树 DOM树又称为文档树模型，把文档映射成树形结构，通过节点

2021-12-15 19:24:16 75

原创 1、Web APIs 简介

1、Web APIs 简介API 是为我们提供的一个帮助我们实现某种功能的接口Web APIs 是 Web APIs 是 W3C 组织的标准,是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )学习 Web API 可以结合学习内置对象方法的思路Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API

2021-12-15 19:23:37 149

原创 15、ES6语法

15、ES6语法学习目标能够说出使用let关键字声明变量的特点能够使用解构赋值从数组中提取值能够说出箭头函数拥有的特性能够使用剩余参数接收剩余的函数参数能够使用拓展运算符拆分数组能够说出模板字符串拥有的特性1.ES6相关概念1.1什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量

2021-12-15 19:15:57 105

原创 14、正则表达式

1.正则表达式概述1.1什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript

2021-12-15 19:13:45 365

原创 13、递归

13、递归1.什么是递归递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数注意：递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return。 // 递归函数 : 函数内部自己调用自己, 这个函数就是递归函数 var num = 1; function fn() { console.log('我要打印6句话

2021-12-15 19:11:17 44

原创 12、闭包

12、闭包1.变量的作用域复习变量根据作用域的不同分为两种：全局变量和局部变量。函数内部可以使用全局变量。函数外部不可以使用局部变量。当函数执行完毕，本作用域内的局部变量会销毁。2.什么是闭包闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是，一个作用域可以访问另外一个函数内部的局部变量。3.闭包的作用作用：延伸变量的作用范围。// 在 fn() 函数外面访问 fn() 中的局部变量 num function fn() { var num = 10

2021-12-15 19:10:36 76

原创 11、高阶函数

11、高阶函数高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。<script>function fn(callback){ callback&&callback();}fn(function(){alert('hi')}</script><script>function fn(){ return function() {}}fn();</script>此时fn 就是一个高阶函数函数

2021-12-15 19:09:54 204

原创 10、严格模式

10、严格模式1.什么是严格模式JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持，因为"use strict"加了引号，旧版本的浏览器会把它当作一行普通字符串而忽略严格模式对正常的 JavaScript 语义做了一些更改：消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为

2021-12-15 19:09:22 52

原创 9、this

1.函数内部的this指向this 指向是调用函数的时候确定的调用方式的不同决定了this 的指向不同一般指向调用者// 1. 普通函数 this指向window function fn() { console.log('普通函数的this' + this); } window.fn();// 2. 对象的方法 this指向对象 o var o = { sayHi: function(

2021-12-15 19:08:59 64

空空如也

空空如也