2019年11月25日
webpackES6语法转ES5语法
摘要： 安装babel-loader： npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 webpack.config.js配置： module: { rules: [ { test: /\.js$/, exclude: 阅读全文
posted @ 2019-11-25 15:11 leahtao 阅读(434) 评论(0) 推荐(0)
webpack 图片文件处理loader
摘要： 目录结构： 引用图片： body { /*background: red;*/ /*background: url("../img/test2.jpg"); 小图片*/ background: url("../img/test.jpg"); /*大图片*/ } 安装url-loader和file-l 阅读全文
posted @ 2019-11-25 14:34 leahtao 阅读(1172) 评论(0) 推荐(0)
2019年11月24日
webpack CSS处理loader
摘要： loader概念： 首先来介绍一下loader，之前我们用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将s 阅读全文
posted @ 2019-11-24 21:04 leahtao 阅读(291) 评论(0) 推荐(0)
webpack.config.js配置入口出口文件
摘要： 目录结构： 新建webpack.config.js配置文件 const path = require('path') //导出 path是node内置的包 通过npm init初始化得到package.json module.exports = { //导出入口和出口路径 entry: './src 阅读全文
posted @ 2019-11-24 16:19 leahtao 阅读(404) 评论(0) 推荐(0)
2019年11月23日
js 事件对象event
摘要： 在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。 <body> <a href="http://www.baidu.com">baidu</a> <div class="box"> 我是div 阅读全文
posted @ 2019-11-23 21:30 leahtao 阅读(190) 评论(0) 推荐(0)
js 事件流
摘要： 概念 简单来讲事件流就是页面接受事件的顺序，事件发生后会在元素节点之间按照某种顺序传播 document->html->body->div->body->html->document这是DOM2级规定的事件流顺序，如下图： <body> <div id="outer"> <div id="inner 阅读全文
posted @ 2019-11-23 21:25 leahtao 阅读(524) 评论(0) 推荐(0)
js DOM0级事件和DOM2级事件
摘要： 注册事件有两种方式，分别是DOM0级和DOM2级 DOM0级就是通过事件绑定的形式dom元素只能有(绑定)一个事件处理函数，他的特点是同一个元素绑定相同事件， 后面函数会覆盖前面的 绑定： dom.on+type = 事件处理函数 dom.onclick = function(){} 函数里面是要执 阅读全文
posted @ 2019-11-23 21:05 leahtao 阅读(1101) 评论(0) 推荐(1)
js dom操作总结
摘要： ES + DOM + BOM1 DOM 文档对象模型 Document object modeldom树 html | head body | | meta title div 2 事件 行为 三要素 事件类型(具体什么行为)、事件源（谁身上发生该行为）、事件处理 js程序如何处理事件 事件源.事件 阅读全文
posted @ 2019-11-23 18:50 leahtao 阅读(157) 评论(0) 推荐(0)
js append()和appendChild()和insertBefore()的区别
摘要： <body> <input type="button" value="删除" id="btn"> <script> // 在body添加div // 1 创建元素 var oDiv = document.createElement('div'); oDiv.className = 'box'; // 阅读全文
posted @ 2019-11-23 16:51 leahtao 阅读(6888) 评论(0) 推荐(0)
2019年11月22日
webpack打包工具简单案例
摘要： 目录结构： 入口文件：main.js 把项目所有的依赖文件都放进main.js //1.使用CommonJs的模块化规范 const {add, mul} = require('./mathUtil.js') console.log(add(20, 30)); console.log(mul(20, 阅读全文
posted @ 2019-11-22 17:42 leahtao 阅读(149) 评论(0) 推荐(0)