content.json

[{"title":"javascript中this理解","date":"2018-07-26T09:30:27.651Z","path":"2018/07/26/javascript中this理解/","text":"js中this关键字的使用方法总结 开头先理解两句话1. this设计的目的就是在函数体的内部,指代函数当前的运行环境 2. Javascript 是一个文本作用域的语言, 就是说, 一个变量的作用域, 在写这个变量的时候确定. this 关键字是为了在 JS 中加入动态作用域而做的努力. 所谓动态作用域, 就是说变量的作用范围, 是根据函数调用的位置而定的. 从这个角度来理解 this, 就简单的多. this 是 JS 中的动态作用域机制, 具体来说有四种, 优先级有低到高分别如下: 2.1. 默认的 this 绑定, 就是说在一个函数中使用了 this, 但是没有为 this 绑定对象. 这种情况下, 非严格默认, this 就是全局变量 Node 环境中的 global, 浏览器环境中的 window. 2.2. 隐式绑定: 使用 obj.foo() 这样的语法来调用函数的时候, 函数 foo 中的 this 绑定到 obj 对象 2.3. 显示绑定: foo.call(obj, ...), foo.apply(obj,[...]), foo.bind(obj,...) 2.4. 构造绑定: new foo() , 这种情况, 无论 foo 是否做了绑定, 都要创建一个新的对象, 然后 foo 中的 this 引用这个对象. 四中类别1 默认绑定 (此时没有为函数明确的绑定对象,则默认绑定到全局对象中)12345678function foo(){ console.log(this); // Window console.log(this === window); // true}foo();[^_^]:上面代码中,foo函数在运行时没有明确绑定对象,所因为this是指向window 1234567891011var color = 'yellow';function foo(){ var color = 'red'; console.log(this); // Window console.log(this === window); // true console.log(this.color); // yellow}foo();[^_^]:上面代码中,foo函数在运行时没有明确绑定对象,因为this是指向window的,所以this.color的值是全局的color 123456789101112131415var color = 'yellow';function foo(){ function bar(){ var color = 'red'; console.log(this); // Window console.log(this === window); // true console.log(this.color); // yellow } bar();}foo();[^_^]:上面代码中,bar函数在运行时同样没有明确的绑定对象,所以对象被绑定到window中, 结果和上面一样,并没有受foo的作用域影响 隐式绑定 (明确绑定了对象,但此时是隐式的,this指向最后调用的对象,也就是最后一个调用的对象)123456789101112var color = 'yellow';var foo = { color: 'blue', bar:function(){ console.log(this === foo); // true 最后调用的对象时foo,所以this指向foo console.log(this.color); // blue }}foo.bar();[^_^]:上面代码中,调用的对象时foo,所以bar这个函数当前的运行环境是foo,所以this.color会在foo环境中找,结果是blue 123456789var color = 'yellow';var foo = { // color: 'blue', bar:function(){ console.log(this === foo); // true 最后调用的对象时foo,所以this指向foo console.log(this.color); // undefined 在foo对象中找不到color }}foo.bar(); 显示绑定 (明确的绑定了对象,通过apply、call、bind显式绑定,这三个方法就改变作用域用的)12 构造绑定 (通过构造函数new一个对象,此时生成一个新的对象 ,this 此时就指向这个对象)123456789function Foo(){ this.bar=function(){ console.log(this); // window }}Foo().bar(); // Uncaught TypeError: Cannot read property 'bar' of undefined[^_^]:上面代码中,因为this是window中的所以找不到bar这个属性 (相当于默认绑定) 123456789101112function Foo(){ this.bar=function(){ console.log(this); // window return 1; }}Foo();window.bar(); // 1bar(); // 1 两种调用方法一样[^_^]:上面代码中,先运行Foo函数,因为this是指向window中的,所以此时window对象中就有了bar属性, 这是就可以找到bar这个属性 (this相当于默认绑定) 123456789101112<!-- 真正的构造函数绑定 -->function Foo(){ this.bar=function(){ console.log(this); // Foo return 1; }}var obj = new Foo;obj.bar(); // 1[^_^]:上面代码中,通过构造函数new一个对象,此时生成一个新的对象 ,this 此时就指向这个对象","tags":[{"name":"javascript this   //标签","slug":"javascript-this-标签","permalink":"http://yoursite.com/tags/javascript-this-标签/"}]},{"title":"markdown语法","date":"2018-07-25T00:12:36.620Z","path":"2018/07/25/markdown/","text":"react相关笔记整理 标题1.标题 ## eg: ## 这是一个耳机标题 (后面保持空格) 一共有6级 2.大标题 ==== 小标题 ———————— 3.TOC [TOC]注：根据标题生成目录，兼容性一般 4.引用代码1(单行式) hello world! 代码2(多行式) hello world!hello world!hello world! 6.代码块注：与上行距离一空行 代码1(12注：用```生成块 1234567891011代码3(自定义语法)注：根据不同的语言配置不同的代码着色```javascriptvar num = 0;for (var i = 0; i < 5; i++) { num+=i;}console.log(num); 7.插入链接代码1(内链式)注：{:target=”_blank”}跳转方式兼容性一般 ，多数第三方平台不支持跳转 百度1{:target=”_blank”} 8.插入图片代码1(内链式) 9.插入图片带有链接代码{:target=”_blank”} // 内链式 11.序表代码1(有序) 注：序列.后 保持空格 one two three演示 代码2(无序) one two three 代码4(序表嵌套代码块)注：换行+两个Tab one var a = 10; // 与上行保持空行并 递进缩进 12.任务列表注：兼容性一般 要隔开一行 代码 这是文字…… 选项一 选项二 [选项3] 20.分隔符注：最少三个 — 或 **或","tags":[{"name":"markdown","slug":"markdown","permalink":"http://yoursite.com/tags/markdown/"}]},{"title":"vscode插件及配置记录","date":"2018-07-05T14:15:29.992Z","path":"2018/07/05/vscode插件及配置记录/","text":"vscode插件及详细配置 在VS Code中code runner：可以安装后直接运行在node 环境中，然后在vscode中输出文件的结果 (ctrl+Alt+n)Auto Close Tag：匹配标签，关闭对应的标签。Auto Rename Tag：改变标签的时候同时改动开闭合标签 详细配置12345678910{ "workbench.colorTheme": "Visual Studio Light", "editor.fontSize": 18, // react标签自动补齐 "emmet.includeLanguages": { "javascript": "javascriptreact" }, "explorer.confirmDelete": false}","tags":[{"name":"工具","slug":"工具","permalink":"http://yoursite.com/tags/工具/"}]},{"title":"mongodb配置","date":"2018-07-05T14:05:51.914Z","path":"2018/07/05/mongodb配置/","text":"mongodb详细配置 1.启动MongoDB服务 \\data\\db这两个文件夹要自己新建1mongod --dbpath E:\\MongoDB\\data\\db http://localhost:27017 完了试试可不可以访问 2.本地windows mongodb 服务配置2.1 先在data文件下创建一个新文件夹log，然后Mongodb新建配置文件mongo.config123456dbpath=E:\\MongoDB\\data\\db #数据库路径logpath=E:\\MongoDB\\data\\log\\mongodb.log #日志输出文件路径logappend=true #错误日志采用追加模式，配置这个选项后mongodb的日志会追加到现有的日志文件，而不是从新创建一个新文件journal=true #启用日志文件，默认启用quiet=true #这个选项可以过滤掉一些无用的日志信息，若需要调试使用请设置为falseport=27017 #端口号 默认为27017 2.2 用管理员身份打开cmd: 在环境的bin目录下运行1mongod.exe --logpath E:\\MongoDB\\logs\\mongodb.log --logappend --dbpath E:\\MongoDB\\data --directoryperdb --serviceName MongoDB --install 如果注册表因为之前没安装了没装成功的话，运行net start MongoDB 可以会报错， 可以先 运行 sc delete MongoDB 然后再执行2.2","tags":[{"name":"工具","slug":"工具","permalink":"http://yoursite.com/tags/工具/"}]},{"title":"react","date":"2018-06-23T11:31:47.182Z","path":"2018/06/23/react相关/","text":"react相关笔记整理 第一节 redux1.首先通过 reducer新建store, store.getState()获取状态可以通过 store.dispatch(action) 修改状态,reducer函数接受state,action,返回新的state,可以通过subscribe()监听每次的修改 store.dispatch方法传递给组件,内部可以调用修改状态subscribe订阅render函数,每次修改都重新渲染redux相关内容,移到单独的文件index.redux.js单独管理 redux 处理异步,需要redux-thunk插件:使用thunk时 import { createStore , applyMiddleware } from ‘redux’; const store = createStore(counter,applyMiddleware(thunk)); npm install redux-devtools-extension 并且开启调试:使用如下 import { createStore , applyMiddleware, compose } from ‘redux’; const store = createStore(counter,compose(applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension():f=>f )); react-redux 优雅的链接redux和react:使用如下 npm install react-redux –save 忘记subscribe ,记住reducer,action 和 dispatch即可 react-redux 提供了Provider和connect两个接口 没使用修饰器时:const setProps = (state)=>{ return { num:state }}const actionCreators = { addGun, removeGun ,addGunAsync };App = connect(setProps,actionCreators)(App) 使用修饰器时:要先安装 npm isntall babel-plugin-transform-decorators-legacy –save-dev并且在package.json的babel中配置,“plugins”:[“transform-decorators-legacy”] 因为creat-react-app脚手架不支持修饰器所以还要装npm install babel-preset-stage-2 –save-devnpm install babel-preset-react-native-stage-0 –save-dev并且在根目录下创建.babelrc// react{ “presets”: [“react-native-stage-0/decorator-support”]}不用配置”plugins”:[“transform-decorators-legacy”] 第二节 react-router4npm install react-router-dom –save 核心方法import { BrowserRouter, Link, Route, Redirect, Switch } from ‘react-router-dom’ BrowserRouter 包裹了整个路由 (还用一个叫HashRouter)Route 路由对应要渲染的组件,可以嵌套使用Link 跳转专用,相当于a标签 App // 点击跳转到指定路由 one two // 该指定路由渲染的组件 // BrowserRouter下只能有一个子元素// exact精准匹配 url 路由路径参数传递到模板 用baseUrl/:id类似格式，组件中用match.params.id接收。Redirect组件是跳转用的 Switch 只选择一个子Route组件 第三节 react基础1.组件周期初始化周期: componentWillMount() render() componentDidMount()组件重新渲染周期:组件卸载声明周期:","tags":[{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"}]},{"title":"课程笔记","date":"2018-05-28T14:38:24.337Z","path":"2018/05/28/课程笔记/","text":"1.盒模型12345标准盒子模型： 宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin // 通常说的“IE盒子模型”指的是IE5.5,IE6,IE7及以后,盒模型都为 content-box// 个人感觉IE盒模型更利于开发, 所以可以把盒子属性设置为 // box-sizing:border-box; IE9及以上都支持 2.选择器123456789101112131415161718192021相邻选择器 h1 + p // 选择所有紧接着<h1>元素之后的<p>元素子选择器 ul > li // 当li是ul的子元素则选中li,否则不选中后代选择器 li a属性选择器 a[rel=“external”]、a[target]、 [title~=flower] 择标题属性包含单词"flower"的所有元素 [lang|=en] 选择一个lang属性的起始值="EN"的所有元素[attribute^=value] a[src^="https"] 选择每一个src属性的值以"https"开头的元素[attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素[attribute*=value] a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素伪类选择器 a:hover, li:nth-child // 伪类表示一个状态 element1~element2 选择器匹配出现在 element1 后面(只是后面,不是其里面)的 element2element1 和 element2 这两种元素必须具有相同的父元素(两个都是其父元素的子元素),但 element2 不必紧跟在 element1 的后面 (和后代选择器不是一回事)可继承的属性：font-size, font-family, color优先级（就近原则）：!important > [ id > class > tag ]!important 比内联优先级高:focus 12345LVHA:link:visited:hover:active 点击的时候 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354元素选择符： 1class选择符： 10id选择符：100元素标签：1000!important声明的样式优先级最高，如果冲突再进行计算。如果优先级相同，则选择最后出现的样式。继承得到的样式的优先级最低。:first-letter 用来指定元素第一个字母的样式:first-line 用来指定选择器第一行的样式:first-child 选择当前元素是否是其父元素的第一个子节点,是则选中:before 选择器向选定的元素前插入内容 使用content 属性来指定要插入的内容:after 选择器向选定的元素之后插入内容 使用content 属性来指定要插入的内容 :first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。:first-of-type 匹配的是该类型的第一个,类型是指什么呢，就是冒号前面匹配到的东西.比如 p:first-of-type 就是指所有p元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了,当然这些元素的范围都是属于同一级的,也就是同辈的。同样类型的选择器 :last-child only-child , :last-of-type、:only-of-type :nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。:only-of-type 选择器匹配属于同类型中唯一同级元素 //同类型 唯一 类型指冒号前的元素p:nth-child(2) 选中p元素是其父元素的第二个子元素的p元素 (所有满足条件的p元素):nth-last-child() 倒数:nth-last-of-type(n):empty选择器选择每个没有任何子级的元素(包括文本节点):target 选择器可用于当前活动的target元素的样式。锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素input[type="text"]:enabledinput[type="text"]:disabledinput:checked:not(p) 排除指定元素input:out-of-range:out-of-range 选择器用于标签的值在指定区间之外时显示的样式。注意： :out-of-range 选择器只作用于能指定区间之外值的元素，例如 input 元素中的 min 和 max 属性。input:in-range 之内设置样式:read-write 选择器用于匹配可读及可写的元素,即没有 "readonly" 属性注意: 目前, 在大多浏览器中, :read-write 选择器只使用于设置了input 和 textarea 元素。:read-only 类似,匹配只读 JSON字符串与JSON对象123456789101112131415161718192021222324var data = { "name":"wj", "age" :"25", "job" :"前端开发"};// alert(data); // json对象// json对象转json字符串data = JSON.stringify(data);alert(data);// json字符串转json对象// 方法一:data = JSON.parse(data);alert(data);// 方法二:data = eval('('+data+')');alert(data);// 方法三:data = $.parseJSON(data);alert(data); 1234567891011121314151617181920212223242526272829window.onload 和 DOMContentLoaded 区别window.onload //页面的全部资源加载完成才会执行,包括图片、视频DOMContentLoaded // DOM 渲染完即可执行，此时图标、视频等可能还没加载完成性能优化原则1. 多使用内存、缓存、减少CPU计算、减少网路请求 1.1 加载页面和静态资源： 1.1.1 静态资源的压缩合并：如精灵图、代码压缩 1.1.2 静态资源缓存：服务器设置缓存、前端设置缓存 1.1.3 使用CDN 1.2 页面渲染： 1.2.1 css放前面,js放后面：提升用户体验(js会阻塞代码运行,css使用户看到页面时就是有样式的) 1.2.2 懒加载(有大量图片时下拉、下拉加载更多页面内容) 1.2.3 减少DOM操作:查询,对DOM的查询结果做保存(for循环中的length值),插入(把for循环中的要插入值保存到一个变量中,最后一起插入) var frag = document.createDocumentFragment(); for(let i=0; i<10; i++){ frag.appendChild(<p>i</p>); // 保存在文档片段中,就不会做DOM查询 } document.appendChild(frag); // 真正插入到页面中 1.2.4 事件节流:事件委托 1.2.5 尽早执行操作: 一些js代码库都是使用DOMContentLoaded来做判断的 12函数中：arguments.length; //实际传参个数 argTest.length; //期望传参个数 argTest是函数名","tags":[{"name":"笔记","slug":"笔记","permalink":"http://yoursite.com/tags/笔记/"}]},{"title":"Es6相关笔记","date":"2018-04-04T02:29:36.574Z","path":"2018/04/04/Es6/","text":"es6相关笔记整理 let1.只在什么的代码块中有效 var 声明，会发生变量提升，即脚本开始运行时，变量已经存在了，但是没有值，所以会输出undefined.let 声明，不会发生变量提升。这表示在声明它之前，变量是不存在的，这时如果用到它，就会抛出一个错误 另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。 12345678for (let i = 0; i < 3; i++) { let i = 'abc'; console.log(i);}// abc// abc// abc解释：其实块级作用域里声明的let 变量不可以在块级外使用，并不是说外面的let变量不能跑到块级作用域中用，上面的父级let在子级没有什么自己的let时，用的是父级的变量，如果声明了则用自己作用域的。 1234567891011var a = [];for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; a[i](); // 0,1,2,3,4,5,6,7,8,9}a[6](); // 10// 此时i始终就一个值 ,console.log(i)一直指向唯一的i,当循环完后i的值为10,所以a[i]函数运行的结果一直是10 12345678910var a = [];for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); };}a[6](); // 6// 此时i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,let声明的变量在每一次循环中都是一个新的变量，javascript引擎会记作上一轮循环的值。 存在暂时性死区:只要块级作用域内存在let,这个区域就被let声明的变量锁定了,外部的同名变量不可以在这个区域中的let变量 “前” 进行操作。12ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。 12345678910111213141516171819202122let 声明的变量不允许重复声明, 同样不能在函数内部重新声明参数。function func() { // 报错 let a = 10; var a = 1;}function func() { // 报错 let a = 10; let a = 1;}function func(arg) { let arg; // 报错}function func(arg) { { let arg; // 不报错 }} 12345ES6 允许块级作用域的任意嵌套。且外层作用域无法读取内层作用域的变量。{{{{{let insane = 'Hello World'}console.log(insane); // 报错}}}}; 2. const 声明一个只读的常量。一旦声明,常量的值就不能改变,且声明时一定要赋值。 const 作用域与let命令相同：只在声明所在的块级作用域内有效。 const 命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。 const 声明的常量，也与let一样不可重复声明。 const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。 12345678910111213const foo = {};// 为 foo 添加一个属性，可以成功foo.prop = 123;foo.prop // 123// 将 foo 指向另一个对象，就会报错foo = {}; // TypeError: "foo" is read-only上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。const a = [];a.push('Hello'); // 可执行a.length = 0; // 可执行a = ['Dave']; // 报错","tags":[{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"javascript常见函数","date":"2018-03-18T05:59:54.530Z","path":"2018/03/18/javascript常见函数/","text":"javascript常见函数封装 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832841. /*获取元素属性*/ function getStyle(obj, attr){ if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } 2. /*运动函数 *json中传入要改变的属性和要变到的具体值 *fnEnd是运动完后运行的函数，可不写 */ function startMove(obj, json, fnEnd){ clearInterval(obj.timer); var attr; obj.timer=setInterval(function (){ var bStop=true; //是否到了要设置的属性值 for(attr in json) { var iCur=0; //取当前位置 if(attr=='opacity') { iCur=parseInt(parseFloat(getStyle(obj, attr))*100); } else { iCur=parseInt(getStyle(obj, attr)); } //运动速度 var iSpeed=(json[attr]-iCur)/8;// iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100; } else { obj.style[attr]=iCur+iSpeed+'px'; } if(iCur!=json[attr]) { bStop=false; } } if(bStop) { clearInterval(obj.timer); if(fnEnd) { fnEnd(); } } }, 30);} 3. /* 封装ajax函数 * @param {string}opt.type http连接的方式，包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的 * @param {object}opt.data 发送的参数，格式为对象类型 * @param {function}opt.success ajax发送并接收成功调用的回调函数 */ function ajax(opt) { opt = opt || {}; opt.method = opt.method.toUpperCase() || 'POST'; opt.url = opt.url || ''; opt.async = opt.async || true; opt.data = opt.data || null; opt.success = opt.success || function () {}; var xmlHttp = null; if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); } var params = []; for (var key in opt.data){ params.push(key + '=' + opt.data[key]); } var postData = params.join('&'); if (opt.method.toUpperCase() === 'POST') { xmlHttp.open(opt.method, opt.url, opt.async); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8'); xmlHttp.send(postData); } else if (opt.method.toUpperCase() === 'GET') { xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async); xmlHttp.send(null); } xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { opt.success(xmlHttp.responseText); } }; } /*例*/ ajax({ method: 'GET', url: 'http://www.baidu.com', data: { user: 'wujun', password: '123' }, success: function(response) { console.log(response); } }); 4. /*非jquery addclass hasclass removeclass toggleclass*/ function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)')); } function addClass(obj, cls) { if (!this.hasClass(obj, cls)) obj.className += " " + cls; } function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)'); obj.className = obj.className.replace(reg, ' '); } } function toggleClass(obj,cls){ if(hasClass(obj,cls)){ removeClass(obj, cls); }else{ addClass(obj, cls); } } function toggleClassTest(){ var obj = document. getElementById('test'); toggleClass(obj,"testClass"); } 5.原生获取class function getByClass(oParent,sClass){ var aEle=oParent.getElementsByTagName(sClass); var aResult=[]; var reg=RegExp('\\\\b'+sClass+'\\\\b'); for(var i=0;i<aEle.length;i++){ if(reg.test(aEle[i].className)) { aResult.push(aEle[i]); } } return aResult; } //鼠标事件onclick 鼠标点击(onclick是在鼠标点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数)onmouseover 鼠标移入目标上方(移入时触发一次)onmouseout 鼠标移出目标上方onmousemove 鼠标在目标上方移动(在目标上移动,不停触发)onmousedown 鼠标按钮被按下(在鼠标按键按下去的瞬间触发)onmouseup 鼠标按钮抬起ondblclick 鼠标双击oncontextmenu 鼠标右键单击弹出菜单//键盘事件//系统事件onload 加载完在执行//表单事件//函数 运行function abc(){ } 此时不运行1.直接调用:abc()2.事件调用:oDiv.onclick=abc; //切记没括号innerHtml:有一些问题oBtn.style.fontSize=num+'px'//这里的px不要丢了,有些浏览器不支持oBtn.style.fontSize='300px';//不要拿来做判断的有:1.所有的相对路径都别拿来做判断2.颜色值3.innerHtml值不要拿来做判断 ??????//oDiv.style.float='left';不支持 oDiv.style.styleFloat='left';//IE oDiv.style.cssFloat='left';//非IE filter:alpha(opacity:90); opacity:0.9;//document.getElementById() 静态方法 前面只能跟document//document.getElementByTagName() 动态方法 得到的是一个类数组 前面document可以是别的function getByClass(oParent,sClass){ var aEle=oParent.getElementsByTagName('*'); var aResult=[]; var reg=RegExp('\\\\b'+sClass+'\\\\B'); if(reg.test(aEle[i].className)) { aResult.push(aEle[i]); } return aResult;}//事件捕获ie:obj.attachEvent(事件名称onclick,事件函数)标准:obj.addEventListener(事件名称click,事件函数)//oDiv.style.cssText = ' width:200px; height:200px; ';oDiv.style.cssText = '';//清空后样式变成样式表中的样式伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。","tags":[{"name":"javascript","slug":"javascript","permalink":"http://yoursite.com/tags/javascript/"}]},{"title":"代码规范","date":"2018-03-17T11:42:49.551Z","path":"2018/03/17/js注释规范/","text":"js相关规范 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889/** * 这里的注释内容【会】被压缩工具压缩 *//*! * 这里的注释内容【不会】被压缩工具压缩 *//** * @auhor 作者 * @version 版本号 * @param 参数 * @return 返回值 *//*! * [testFunction description] * @param {[type]} a [description] * @param {[type]} b [description] * @param {[type]} c [description] * @return {[type]} [description] */function testFunction(a, b, c) {}// TODO 未处理IE6-8的兼容性/*reset*/@charset "utf-8";/* CSS Document */body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}body{font-size:12px;}img{border:none;}li{list-style:none;}input,select,textarea{outline:none;border:none; background:none;}textarea{resize:none;}a{text-decoration:none; color:#656565;}/*清浮动*/.clearfix:after{ content:""; display:block; clear:both;}.clearfix{ zoom:1;}.fl{ float:left;}.fr{ float:right;}// JavaScript Document 使用DD_belatedPNG让IE6支持PNG透明图片DD_belatedPNG.fix('div,ul,ol,li,dt,dd,dl,span,img,a,em,strong,h1,h2,h3,h4,h5,h6,p');//尽量少偷懒，不要用*，性能是很低的ReferenceError //引用错误","tags":[{"name":"规范","slug":"规范","permalink":"http://yoursite.com/tags/规范/"}]},{"title":"网页宽高设置","date":"2018-03-14T03:40:30.332Z","path":"2018/03/14/js宽高设置/","text":"网页元素宽高设置 居中不跳动：100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。 于是，calc(100vw - 100%)就是浏览器滚动条的宽度大小,margin-left: calc(100vw - 100%)使两边都有滚动条（如果有的话） 居中不跳动最佳实践TODO 暂时先这样，感觉也有问题，当缩小浏览器时横向滚动条不能滚动1234567891011121314151617html { overflow-y: scroll;}:root { overflow-y: auto; overflow-x: hidden;}:root body { position: absolute;}body { width: 100vw; overflow: hidden;} js在处理小数时会出现问题：如123var a=3;var b=3.00000000000000000001;alert(a==b); 123a标签：link visited hover activeMath.max(); 事件相关oEvent=ev||event;event是事件对象(也是window的属性)，但不是标准的，只有IE支持。在W3C标准支持的浏览器下事件对象是引发事件函数的第一个参数，参数名随意。var oEvent = ev || event; 在IE中执行var oEvent = ev || event;时，ev为undefined，即为false，而event为true。所以返回的是它所支持的event。在其他浏览器中，第一个ev为true，直接返回，不用理会后面的event。而反过来写，var oEvent = event || ev;IE下不会报错，直接返回第一个为true的event但在其他浏览器中，firefox event没有被定义，直接报错。 event事件：在js中，对于元素的运动的操作通常都会涉及到event对象，而event对象也存在很多位置属性，且由于浏览器兼容性问题会导致这些属性间相互混淆，这里一一讲解。clientX和clientY，这对属性是当事件发生时，鼠标点击位置相对于浏览器（可视区）的坐标，即浏览器左上角坐标的（0,0），该属性以浏览器左上角坐标为原点，计算鼠标点击位置距离其左上角的位置 screenX和screenY是事件发生时鼠标相对于屏幕(当浏览器窗口缩小时，它也是相对屏幕)的坐标，以设备屏幕的左上角为原点，事件发生时鼠标点击的地方即为该点的screenX和screenY值 pageX和pageY: 顾名思义，该属性是事件发生时鼠标点击位置相对于页面的位置，通常浏览器窗口没有出现滚动条时，该属性和event.clientX及event.clientY是等价的，但是当浏览器出现滚动条的时候，pageX通常会大于clientX，因为页面还存在被卷起来的部分的宽度和高度由于浏览器出现了垂直和水平的滚动条，所以pageX和pageY大于clientX和clientY。当浏览器的滚动条没有被拖动或者浏览器没有滚动条的时候，两者是相等的。 只读属性offsetLeft和offsetTop:说到这对属性就需要说下offsetParent,所谓offsetParent指的是当前元素的离自己最近的具有定位的（position:absolute或者position：relative）父级元素（不仅仅指的是直接父级元素，只要是它的父元素都可以），该父级元素就是当前元素的offsetParent，如果从该元素向上寻找，找不到这样一个父级元素，那么当前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是当前元素，相对于其offsetParent左边距离和上边距离，即当前元素的border到包含它的offsetParent的border的距离(要加上offsetParsent的border宽度) clientWidth和clientHeight: 该属性指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高(各浏览器的滚动条宽度是17px) offsetWidth和offsetHeight: 这一对属性指的是元素的border+padding+content的宽度和高度，该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关 oEvent.ctrlKey而不是oEvent.keyCode==17 document.documentElement和document.body对于这两个元素的使用一般是以下两种情况 clientWidth和clientHeight scrollWidth,scrollHeight,scrollLeft,scrollTop 现在假设每个属性的意思你都明白 对于ie7以上和火狐:通过document.documentElement都可以取到标准属性, 对于ie6:则要通过document.body才能都取到正确的属性 对于chrome是用区别的 通过document.documentElement clientWidth和clientHeight,scrollWidth,scrollHeight都可以取到正确的属性 但对于scrollLeft,scrollTop,只有通过document.body才能取到正确的属性 但通过document.body的话,都是可以取到正确的属性,这点和ie6一样 最后要说的是,取不到正确值,不是undefined,而是要么是0,要么是都等于窗口大小,这个不重要,不提也罢 最后说解决方案 如果不要求ie6: 除了scrollTop,scrollLeft 都要用document.documentElement来取, 如果涉及到scrollTop,scrollLeft(照顾chrome),这两个属性要用document.body来取了 如果要求ie6: 那就都要取document.body取到的值和document.documentElement取到的值的最大值了 oEvent.cancelBubble=true; oImg.style.filter=’alpha(opacity:’+alpha+’)’;oImg.style.opacity=alpha/100; 12345https://www.jianshu.com/p/855d3db86b5eTODO 测试有问题offsetX和offsetY: 这一对属性是指当事件发生时，鼠标点击位置相对于该事件源的位置，即点击该div，以该div左上角为原点来计算鼠标点击位置的坐标 。需要注意的是，IE，chrome，opera都支持该属性，唯独Firefox不支持该属性，Firefox中与此属性相对应的概念是，event.layerX和event.layerY,所以需要兼容浏览器时，获取鼠标点击。位置相对于事件源的坐标的兼容写法为var disX=event.offsetX||event.layerX. background-position 属性改变图像在背景中的位置:background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。 如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 //文本转换属性是用来指定在一个文本中的大写和小写字母 p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} //指定字符之间的空间 letter-spacing:2px; //增加单词之间的空白空间 word-spacing:30px; //在元素内禁用文字环绕 ,不换行 white-space:nowrap; vertical-align:text-top; text-shadow:2px 2px #FF0000; unicode-bidi:bidi-override; //如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。 font-family:"Times New Roman", Times, serif; p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} //倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持） font-weight:lighter; font-variant:small-caps;//把段落设置为小型大写字母字体： font 简写属性在一个声明中设置所有字体属性。可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。border-collapse:collapse; 属性设置表格的边框是否被折叠成一个单一的边框或隔开：border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。max-height:50px;min-height:100px;visibility:hiddenclip:rect(0px,70px,200px,0px);someNode.childNodes得到的是一个NodeListsomeNode.childNodes[0]someNode.childNodes.item(0)原生对元素中间的空格处理不好appendChild()someNode.appendChild(newNode)操作的是someNode的子节点,添加一个新节点在子元素的最后，如果newNode是在子节点的取得的，则是移动节点到最后。someNode.insertBefore(newNode,null)也是操作someNode的子节点,null是原节点，如someNode.firstChild4. 替换：someNode.replaceChild(newNode,someNode.firstChild)5. 删除：someNode.removeChild(someNode.firstChild)6. cloneNode()操作的是创建调用这个方法的一个完全相同的副本，true深复制（包括子节点),不会复制事件，但ie会，7. normalize()处理文档的文本节点，删除空白，合并两个文本节点8. document.documentElement;取得的是<html></html>元素的引用，document.firstChild document.childNodes[0]都是一样的9. document.body.10. document.title 可读可写11. document.URL document.domain document.referrer 来源页面的urlhh12. document.forms document.links document.anchors document.images注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。垂直居中 - 使用 line-height/* 如果文本有多行，在父元素上设置line-height*/.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center;}.center p { line-height: 1.5; display: inline-block; vertical-align: middle;}//垂直居中.center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}后代选取器(以空格分隔)子元素选择器(以大于号分隔）<strong>相邻</strong>兄弟选择器（以加号分隔）普通兄弟选择器（以破折号分隔）1.Reset css:/*KISSY CSS Reset理念：清除和重置是紧密不可分的特色：1.适应中文 2.基于最新主流浏览器维护：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)*//* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */fieldset, lengend, button, input, textarea, /* form elements 表单元素 */th, td { /* table elements 表格元素 */ margin: 0; padding: 0;}/* 设置默认字体 */body,button, input, select, textarea { /* for ie */ /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/ font: 12px/1 Tahoma, Helvetica, Arial, "\\5b8b\\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */}h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }h2 { font-size: 16px; }h3 { font-size: 14px; }h4, h5, h6 { font-size: 100%; }address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 *//* 重置列表元素 */ul, ol { list-style: none; }/* 重置文本格式元素 */a { text-decoration: none; }a:hover { text-decoration: underline; }abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */ border-bottom: 1px dotted; cursor: help;}q:before, q:after { content: ''; }/* 重置表单元素 */legend { color: #000; } /* for ie6 */fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 *//* 注：optgroup 无法扶正 */button, input, select, textarea { font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */}/* 重置表格元素 */table { border-collapse: collapse; border-spacing: 0;}/* 重置 hr */hr { border: none; height: 1px;}/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */html { overflow-y: scroll; }清除内外边距的元素，去掉了 div, code（在测试浏览器中，没发现有边距）, 增加了 button（感觉是 YUI 遗漏了）. 去掉了 YUI 里对 html 颜色和背景色的设置。在测试浏览器中，没有发现差异。（要设的话，推荐background: transparent） 对于 address, caption, …, em, strong 等文本格式元素，做了调整。保留了 strong 和 th 的粗体。 对 abbr 和 acronym 做了调整，使得在非 ie6 下可视性更好。 去掉了 sup 和 sub 的样式，直接用浏览器默认的即可。 对于 input, select, textarea 表单元素，去掉了针对 ie 的 inherit, 只保留了 font-size 的 inherit hack. 因为其它 hack 经测试已失效。 增加了一些元素的默认样式。2.readonly="true"伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元1. npm config set registry https://registry.npm.taobao.org2. jsx其实就是javascript对象3. ReactDOM.render 功能就是把组件渲染并且构造DOM树，然后插入到页面上某个特定元素上。所有未定义直接赋值的变量属于全局作用域,不推荐使用直接赋值不是一种声明方式。这仅仅是在全局对象上创建了新的属性（而不是变量）变量不能删除（delete），属性可以删除在JavaScript引擎解析JavaScript代码的时候，首先，JavaScript引擎会把变量和函数的声明提前进行预解析，然后再去执行其他代码。函数的生命周期:函数的的生命周期分为创建和执行两个阶段。在函数创建阶段，JS解析引擎进行预解析，会将函数声明提前，同时将该函数放到全局作用域中或当前函数的上一级函数的局部作用域中。在函数执行阶段，JS引擎会将当前函数的局部变量和内部函数进行声明提前，然后再执行业务代码，当函数执行完退出时，释放该函数的执行上下文，并注销该函数的局部变量。JavascriptAPI:1. Math.abs(-5.3)// abs返回整形数据的绝对值2. Math.round(x)//返回离x最近的一个整数3. Math.ceil(x)// 方法可对一个数进行上舍入4. Math.floor(x)//向下取整5. Boolean() //调用转型函数，变成bool类型6. isFinite()//在最小值和最大值之间会返回true7. isNaN() //会尝试转换，如不能则返回true。8. Number()9. parseInt()10. parseFloat()11. toString()//age.toString()杂乱无章：1. Reset css: 清扫差异和重置默认样式结合起来。“*” 导致CSS渲染引擎在渲染CSS的时候，使用*遍历整个DOM 树，影响性能渲染性能。2. typeof：以字符串的形式返回变量的原始类型typeof在两种情况下会返回"undefined":一个变量没有被声明的时候,和一个变量的值是undefined的时候，注意，typeof null也会返回object，大多数的对象类型（数组Array、时间Date等）也会返回objectcontructor：一个属性，返回对创建此对象的数组函数的引用instanceof：运算符，用来在运行时指出对象是否是特定类的一个实例，找到则返回true，否则返回false3. clientTop和clientLeft: 这一对属性是用来读取元素的top和left的border的宽度scrollHeight和scrollWidth: 顾名思义，这两个属性指的是当元素内部的内容超出其宽度和高度的时候，元素内部内容的实际宽度和高度，需要注意的是，当元素其中内容没有超过其高度或者宽度的时候，该属性是取不到的。可读可写属性：所谓的可读可写属性指的是不仅能通过js获取该属性的值，还能够通过js为该属性赋值。scrollTop和scrollLeft: 这对属性是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度。obj.style.*属性：对于一个dom元素，它的style属性返回的是一个对象，这个对象中的任意一个属性是可读写的。如obj.style.top,obj.style.wdith等，在读的时候，他们返回的值常常是带有单位的(如px),同时，对于这种方式，它只能够获取到该元素的行内样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值的时候和以上只读属性的区别，要获取计算好的样式，请使用obj.currentstyle（IE）和getComputedStyle(IE之外的浏览器)。另一方面，这些属性能够被赋值，js运动的原理就是通过不断修改这些属性的值而达到其位置改变的，需要注意的是，给这些属性赋值的时候需要带单位的要带上单位，否则不生效。(getComputedStyle也要减去侧边滚动条宽度,currentStyle不用减）伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。","tags":[{"name":"git","slug":"git","permalink":"http://yoursite.com/tags/git/"}]},{"title":"Git 配置及相关命令","date":"2018-02-01T01:10:13.000Z","path":"2018/02/01/git配置及相关命令/","text":"从git安装到电脑后的配置步骤,及一下git常用命令 开始配置一、生成SSH密钥过程：1.查看是否已经有了ssh密钥： 12cd ~/.ssh //在gitbash中运行 或者直接进入 C:\\Users\\wj\\.ssh 目录查看 如果没有密钥则不会有此文件夹，有则备份删除 2.生成密钥：1$ ssh-keygen -t rsa -C “****@189.cn” //按3次回车，密码为空 Your identification has been saved in /home/tekkub/.ssh/id_rsa.Your public key has been saved in /home/tekkub/.ssh/id_rsa.pub.The key fingerprint is:………………最后得到了两个文件：id_rsa和id_rsa.pub 3.添加密钥到ssh：ssh-add 文件名需要之前输入密码。把专用密钥添加到 ssh-agent 的高速缓存中：1ssh-add ~/.ssh/id_rsa 如果在使用shh-add的时候提示：Could not open a connection to your authentication agent.则需手动开启ssh，如下；1eval `ssh-agent -s` 再次执行ssh-add即可 4.在github上添加ssh密钥，这要添加的是“id_rsa.pub”里面的公钥。打开https://github.com/ ，登陆github账号，然后添加ssh。 5.测试：ssh git@github.comThe authenticity of host ‘github.com (207.97.227.239)’ can’t be established.RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.Are you sure you want to continue connecting (yes/no)? yesWarning: Permanently added ‘github.com,207.97.227.239′ (RSA) to the list of known hosts.ERROR: Hi tekkub! You’ve successfully authenticated, but GitHub does not provide shell accessConnection to github.com closed. 6.加快clone的方法：1151.101.72.249 http://global-ssl.fastly.Net 192.30.253.112 http://github.com //添加的hostsC:\\Windows\\System32\\drivers\\etc\\hosts 二：git命令Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库 123456touch readme.txt //创建.txt文件（任意文件后缀）mkdir text //创建 text文件夹cd .. //退出当前文件夹cd ./ //当前目录cd / //退出到跟目录 Git的设置文件为.gitconfig 具体怎么配置？12345git config --list //显示当前的Git配置git config -e --global //编辑Git配置文件 git config --global user.name "[name]" //设置提交代码时的用户信息git config --global user.email "[email address]" //设置提交代码时的用户信息 123456789101112131415161718192021pwd //显示当前目录ls //查看有什么文件如果你没有看到.git目录，那是因为这个目录默认是隐藏的，用ls -ah命令就可以看见初始化仓库git init git init 项目名（创建后里面有.git文件）git add . //添加所有文件到暂存区git add // 添加指定文件到暂存区git commit -m "文件说明" 提交到版本库中(本地仓库)git commit -v //提交时显示所有diff信息git commit --amend -m [message] //使用一次新的commit，替代上一次提交如果代码没有任何新变化，则用来改写上一次commit的提交信息git remote add origin "具体github仓库" //需要提前在git上创建好git push -u origin master //本地仓库把推送到远程仓库 12345678910111213141516171819202122git checkout -b dev //新建并切换到dev分支等价于：git branch dev //新建分支git checkout dev //切换分支git checkout - //切换到上一个分支git branch //查看分支：git branch -r //查看远程分支git branch -a //列出所有本地分支和远程分支git merge dev //将次分支合并到当前分支上面git branch -d dev //删除分支删除远程分支git push origin --delete [branch-name]git branch -dr [remote/branch]git clone "***" //不指定分支拉代码git clone -b dev "***" //指定分支拉代码 1git log //显示提交记录 可加参数 --pretty=oneline 123git status //显示有变更的文件git diff //显示暂存区和工作区的差异git diff --cached [file] //显示暂存区和上一个commit的差异","tags":[{"name":"git 工具","slug":"git-工具","permalink":"http://yoursite.com/tags/git-工具/"}]}]