拖动图片改变位置
案例描述 点击图片可以复制图片 鼠标移动过程中，会有图片跟随 再次点击图片，图片固定位置。 在线展示：https://antmoe.gitee.io/project/2020/04/14/index.html 实现过程 通过过程我们可以分析出，需要三个事件进行绑定即 点击事件 点击后创建（复制）一个新的图片 鼠标跟随 图片跟随鼠标移动而移动 停止 即鼠标再次点击图片固定在当前位置。 代码实现 首先式 html 结构，这个非常简单，无非是一张图片在变动下位置即可。 1234567891011121314151617181920212223242526<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" / ...
10Node对象
判断节点类型 节点类型 nodeName nodeType nodeValue Document文档节点 #document 9 null Element元素节点 元素节点的元素名 1 null Attr属性节点 属性节点的属性名 2 属性节点的属性值 Text文本节点 #text 3 文本节点的内容 获取父节点 获取父节点包括两个分别为 获取父节点：parenNode 获取指定节点的父节点，其父节点不一定是元素节点。 获取父节点元素：parentElement 获取指定节点的父元素节点，其父节点必须是元素节点。 通常情况下parentNode ≈ parentElement，但是特殊情况是<html>元素的父节点是document对象 获取子节点 firstChild 获取指定节点的第一个子节点 lastChild 获取指定节点的最后一个子节点 childNodes 获取所有的子节点，返回一个NodeList集合，但此集合为动态集合 12345var childNodes = parentElement.chi ...
09Document对象
什么是Document对象 document对象在DOM中代表了HTML页面 document也是DOM解析HTML页面的入口。 定位页面元素 定位页面元素常用的方法： 方法名 参数传入 作用 返回类型 示例 getElementById() ID名 通过页面元素的id属性值定位元素 单个节点，既是Node也是Element类型 getElementById('p1') getElementsByName() name 通过页面元素的name属性值定位元素 NodeList getElementsByName("pElement") getElementsByClassName() class 通过页面元素的class属性定位元素 HTMLCollection getElementsByClassName("pElements") getElementsByTagName() 元素名 通过元素的元素名定位元素 HTMLCollection getElementsByTagName("p" ...
08DOM相关概念叙述
何处使用script标签 <head>标签里 需要注意的是：浏览器是自上到下解析的。因此，如果涉及到包含获取页面元素的内容, 导致失败。解决方案如下： 123456<script> // 表示HTML页面加载完毕后, 做什么 window.onload = function () { // 所有的javascript代码编写在这里 }</script> 写在<body>元素的最下方 1234<body> <!-- 将<script>元素放置在相关HTML元素的后面, 或者<body>元素内的最后 --> <script></script></body> 什么是DOM DOM是个缩写，全称是 Document Object Model，被译为文档对象模型。 D表示Document，就是DOM将HTML页面解析为一个文档。同时提供了document对象。 O表示Object，就是DOM将HTML页面 ...
从零开始搭建Hexo博客
从零开始搭建Hexo博客
git常用命令总结
Git常用命令 代码仓库 创建仓库 进入需要创建代码库的文件夹 cd 文件路径 创建/初始化仓库 git init 拉取远程仓库到本地(建议使用) git clone 添加文件到仓库 添加文件到暂存区 添加单个文件 git add 文件名 添加所有文件 git add . 添加的过程中需注意以下两点： .gitignore中指定的文件会被忽略 空目录不会添加 提交到本地仓库 git commit 填写commit message并保存 不建议使用git commit -m "commit message"，建议提交遵循commit message规范 查看工作区状态 git status 对比工作区文件变化 git diff 建议将beyond compare配置为diff工具，用于diff以及merge冲突。 仓库配置 配置全局用户名和邮箱 个人开发机配置： git config --global user.name "[name]" 比如：git config --glob ...
07JavaScript引用类型
引用类型 在JavaScript中，变量是某个对象的属性，函数是某个对象的方法 在浏览器环境里面，定义的全局变量就是window对象的属性 引用类型的分类 引用类型 描述 Date 类型 获取和设置当前日期时间 Math 类型 用于数学计算 Global 类型 全局对象，提供全局属性和全局方法 Array 类型 用于有序的存储多个值 RegExp 类型 用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具 Error 类型 用于匹配代码错误并提供对应提示内容 Function 类型 用于定义 JavaScript 中的函数 Object 类型 用于定义 JavaScript 中的对象 Date类型 创建一个Date类型的对象 123var date1 = new Date()var date2 = new Datevar date3 = Date() Date提供now()方法，可以得到一个从 1970 年1月1日 00:00:00 至当前系统时间的毫秒数值。 Date类型初始化时间也可以指定日期，语法 1var dat ...
06JavaScript作用域与对象
变量作用域 12345678910// 声明全局变量 - 全局作用域var msg = 100;// 声明局部变量 - 某个函数作用域function fn() { // 局部变量 - 只能在当前函数作用域中访问 var msg2 = 200; console.log(msg2,msg);}fn()console.log(msg) 变量提升 1234// 先调用后声明console.log(msg); //打印undefinedvar msg = 100;console.log(msg); //打印100 以上代码会先输出undefined然后输出100 。约等于以下写法 1234var msg;console.log(msg);msg=100;console.log(msg); 所以变量提升也就是变量的声明被提升了 即使我们在定义这个函数之前调用它，函数仍然可以工作。这是因为在 JavaScript 中执行上下文的工作方式造成的。 JavaScript 仅提升声明，而不提升初始化。如果你先使用的变量，再声明并初始化它，变量的值将是 undefined。变 ...
05JavaScript函数
函数声明 12345678// 函数声明方式function name() { // code}// 函数表达方式var name = function () { // code}; 函数与变量同名时的问题 使用函数声明方式时 变量会覆盖函数，与顺序无关 12345678var fn = "message";function fn() { return 100;}console.log(fn); //输出messagefn();//报错 TypeError: fn is not a function 使用函数表达式方式时 函数会覆盖变量（变量先声明，函数后声明），与顺序有关。 简单来说就是变量的重复声明 1234567var fn = "message";var fn = function () { return 100;};console.log(fn); //输出 [Function: fn] 所以我们的得出结论： 函数的声明方式和函数的 ...
