- 博客(152)
- 收藏
- 关注
RSS订阅原创 dom11克隆replaceChild
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{width: 300px;height: 300px;background-color: pink} #div2{width: 300px;he
2017-11-21 11:41:42
275
原创 dom11克隆removeChild
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="点击删除" id = "btn"> <ul id="ul" > <li>1</li>
2017-11-21 11:01:18
200
原创 10创建元素
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" id = "btn" name = "" value = "点击添加"> <ul id = "ul"> </ul>
2017-11-20 23:05:20
187
原创 9元素宽高的获取
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{width: 200px;height: 200px;background-color: pink;border:10px solid #00BFFF; pad
2017-11-20 20:45:00
246
原创 8属性操作
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="div1"></div> <script> var div1 = document.getElementById('div1');
2017-11-19 21:09:33
190
原创 5offsetLeft,offsetParent,getBoundingClientRect
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div{padding:100px;} #div1{background-color: #FFF5EE;position:relative;}
2017-11-19 19:55:25
215
原创 4-节点例子nextprevious
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul{width: 300px;} ul li{height: 30px;background-color: #eee;color:#666;font-we
2017-11-18 21:29:44
234
原创 文章标题
前言: create-react-app 是一个全局的命令行工具用来创建一个新的项目 react-scripts 是一个生成的项目所需要的开发依赖 一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖，再写webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码。现在 如果你正在搭建react运行环境，使用 cr
2017-11-14 13:52:47
209
原创 3nextElementSibling
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #ul li{ width: 150px; height: 50px; background: pi
2017-11-13 12:41:18
354
原创 3parentNode小例子
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #ul li{ width: 150px; height: 50px; background: pi
2017-11-13 12:05:03
236
原创 3父节点和兄弟节点
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #ul li{ width: 150px; height: 50px; background: bl
2017-11-13 11:39:06
410
原创 2节点类型
>document:9>3文本节点: 数字,文本,换行.>8注释节点>2属性节点 div.attributes[0] nodeValue 查看 节点的属性值 nodeName查看属性名 1元素节点 childNodes:获取某个节点下的子节点children:找到某个元素下面的所有元素子节点 <!doctype html><html
2017-11-12 22:05:42
352
原创 DOM
Javascript由三部分组成,ECMAscript(javascript核心标准,也是一个解析器,是一个规范)DOM (通过document提供的一些属性或者方法来操作页面,帮助我们去操作页面的结构,添加删除某个标签,document提供了一些接口,赋予开发者操作页面的能力)BOM (通过window提供的一些属性和方法来操作浏览器,更加方便的区操作浏览器,拉到底部,有数据加载)<!do
2017-11-12 20:17:50
161
原创 npm
where <command> is one of: access, adduser, bin, bugs, c, cache, completion, config, ddp, dedupe, deprecate, dist-tag, docs, doctor, edit, explore, get, help, help-search, i, init, install,
2017-11-09 17:19:00
248
原创 5.2webpack的热加载配置
cnpm install -g webpack cnpm install -g webpack-dev-server cnpm install webpack-dev-server --savecnpm install --save babel-loader ——bundle.jscnpm install --save babel-core ——bundle.js
2017-11-04 19:57:55
591
原创 git clone 时显示Filename too long的解决办法
在git bash中，运行下列命令： git config –global core.longpaths true 就可以解决该问题。 –global是该参数的使用范围，如果只想对本版本库设置该参数，只要在上述命令中去掉–global即可。
2017-11-04 12:30:12
317
原创 5React 环境配置与调试技巧1使用npm配置
npm initnpm install –save react react-dom babelify babel-preset-react babel-preset-es2015 –save把文件保存到配置文件里面去.
2017-11-04 12:25:11
347
原创 4nodejs 的简介与安装
npm node -v npm -v nodejs 配置国内源 安装淘宝 镜像 npm : npm install -g cnpm –registry.npm.taobao.org 之后直接使用cnpm 即可.课程的源码,思维导图: 慕课网的手记:imooc.com/article/17442
2017-11-03 20:06:25
419
原创 3react初体验-2 react starter pack
独立安装的形式(可以下载新手包体验)npm 包管理安装的形式(课程实战使用的方式,也是官方推荐的方式 )
2017-11-03 19:39:19
220
原创 3react初体验-1版本的选择
查看历史版本:查看历史版本不同版本的js cdn : https://cdnjs.com/libraries/react/Github Commits :https://github.com/facebook/react/commits/master当前课程的版本号L15.3.2
2017-11-03 19:32:28
263
原创 react 画廊 webpack1
在上一章呢,我们通过yeoman ,react ,webpack ,generator,正式开始搭建了我们的项目基本结构,也跟大家一起过了一遍自动生成的相关文件,但其中最能体现现代web组件化开发思路的基础框架webpack 我们却没来得及聊,这一劫,我们就来深入了解一下,webpack . 上一节呢,我也提到了,gulp ,Browserify grunt 均受到了webpack 的威胁,那
2017-11-02 18:16:04
282
原创 01react 打造画廊应用 项目生成
在上一章呢,我们已经介绍了react 编写基本的三大件,html,css,js的写法, 我们都知道现代app都有一个很著名的脚手架工具Yeoman ,在web的立项阶段,使用Yeoman来生成项目所需的文件的代码结构,Yeoman自动将最佳 实践和工具整合进来,大大加速和方便了我们的后续开发,Yeoman本身基于Node.js 构建, 在本地已经安装Node.js的环境的时候,运行
2017-11-01 20:52:07
677
原创 03组件的生命周期和事件处理
这一劫,聊一聊,React Compodnents 从创建到消失,的生命周期,状态和属性在生命周期中是如何流转的. 首先我们来了解一下,react components 在浏览器中 存在的生命周期的三个状态, 第一个状态我们称之为,Mounted: 指的是一个react components 被解析生成对应的dom 节点,并被插入浏览器的dom 结构的这么一个过程,当我们从浏览器上看到从无到
2017-10-30 22:09:50
301
原创 02React的JSX 与Style
一门新技术的出来,最直接的学习方式就是,学习官网,然后加以延展,最后融会贯通.他的官网地址就是,react官网 点击getstarted.HTML部分<script src="https://facrbook.github.io/react/js/jsfiddle/integation.sj"></script><div id = "container"> <!-- this e
2017-10-29 22:17:27
508
原创 react基础01
react 不是一个完整的mvc,mvvm框架,其只负责view层面React跟Web Components 不冲突React就是轻虚拟dom 是其原理组件化的开发思路####应用场景复杂场景下的高性能重用组件库懒
2017-10-28 10:06:09
258
原创 react 大众01
windows用户注意: 要修改"./package.json"文件. "rm -rf ./build" 改为 "rd/s/q build" 如果运行报错,手动创建一个"build" 的文件夹
2017-10-28 09:43:16
356
原创 react官网01Installation
Installation 安装*React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrit
2017-10-22 00:19:19
351
原创 React01
React.js 入门与实战 开发 适配PC端和移动端的 新闻头条平台*1-1课程简介 —solidadcreact.js简介部分1.对js,ECMAScript5,ECMAScript6,css,HTML5,以及node.js 开发环境热加载组件webpack的简介安装与配置.2.前端开发工具ANT以及相关的插件的详细介绍.React.js基础知识的学习1.React.js组件基础2.React.
2017-10-21 22:01:53
224
原创 4.移动端的事件冒泡与捕获
冒泡 : 点击一个元素 按照 DOM 节点 把这个事件一直向上传递下去 从下向上传递下去捕获 : 点击一个元素 按照 DOM 节点 把这个事件一直向下传递下去 从上向下传递下去
2017-10-14 19:30:32
1964
原创 3.移动端事件监听addEventListener
addEventListeneradEventListener(“函数名”,有名函数或者匿名函数,冒泡或者捕获) 1.不会存在前后覆盖问题 2.在chrome浏览器下,可以一直识别
2017-10-14 19:03:23
3657
原创 2.移动端基础事件---touch事件
viewport设置<meta name="viewport" content="width=device-width,user-scalable=no" charset="UTF-8">背景颜色由粉色变成蓝色touch事件,在chrome的模拟器下,部分版本 通过on 的方式来添加事件无效.<style> #box{ width: 100px;
2017-10-13 21:21:29
307
原创 1.移动端事件大纲
基础事件1.touchstart 2.touchend 3.touchmoveEvent对象1.取消默认事件 2.阻止冒泡 3.防止文字选中和阻止默认菜单 4.鼠标事件延迟 5.事件点透问题touchEvent1.touches 2.changedTouches 3.targetTouches滑屏处理1.拖拽原理分析 2.滑屏幻灯片简版transform2D变换1.rotate()
2017-10-13 19:51:54
217
原创 05jQuery源码解析
location = window.location,document = window.document,docElem = document.documentElement,存成变量有利于压缩操作_jQuery = window.jQuery_$ = window.$防冲突的设计:其他的库中可能也有$面向对象function Obj(){}Obj.prototype.ini
2017-10-02 13:25:59
488
原创 04jQuery源码解析
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><script> (function(window){ })(window); //传参window:1查找速度变快 2在压缩的时候很有用 //undefined在IE789的浏览器下是
2017-10-02 12:47:11
348
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人