- 博客(161)
- 收藏
- 关注
RSS订阅原创 jQuery笔记 03：jQuery对象（属性操作和 CSS 操作）
属性操作什么是属性节点？<!-- 在编写html代码时，在标签中添加的属性就是属性节点 --><!-- 在浏览器中找到 span 这个 dom 元素之后看到的 attributes 属性中保存的所有内容，都是属性节点 --><span name="dudu"></span>如何操作属性节点？$(function () { var span = document.getElementsByTagName("span")[0]; // 设置属
2021-11-05 13:59:45
211
原创 jQuery笔记 02：jQuery对象（基本行为、选择器和工具方法）
初始 jQuery1. 什么是 jQuery？jQuery是一款优秀的JavaScript库jQuery最主要的用途是用来做查询，还能简化HTML文档遍历和操作、事件处理、动画以及Ajax2. 为什么要使用 jQuery？强大选择器: 方便快速查找DOM元素链式调用: 可以通过.不断调用jQuery对象的方法隐式遍历(迭代): 一次操作多个元素读写合一: 读数据/写数据使用是一个函数事件处理DOM操作(C增U改D删)样式操作动画丰富的插件支持浏览器兼容(前端开发者痛点)
2021-11-05 13:56:34
363
原创 jQuery笔记 01：核心函数
了解 jQuery1. 什么是 jQuery？jQuery是一款优秀的JavaScript库jQuery最主要的用途是用来做查询，还能简化HTML文档遍历和操作、事件处理、动画以及Ajax2. 为什么要使用 jQuery？强大选择器: 方便快速查找DOM元素链式调用: 可以通过.不断调用jQuery对象的方法隐式遍历(迭代): 一次操作多个元素读写合一: 读数据/写数据使用是一个函数事件处理DOM操作(C增U改D删)样式操作动画效果丰富的插件支持浏览器兼容(前端开发者痛点)
2021-11-05 13:52:42
287
原创 JS模块化 笔记
简介模块化的好处：避免命名冲突更好的分离，按需加载更高复用性高可维护性产生的问题：请求过多依赖模糊难以维护modular1. 全局function模式let msg = "feidu";function f1() { console.log("01-f1: " + msg);}<script src="./01.js"></script><script> f1(); // 01-f1: feidu // 数据可
2021-10-29 17:01:37
223
原创 ES6以上 笔记
ES7判断数组是否包含某个元素const chs = ["guyun", "feidu", "chengqian"];console.log(chs.includes("guyun")); // trueconsole.log(chs.includes("taoran")); // false指数操作符console.log(2 ** 10); // 1024ES8async 和 awaitasync 函数// 特殊的函数，返回值是Promise对象，结果由函数执行的返回值决定as
2021-10-28 14:19:44
179
转载 Vue：echarts 在数据改变后，折线图没有刷新
说明一张图表上多条折线，使用多选框来控制折线的显示问题选择操作后，使用谷歌浏览器的Vue调试发现图表组件的数据变化了，但是图表的折线没有变化解决https://www.cnblogs.com/keang001/p/10736445.htmlsetOption有3个属性，setOption(option,notMerge,lazyUpdate);第二个notMerge默认为false,即默认合并数据，设置成true之后就不合并数据，从而实现刷新页面UI的效果。...
2021-10-27 16:56:58
1487
原创 ES6 笔记
ES6let变量不能重复声明let name = "dudu";let name = "dudu"; // Identifier 'name' has already been declared块级作用域{ let age = 22;}console.log(age); // ReferenceError: age is not defined不存在变量提升console.log(address); // ReferenceError: Cannot access 'addre
2021-10-25 14:53:20
568
原创 MongoDB 笔记
简介MongoDB 是一种文档数据库为快速开发互联网Web应用而设计的数据库系统设计目标是极简、灵活、作为Web应用栈的一部分数据模型是面向文档的，所谓文档是一种类似于JSON的结构(BSON)三个概念数据库：一个仓库，可以存放集合集合：类似于数组，可以存放文档文档：文档数据库中的最小单位，存储与操作的内容数据库和集合都不需要手动创建，如果文档所在的集合或数据库不存在，会自动创建安装与使用安装在这里插入代码片配置环境变量cmd打开一个窗口：mongod --dbpath
2021-10-18 18:10:50
146
原创 AJAX笔记
原生AJAXAJAX 简介全称为Asynchronous JavaScript And XML，即异步的 JS 和 XML通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无需刷新即可获取数据AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式AJAX 的特点优点：① 可以无需刷新页面而与服务器端进行通信；② 允许根据用户事件来更新部分页面内容缺点：① 没有浏览历史，不能回退；② 存在跨域问题（同源）；③ SEO（搜索引擎优化）不友好HTTP 协议
2021-10-12 14:09:19
123
原创 Node.js 笔记
一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境采用Google开发的V8引擎运行js代码，使用事件驱动、非阻塞和异步I/O模型等技术来提高性能，可优化应用程序的传输量和规模。...
2021-10-11 09:47:36
201
原创 JavaWeb笔记 01：XML
XML 简介1. 什么是 xml ？xml是可扩展的标记性语言2. xml 的作用保存数据，而且这些数据具有自我描述性作为项目或者模块的配置文件作为网络传输数据的格式（现在以JSON为主）3. xml 语法
2021-09-27 16:17:55
115
原创 BootStrap笔记
使用在官网下载后，将css、font、js包下的内容粘贴的项目中在代码中引入<link rel="stylesheet" href="../css/bootstrap.min.css"><body></body><script src="../js/npm.js"></script><script src="../js/bootstrap.min.js"></script>容器流体容器<
2021-09-26 13:57:42
241
原创 HTML5笔记 05：一些API与效果
获取元素的大小（border-box）及其相对于视口的位置信息<div id="box1"></div><script> var box1 = document.getElementById('box1'); // DOMRect 对象 包含元素的大小（border-box）及其相对于视口的位置信息 // top/y: 8 // bottom: 8 // left/x: 8 // right: 1357 // w
2021-09-26 13:55:45
96
原创 HTML5笔记 04：其他标签与表单
状态标签1. meter<!-- 用来显示已知范围的标量值或者分数值，外观类似进度条 value：当前的数值 min：值域的最小边界值，默认为 0 max：值域的上限边界值，默认为 1 low：定义了低值区间的上限值 high：定义了高值区间的下限值 在二者之间进度条为绿色，剩下部分为黄色（火狐浏览器下） optimum：最佳取值--><meter id="meter" value="30" min="20" max
2021-09-02 13:51:19
129
原创 HTML5笔记 02：canvas
基本用法1. 什么是 canvas？<canvas>是HTML5新增的元素，可用于通过使用JS中的脚本来绘制图形可以用于绘制图形，创建动画<canvas>在使用时建议成对出现，默认高度为 300px，默认宽度为 150px...
2021-09-02 13:50:50
268
原创 HTML5笔记 01：简介
attribute 与 property1. 什么是 attribute？什么是 property？html标签的预定义属性和自定义树顶统称为 attribute；js 原生对象的直接属性是 property2. 什么是布尔值属性？什么是非布尔值属性对象的 property 是（非）布尔值类型的，称为（非）布尔值属性3. attribute 与 property 的同步关系非布尔值属性：实时同步布尔值属性： ① property 永远都不会同步 attribute； ② 在没动过 pr
2021-09-02 13:50:35
89
原创 HTML5：在JS中控制音频播放时报错——DOMException: play() failed because the user didn‘t interact with the document
说明在谷歌浏览器中打开，在JS中指定 src，鼠标移入 div 音频播放，移出时暂停页面<style> div { width: 100px; height: 100px; background: tomato; margin: 100px auto; }</style><div id="test"></div><audio></audio>
2021-08-26 11:25:02
3487
原创 HTML5 实例：刮刮卡（canvas）
<!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"> <title>刮刮
2021-08-24 11:19:39
441
原创 HTML5 实例：马赛克（canvas）
步骤：选取一个马赛克正方形从马赛克正方形中随机抽出一个像素点的信息将整个马赛克正方形中的像素点信息统一换成2中的信息<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
2021-08-23 16:13:37
428
原创 HTML5 实例：钟表（canvas）
<!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"> <title>Do
2021-08-20 15:14:39
168
原创 HTML5 实例：旋转同时放大缩小的方块（canvas）
使用 canvas 变换 + 定时器来实现<!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-08-20 10:08:36
620
原创 HTML5 实例：签名板（canvas）
使用 canvas 实现电子签名板，按下鼠标移动即可书写<!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-08-20 09:18:33
440
原创 JavaScript笔记 12：高级4（线程机制与事件机制）
进程与线程进程：程序的一次执行，它占有一片独有的内存空间可以通过windows任务管理器查看进程线程：是进程内的一个独立执行单元是程序执行的一个完整流程是CPU的最小的调度单元浏览器内核定时器引发的思考JS是单线程执行的浏览器的事件循环（轮询）模型H5 Web Workers（多线程）...
2021-08-03 15:26:49
154
转载 JavaScript笔记 11：高级3（面向对象高级）
对象创建模式方式一：Object构造函数模式套路：先创建空Object对象，再动态添加属性/方法适用场景：起始时不确定对象内部数据问题：语句太多var p = new Object();p.name = "dudu";p.age = 22;p.setName = function (name) { this.name = name;};方式二：对象字面量模式套路：使用 {} 创建对象，同时指定属性/方法适用场景：起始时对象内部数据是确定的问题：如果创建多个对象，有重复代
2021-07-29 16:45:25
100
原创 JavaScript笔记 09：高级1（基础总结）
数据类型1. 分类基本类型String：任意字符串Number：任意数字Boolean：true/falseUndefined：undefinedNull：null对象类型Object：任意对象Function：一种特别的对象（可以调用执行）Array：一种特别的对象（数值下标，内部数据是有序的）2. 判断typeof：可以判断undefinedinstanceof：判断对象的具体类型===：可以判断undefined...
2021-07-09 11:15:33
216
1
原创 JavaScript笔记 08：类的操作和JSON
类的操作通过style属性来修改元素的样式，每修改一个样式，浏览器就要重新渲染一次页面，性能比较差，且当修改的样式较多时不方便编写代码可以通过修改元素的class属性来间接的修改元素的样式，此时修改一次就可以同时修改多个样式，浏览器也只会渲染一次，性能较高，且这种方式可以将表现和行为分离开<button id="btn01">点击以后修改box的样式</button><br><br><div id="box" class="b1 b2"&g
2021-07-06 10:54:34
131
原创 JavaScript笔记 07：BOM对象
BOM指的是浏览器对象模型，它提供了一组对象，用来完成对浏览器的操作BOM对象在浏览器中都是作为window对象的属性保存的1. window代表整个浏览器的窗口，同时也是网页中的全局对象2. navigator代表当前浏览器的信息，通过该对象可以识别不同的浏览器window.onload = function () { var navigator = window.navigator; // 由于历史原因，navigator中的大部分属性都已经不能帮助识别浏览器了 console.
2021-07-05 13:37:03
132
原创 JavaScript笔记 05：DOM对象
DOM，全称Document Object Model文档对象模型文档：表示整个的HTML网页文档对象：表示将网页中的每一个部分都转换为了一个对象模型：使用模型来表示对象之间的关系节点Node：是构成网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点文档节点：整个HTML文档元素节点：HTML文档中的标签属性节点：元素的属性文本节点：标签中的文本内容节点的属性nodeNamenodeTypenodeValue文档节点#document.
2021-06-28 09:32:30
255
1
原创 JavaScript笔记 02：对象与方法
对象对象的分类内建对象由ES标准中定义的对象，在任何的ES的实现中都可以使用例如：Math String Number Boolean Function宿主对象由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象例如：BOM DOM console document自定义对象由开发人员自己创建的对象对象的基本操作// 创建一个对象var obj = new Object();console.log(typeof obj); // object//
2021-06-09 14:23:09
304
1
转载 HTML+CSS笔记 15：CSS 移动端
像素：屏幕是由一个个发光的小点构成，这一个个的小点就是像素分辨率：1920*1080 说的就是屏幕中小点的数量在前端开发中像素要分成两种情况讨论：物理像素：上述说的小点CSS像素：编写网页时，所用的像素都是CSS像素浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现一个CSS像素最终由几个物理像素显示由浏览器决定默认情况下在PC端，一个css像素 = 一个物理像素视口：屏幕中用来显示网页的区域叫做视口可以通过查看视口的大小，来观察css像素和物理像素的比值默认情
2021-05-28 13:19:05
157
原创 HTML+CSS笔记 14：CSS 弹性盒flex
弹性盒是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变两个概念弹性容器要使用弹性盒，必须先将一个元素设置为弹性容器通过display来设置弹性容器 display:flex display:inline-flex弹性元素弹性容器的子元素是弹性元素（弹性项）一个元素可以同时是弹性容器和弹性元素<ul> <li>1</li> <li>2&
2021-05-21 14:40:55
223
原创 HTML+CSS笔记 13：CSS LESS
less 简介less是一门css的预处理语言less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式在less中添加了许多的新特性，像对变量的支持、对mixin的支持…less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须先将less转换为css，再由浏览器执行CSS 的一些功能有些浏览器不支持html { --color: tomato; --length: 100px;}.box1
2021-05-20 15:47:55
178
转载 HTML+CSS笔记 12：CSS 动画
过渡通过过渡可以指定当一个属性发生变化时的切换方式<div class="box1"> <div class="box2"></div> <div class="box3"></div></div>.box1 { width: 800px; height: 800px; background-color: silver; overflow: hidden;}.box1 div { wi
2021-05-19 14:36:13
118
原创 HTML+CSS笔记 11：HTML 表单
表单用于将本地的数据提交给远程的服务器<!-- 使用 form 标签来创建一个表单 action 属性：表单要提交的服务器的地址--><form action="../html/page.html"> <!-- name 属性：要提交到服务器的数据必须指定的属性，表示参数的名字 --> 文本框：<input type="text" name="username"> <br><br>
2021-05-08 15:05:27
116
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人