MDR_0820-CSDN博客

原创 jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jQurey 的概念jqurey 是一个快速简洁的JavaScript库设计的总之能是写更少的代码做更多的事情j 就是JavaScript 、Qurey 查询意思就是查询js 把js 中的dom操作做了封装我们可以快速的查询使用里面的功能jQurey 封装了JavaScript常用的功能代码优化了dom 的操作事件处理动画设计和Ajax 交互jQurey 的入口函数 1 等着页面 DOM 加载完毕再去执行js代码 $(document).ready(functio

2021-11-02 13:36:59 476

原创 JavaScript：this指向问题、同步和异步、 JS执行机制、location对象

thisthis 的指向在函数定义的时候是确定不了的只有函数执行的时候才能确定this指向谁一般情况下 this 的最终指向的是那个调用它的对象.全部作用域或者普通作用函数中 this指向全局对象window （定时器里面的 this指向window）方法调用中谁调用this指向谁构造函数this指向构造函数<body> <button> 按钮</button> <script> // this 指向问题

2021-10-25 18:08:39 1064

原创 promise

promise 是异步编程的一种解决方案Promise对象表示异步操作的最终完成（或失败）及其结果值promise 三种状态pending：等待状态，比如正在进行网路请求或者定时器没有到时间fulfill ：满足状态当我们主动回调了 resolve时就处于该状态并且会回调 .then（）reject：拒绝状态当我们主动回调reject时就处于该状态并且会回调.catch（）<!DOCTYPE html><html lang="en"><

2021-11-23 13:55:59 481

原创认识 vue -router

目前前端流行的三大框架都有自己的路由实现Angular的ngRouterReact 的reactRouterVue的vue-routervue -router 是Vue.js 官方的路由插件它和vue.js 是深度集成的适用于构建单页面应用官网：https://router.vuejs.org/zh/vue-router 是基于路由和组件的路由用于设定访问路径将路径和组件映射起来在vue-router的单页面应用中页面的路径改变就是组件的切换安装和使用 vue-rou

2021-11-19 20:03:54 1485

原创 Vue注册组件语法糖、事件修饰符，组建模块的抽离两种写法、父子组件通信

Vue注册组件语法糖<!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"> <

2021-11-15 15:04:21 225

原创 vue 购物车案例

html<body> <div id="app"> <div v-if="books.length"> <table> <tr> <th> 序列 </th> <th> 名称 </th> <th

2021-11-13 18:59:20 272

原创正则表达式、工具

正则表达式正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象正则表达式通常被用来检索、替换那些符合某个模式（规则的文本）例如：表单验证用户名表单只能输入英文字母数字或者下划线昵称输入框可以输入中文（匹配）此外正则表达式还常用于过滤掉页面中的一些敏感词（替换）从字符串中获取我们想要的特定部分（提取）等正则表达式的特点灵活性逻辑性和功能性都非常强可以迅速地极简单的方式达到字符串的复杂控制对于刚接触的人来说比较

2021-11-10 19:53:06 783

原创闭包、递归

变量作用域变量根据作用域的不同分为两种：全局变量和局部变量1 函数内部可以使用全局变量2 函数外部不可以使用局部变量3 当函数执行完毕本作用域的局部变量会销毁什么是闭包闭包（closure）指有权访问另一个函数作用域中变量的函数简单理解就是一个作用域可以访问另外一个函数内部的局部变量<script>// 闭包：fun 这个函数作用域访问了另外一个函数 fn里面的局部变量num// 闭包的主要作用延伸了变量的作用范围 function

2021-11-10 14:30:30 809

原创函数进阶、函数的调用方式、函数内部的this指向、改变函数内部的this指向

创建函数的三种方式<script> // 函数的定义方式 // 1.自定义函数命名函数 function fn() { } // 2.函数表达式匿名函数 var fun = function () { } // 3.利用 new Function('参数1','参数2','函数体') var f = new Function('a', 'b', 'console.log(a+b

2021-11-09 17:25:54 306

原创 es5新增方法

数组方法字符串方法对象方法数组方法迭代（遍历）方法：forEac（）、map（）、filter（）、some（）、every（）forEach（）<script> // forEach 迭代遍历数组 var arr = [1, 2, 3, 4, 5] var sum = 0 arr.forEach(function (value, index, array) { console.log.

2021-11-09 12:00:37 74

原创构造函数原型对象

构造函数JavaScript 的构造函数中可以添加一些成员可以在构造函数上本身添加也可以在构造函数内部的this上添加通过这两种方式添加成员就分别称为静态成员和实例成员静态成员：在构造函数身上添加的成员称为静态成员只能由构造函数本身访问实例成员：在构造函数内部创建的对象成员称为实例成员只能由实例化的对象来访问原型对象构造函数的方法很好用但是存在浪费内存的问题 <script> function Star(uname, age) {

2021-11-08 19:57:28 522

原创 let 、const 、var 的区别、结构赋值 ES6 箭头函数、Array 的扩展方法、模板字符串、repeat方法、Set 数据结构

箭头函数箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。箭头函数 this 是静态的始终指向函数声明所在作用域下的this的值 <script> let fn = (a, b) => { return a + b } let aa = fn(1, 2)

2021-11-06 12:27:32 152

原创面向对象、ES6 类class、类里面this指向问题

面向对象编程 OOP（Object Oriented Programming）面向对象是吧事物分解成一个个对象然后有对象之间分工合作面向对象是以对象功能来划分问题而不是步骤在面向对象程序开发思想中每一个对象都是功能中心具有明分工面向对象编程具有灵活代码可复用容易维护和开发的优点更适合多人合作的大型软件项目面向对象的特性封装性继承性多态性面向过程和面向对象的对比面向过程优点：性能比面向对象高适合跟硬件联系很紧密的东西缺点：没有面向对象易维护易扩展

2021-11-05 16:27:58 369

原创 css 边框图片

为了实现丰富多彩的边框效果在css3中新增了border-image 属性这个新属性允许指定一幅图像作为元素的边框边框语法：

2021-11-03 19:29:48 103

原创 flexible.js

(function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // adjust body font size function setBodyFontSize() { if (document.body) { document.body.style.fontSiz

2021-11-03 16:55:09 76

原创 JavaScript 数据可视化 + 常见的数据可视化库

数据可视化数据可视化的主要目的：借助于图形化手段清晰有效的传达与沟通信息数据可视化可以把数字转换为图形揭示蕴含在数据中的规律和道理数据可视化的使用场景常见的数据可视化库D3.js 目前web端评价最高的JavaScript可视化工具库（入手难）ECharts.js 百度出品的一个开源JavaScript数据可视化库Highcharts.js 国外的前端数据可视化库Antv 蚂蚁金服全新一代数据可视化解决方案等等<style> .box{

2021-11-03 16:27:52 542

原创 JavaScript本地存储

本地存储特性数据存储在用户浏览器中设置读取方便甚至页面刷新不丢失数据容量较大、sessionStorage 约5M localStorage 约20M只能存储字符串可以将对象JSON.stringify()编码后储存window.sessionStorage生命周期为关闭窗口在同一个窗口（页面）下数据可以共享以键值对的形式存储使用sessionStorage.setlitem( key,value) 键，值sessionStorage.getItem(‘key’) 获取数

2021-10-29 22:07:25 84

原创 JavaScript 插件轮播图插件、框架

插件使用确认插件实现的功能官网查看说明下载插件打开demo实力文件查看需要引入的相关文件并且引入复制demo实例文件中的结果HTML 样式css 及JS代码轮播图插件 https://www.swiper.com.cn/使用方法https://www.swiper.com.cn/usage/index.html其他移动端常见插件superslide：http://www.superslide2.com/...

2021-10-29 17:00:55 134

原创 classList属性 H5新增

class Listclass List 是H5 新增的一个属性返回元素的类名但 ie 10以上版本才支持该属性在元素中添加、移除、及切换css类添加类element.class List（’类名‘）dy> <div class="one tow"></div> <script> var div = document.querySelector('div') // console.log(d

2021-10-29 12:49:20 118

原创 javascript 移动端触屏事件touch

触屏事件 touchtouch 对象代表一个触摸点触摸事件可响应用户手指或触控笔对屏幕或触控板操作常见触屏事件script> var div = document.querySelector('div') div.addEventListener('touchstart',function(){ console.log('touchstar 触摸事件'); }) div.addEventList

2021-10-28 20:16:52 183

原创 JavaScript动画原理

动画原理<style> div{ position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color:skyblue; } </style></head><body>

2021-10-26 21:06:07 77

原创 JavaScript：元素偏移量offset、元素可视区 client、立即执行函数、scroll滚动距离、mouse enter和mouse over的区别

offsetoffset 翻译就是偏移量我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）大小等常用属性代码展示// CSS .father{ width: 200px; height: 200px; margin: 200px;; background-color: skyblue; } .son{ width: 100

2021-10-26 13:52:56 178

原创 JavaScript:navigator对象、history 对象

navigator对象navigator对象包含有关浏览器的信息他有很多属性我们最长常用的是userAgent 该属性该属性可以返回由客户机发送服务器的 user-agent 头部的值下面前端代码可以判断用户那个终端打开页面实现跳转history 对象window 对象给我们提供了一个history对象与浏览器历史记录进行交互该对象包含用户（在浏览器窗口中) 访问的URL （地址）...

2021-10-26 10:27:42 66

原创 JavaScript BOM概述、window常见事件、定时器、案例

BOMBOM 即浏览器对象模型它提供了独立于内容而与浏览器窗口进行交互的对象其核心对象是 windowBOM 是由一些列相关的对象构成并且每个对象都提供了很多方法与属性BOM 缺乏标准 JavaScript 语法标准组织是ECMA ，DOM的标准组织是W3C，BOM 最初是Netscape 浏览器标准的一部分DOM文档对象模型DOM 就是把文档当做一个对象来看待DOM的顶级对象是documentDOM主要学习的是操作元素页面DOM 是W3C标准规范BOM浏览器对

2021-10-25 16:10:18 132

原创 JavaScript 鼠标事件、图片跟随鼠标移动。键盘事件

鼠标事件对象event 对象代表事件的状态跟事件相关的一系列信息的集合现阶段我们主要是用鼠标事件对象 mouseEvent 和键盘事件对象KeyboardEvent图片跟随鼠标移动<body> <img src="images/h_h.jpg" alt="">  <script> var pic = docum

2021-10-24 21:01:57 423

原创 JavaScript DOM事件流、事件对象

DOM 事件流事件流描述的的是页面中接收事件的顺序事件发生时会在元素节点之间按照特定的顺序传播这个传播过程就是 DOM事件流DOM 事件流分为三个阶段1.捕获阶段2.当前目标阶段3 .冒泡阶段比如给div 注册点击事件事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程注意js 代码中只能执行捕获或者冒泡其中的一个阶段oncli

2021-10-24 17:40:38 104

原创 JavaScript 关于DOM操作小结创建、增、删、改、查、属性操作、事件操作

js组成 web API、DOM、获取元素的五种方法详情请点击：点击跳转关于dom操作主要针对元素的操作主要创建增、删、改、查、属性操作、事件操作创建详情请跳转：点击跳转docunment.write( )innerHTMLcreateElement创建节点补充：三种创建元素区别document.writeelement.innerHTMLdocument.createElement区别document.write（）是指直接将内容写入页面中的内容流但是文

2021-10-24 10:09:45 3013

原创 javascript 注册事件、删除事件

注册事件概述给元素添加事件称为注册事件或绑定事件注册事件有两种方式：传统方式和方法监听注册方式传统注册方式利用 on 开头的事件比如on开通的鼠标事件代码<button>123</button> <button>456</button> <script> var buts = document.querySelectorAll('button') // 注册事件点击事

2021-10-23 23:07:41 662

原创 JavaScript 节点概述、父节点 parentNode、子节点children、兄弟节点、创建节点添加节点、删除节点、复制拷贝节点 ★案例★

一般节点至少拥有nodeType(节点类型）.nodeName(节点名称）和nodeValue(节点值）这三个基本属性元素节点 nodeType 为 1属性节点 nodeType 为 2文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）开发中节点操作主要操作的是元素节点父节点 parentNode获得里元素最近的父级节点<body> <div class="nav"> <div class="jiedian"&gt

2021-10-22 17:58:05 1757

原创 JavaScript 排他思想、自定义属性操作

排他思想如果有同一组元素想要某一个元素实现某种样式需要用到循环的排他思想算法所有元素全部清除样式给当前元素设置样式首先先排除其他然后设置自己的样式<body> <button>一篇诗</button> <button>一壶酒</button> <button>一曲长歌</button> <button>一剑天涯</butto

2021-10-21 17:53:07 154

原创 JavaScript 简单事件，innerText、.inner HTML、常用的元素属性操、练习案例和小结

简单事件JavaScript 使我们有能力创建动态页面而事件是可以被JavaScript侦测到的行为网页中每个元素都可以产生某些可以触发JavaScript的事件简单说就是：触发…响应机制事件是由三部分组成：事件源、事件类型、事件处理程序，也称为事件三要素事件源：事件被触发的对象事件类型：怎样被触发，鼠标点击？还是鼠标经过？还是键盘按下？事件处理程序：通过一个函数赋值的方式完成鼠标事件<body> <button id="but"> 按钮 &l

2021-10-20 20:44:30 522

原创 JavaScript、js组成 web API、DOM、获取元素的五种方法

js组成 web API、DOM、获取元素、ID 获取元素、标签名获取、HTML5新增获取、quertSelector、document.querySelectorAll、获取特殊元素（body、HTML）JS 的组成APIAPI 应用程序编程接口是一些预先定义的函数目的是提供应用程序与开发人员基于某软件或硬件得以访问一组编程的能力而又无需访问源码或理解内部工作机制的细节简单理解： API 是给程序员提供一种工具以便更轻松的实现想要完成的功能Web APIWeb API 是浏览

2021-10-20 13:31:40 251

原创 JavaScript 根据位置返回字符、charAt、charCodeAt,ASCII表

charAt（index）返回指定位置的字符（index 字符串索引号）语法str.charAt（0） var arr ='skyblue' //遍历所有字符 for(var i =0; i <arr.length;i++){ console.log(arr.charAt(i)); }charCodeAtcharCodeAt（index） index索引号获取指定位置处字符

2021-10-19 19:07:41 218

原创 JavaScript 基本包装类型、查找数组中某一字符出现的位置和次数

基本包装类型为了方便操作基本数据类型 JavaScript 还提供了三个特殊的引用类型：StringNumberBoolean基本包装类型就是把简单的数据类型包装成复杂数据类型这样基本数据就有了属性和方法代码演示 <script> // 基本包装类型 var str = 'sky' console.log(str.length); // 输出的是 3 // 简单数据类型包装成复杂数据类型相当于执行了三步

2021-10-19 18:24:39 172

原创 JavaScript 连接数组concat、数组截取slice、数组删除splice 和添加

concatconcat（）连接两个或多个数组不影响原数组返回一个新数组concat方法创建一个新的数组，它由被调用的对象中的元素组成，每个参数的顺序依次是该参数的元素（如果参数是数组）或参数本身（如果参数不是数组）。它不会递归到嵌套数组参数中。注意：数组/值在连接时保持不变。此外，对于新数组的任何操作（仅当元素不是对象引用时）都不会对原始数组产生影响，反之亦然。 // concat（）连接两个或多个数组不影响原数组返回一个新数组 var arr2 = [1,2,

2021-10-19 17:29:08 203

原创 JavaScript 返回数组索引号方法、数组去重、数组转换字符串的两种方法

数组索引方法indexOf（）indexOf 作用就是返回该数组元素的索引号从0开始查找它只返回第一个满足条件的索引号如果找不到该数组里面的元素则返回的是 -1 // indexOf 返回索引号 var arr=['一','二','三','四','五','六','五'] // 两个相同的元素只返回第一个符合条件的索引号 console.log(arr.indexOf('五')); // 4 返回的索引号 console.log(arr

2021-10-19 16:26:47 1859

原创 JavaScript 数组对象、检查是否为数组、添加删除数组元素的方法 push...和数组排序

数组对象的创建创建数组的两种方式字面量方式new Array()<title>Document</title> <script> // 字面量创建数组 var arr = [ 1,2,3,5] console.log(arr[0]); // new Array 创建数组 var arr1 = new Array(1,2,3); //表示有3个数组是 1，2，3

2021-10-19 14:53:18 369

原创 JavaScript 内置对象、math、绝对值和三个取整的方法、Date 日期、MDN查阅文档网站

内置对象JavaScript 中对象分为3中：自定义对象、内置对象、浏览器对象前面两种对象是JS基础内容属于ECMAScript 第三个浏览器对象属于我们jS独有的内置对象是指 JS 语言自带的一些对象这些对象供开发者使用并提供了一切常用的或是基本而必要的功能（属性和方法）内置对象的优点帮助我们快速开发JavaScript提供了对少个内置对象：math，date，Array,String 等mathmath 数学对象不是一个构造器所以不需要用new来调用可以直接使用里面

2021-10-18 19:25:53 334

原创 JavaScript 对象、创建对象、构造函数创建对象、对象调用、遍历对象

对象在JavaScript 中对象是一组无序的相关属性方法的集合所有的事物都是对象如：字符串、数值、数组、函数等对象由属性和方法组成属性：事物的特征在对象中用属性来表示常用名词方法：事物的行为在对象中用方法表示常用动词创建对象的三种方式利用字面量创建对象利用 new object 创建对象利用构造函数创建对象利用字面量创建对象对象字面量：就是花括号{ } 里面包含了表达这个具体事务（对象）的属性和方法*（）里面采取键值对的形式表示

2021-10-17 17:35:55 256

原创 JavaScript 预解析、代码执行

预解析JavaScript代代码是由浏览器中的JavaScript解析器来执行的 JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行js引擎运行js分为两步：1.预解析、2.代码执行预解析：js引擎会把js里面所有的var 还有function 提升到当前作用域的最前面代码执行：按照代码书写的顺序从上往下执行预解析分为变量预解析（变量提升）和函数预解析（函数提升变量提升：就是把所有的变量声明提升到当前作用域最前面不提升赋值操作函数提升：就

2021-10-17 16:03:23 75

空空如也

空空如也