前端
文章平均质量分 68
前端学习
每天做好自己的事情,把每一件事情认真的做好
展开
-
git学习一
/** * git * -工具,版本控制 * github * -网站、社交平台、开元项目、远程仓库 * * svn与git区别 * -svn集成式 * -git分布式 * -git作用 * * 本地创建git步骤 * */一:window命令 本地创建git Windows下列出目录下所有文件和子目录: 这个操作和lin原创 2016-06-02 15:46:36 · 346 阅读 · 0 评论 -
jquery 常用方法及事件操作 $工具方法
/** * //dom常用操作,DOM操作 * get() 就是把JQ转成原生js * outterWidth(); * 类似原生offsetWidth :获取不到隐藏元素(display:none)的值 * text(); * remove(); * detach()跟remove一样,不过会保留删除这个元素的操作行为 * parents()获取当前元素的所有祖先节点原创 2016-05-20 15:53:37 · 296 阅读 · 0 评论 -
jquery width,innerWidth,outterWidth 及事件操作
* width() * innerWidth() //width+padding * outterWidth() //width+padding+border * outterWidth(true) //width+padding+border+margin原创 2016-05-19 17:13:30 · 821 阅读 · 0 评论 -
canvas 四 合成与事件
/** * getImageData(x,y,w,h); * 属性data:一个数组包含每个像素的rgba四个值每个值豆子啊0-255之间 * putImageDate(获取图像,x,y) * 设置新的图像数据 * createImageData * 生成新的像素矩阵,初始值为全透明的黑色 * */var oc = document.getElementById原创 2016-05-06 18:35:07 · 561 阅读 · 0 评论 -
javascript基础十(知识点类js中的跨域)
/** * 跨域:在不同的域名下进行数据交互 */ajax: XMLHttpRequest(); //不能跨域// 可以设置1:document.domain = 'a.com';2:服务器代理: XMLHttpRequest 代理文件3:script标签 :jsonp4:location.hash5:window.name (和上面本质相同)6:flash7:html5 p原创 2016-04-22 18:54:50 · 249 阅读 · 0 评论 -
javascript基础九(知识点类对象的引用)
/** * 对象的引用 */var obj = { a : 10}// 浅拷贝(存在问题json中存在json)function copy(obj){ var newObj = {}; for(var attr in obj){ newObj[attr] = obj[attr]; } return newObj;}var obj2 = copy(obj);obj2原创 2016-04-22 18:29:04 · 259 阅读 · 0 评论 -
javascript基础八(知识点类闭包)
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。怎么来理解这句话呢?请看下面的代码。Js代码 function f1(){ var n=999; nAdd=function(){n+=1} function f2(){ alert(n);原创 2015-07-08 14:17:40 · 434 阅读 · 0 评论 -
javascript基础三 (EVENT事件详解)
一:基础概念event:事件对象:当一个事件发生的时候和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供需要的时候调用事件对象:必须在一个事件调用的函数里面才有内容事件函数:事件调用的函数,一个函数是不是事件函数,不在定义的时候决定,而是取决去于个函数调用的时候二:兼容ie/chrome :event是一个内置的全局对象原创 2016-04-19 18:07:44 · 997 阅读 · 0 评论 -
javascript基础七(知识点类快速排序与函数声明函数表达式)
一:排序算法/* sort方法1:找一个基准点2:建立两个数组,分别存储在左边和右边的数组3:利用递归进行下次比较*/alert(querySort([12,5,37,6,33,50]));function querySort(arr){ if(arr.length <= 1){ return arr; } var num = Math.floor(arr.leng原创 2016-04-22 14:07:07 · 299 阅读 · 0 评论 -
javascript基础六 (DOM优化)
/** * DOM优化: * 1:innerHTML与DOM操作方法,那个效率会更高 * chrome:DOM方法要比innerHTML的方法要好 * firefox:正好相反 * 2:cloneNode复制节点要比创建新节点,性能优化的多 * 3:减少DOM的频繁操作 * 4:新的选择器querySelectorAll() * * DMON与浏览器 * 1:重排;改变页面的内原创 2016-04-22 11:08:00 · 277 阅读 · 0 评论 -
canvas 三 图片插入及文字填充
/** * canvas插入图片 * 等图片加载完,在执行canvas操作 * 图片预加载:在onload 中调用方法 * drawImage(oImg,x,y,w,h) * oImg:图片x,y坐标 * w,h宽高 * * 设置背景 * createPattern(oImg,平铺方式) * repeat,repeat-x,repeat-y,no-repeat原创 2016-05-06 18:18:28 · 8573 阅读 · 0 评论 -
canvas 二 canvas绘制表盘,及canvas曲线的绘制
/** * 绘制圆 * arc(x,y,半径,起始弧度,结束弧度,旋转方向) * x,y起始位置 * 弧度与角度的关系 : 弧度 = 角度*Math.PI/180 * 旋转方向:顺时针(默认false)、逆时针(true) */var oc = document.getElementById('canvas');var ogc = oc.getContext('2d')原创 2016-05-06 16:18:15 · 1965 阅读 · 0 评论 -
html5学习 一 html5选择器与json新方法html5拖拽
/** * html5 新的选择器 * queryselector 只能选择一组元素 * querySelectorAll * getElementsByClassName * classList //返回类似与数组的对象 * classList.add(); * .remove * .toggle * .length * json的新方法原创 2016-05-05 15:47:48 · 732 阅读 · 0 评论 -
javascript基础四 (事件应用鼠标滚轮)
var oDiv = document.getElementById("div");/** * ie/chrome:onmousewheel * event.wheelDelta * 上:120 * 下:-120 * firefox: DOMMouseScroll 必须用addEventListener * event.detail * 阻止当前事件默认行为 * return false 阻止的是原创 2016-04-21 14:34:03 · 344 阅读 · 0 评论 -
jquery stop filter each end
//语法结构 stop([clearQueue][,gotoEnd]); $("button:eq(1)").click(function(){ $("#panel").stop();//停止当前动画,继续下一个动画,继默认状态stop(false,false); }); $("button:eq(2)").click(function(){ $("#panel").s原创 2016-06-20 17:51:33 · 369 阅读 · 0 评论 -
javascript 面向对象基础(二) 包装对象原型链
/** *面向对象高级部分 * 不要修改或者添加系统对象下面的方法和属性 * * 包装对象 * 基本类型都有自己对应的包装对象 * null undefined没有 * 原型链 * 实例对象与原型之间的链接,叫做原型链 * _proto_(隐式链接) * Object对象类型是原型链的最外层: Object.prototype */ //原创 2016-05-27 16:56:47 · 292 阅读 · 0 评论 -
nvm 还是 n
转载 2018-04-02 11:50:53 · 2601 阅读 · 2 评论 -
compass安装
compass安装gem install compasscompass -vmkdir workspacecd workspacecompass create learn-compass-init解决compass安装报错:添加淘宝镜像源$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https,请将淘宝源更换成原创 2017-07-28 17:50:37 · 688 阅读 · 0 评论 -
scss进阶
sass安装1:普通安装sudo gem install sasssass -v2:淘宝RubyGems镜像安装 sass$ gem sources --remove https://rubygems.org/$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https,请将淘宝源更换成:gem sources -a ht原创 2017-07-28 10:00:17 · 467 阅读 · 0 评论 -
React 还是 Vue: 你应该选择哪一个Web前端框架?
如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue 如果你喜欢简单和“能用就行”的东西,请使用Vue 如果你的应用需要尽可能的小和快,请使用Vue 如果你计划构建一个大型应用程序,请使用React 如果你想要一个同时适用于Web端和原生App的框架,请选择React 如果你想要最大的生态圈,请使用React 如果你已经对其中一个用转载 2017-08-02 14:43:44 · 1091 阅读 · 0 评论 -
sublime安装
还是电脑重新装系统,安装sublime text2的步骤在官网下载sublime text2百度出注册码在help栏中找出,输入验证注册并注册 ----- BEGIN LICENSE -----Andrew WeberSingle User LicenseEA7E-855605813A03DD 5E4AD9E6 6C0EEB94 BC99798F94219...原创 2015-01-05 11:29:40 · 503 阅读 · 0 评论 -
mac命令行打开sublime
打开iTerm2然后打开~/.bash_profile加入环境变量,假如下面这行alias subl=\''/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl'\'其中Sublime Text 2.app这个名字要自行根据你Applications目录下的sublime名字来确定。然原创 2017-07-04 15:22:44 · 994 阅读 · 0 评论 -
gulp 安装 gulp-css-spriter
转载 2017-06-29 17:58:15 · 417 阅读 · 0 评论 -
nvm 安装nodejs &gulp
配置环境变量并重启重启环境变量,source ~/.bash_profile安装node,在环境变量~/.bash_file中重新配置nodejs镜像源# nvmexport NVM_NODEJS_ORG_MIRROR="https://npm.taobao.org/mirrors/node"source ~/.nvm/nvm.shsource ~/.bash...原创 2017-06-28 14:45:12 · 798 阅读 · 0 评论 -
TweenMax 三 缓动及bezier
敬请期待....原创 2015-12-31 18:21:46 · 2312 阅读 · 0 评论 -
移动端常用meta及问题
<!-- viewport content="width=number" 有些android存在兼容 user-scalable=0 禁止缩放 iOS10+已经不在支持 initial-scalable android还是支持 minimun-scale:最小缩放比例 与初始缩放比例相同 设计稿最少750--> <!-- viewport:可视区窗口 如果不设置原创 2017-04-25 11:33:06 · 437 阅读 · 0 评论 -
事件流及事件冒泡
/** *事件对象,当一个事件发生的时候,和当前这个对象发生的这个事件相关的详细信息都会被临时保存到一哥指定的地方-event,供我们调用 *事件函数: *兼容: *ie/chrome alert(event) undefined *event是一个内置的全局对象 *Firefox (标准)事件对象通过事件函数的第一个参数调用高 * * screenX screenY * cl原创 2017-03-13 16:01:52 · 272 阅读 · 0 评论 -
bom对象
open 方法 window.onload = function(){ var oBtn = document.getElementsByTagName('input'); var opener = null; // open方法 // open(url, 打开方式) 如果URL为空则打开一个空白页 // 打开方式为空,则新窗口打开 // 返回值,返回新打开窗口的对象原创 2017-03-13 10:58:28 · 234 阅读 · 0 评论 -
jQuery.extend 函数详解
Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。 一、Jquery的扩展方法原型是: 复制代码代码如下:extend(dest,src转载 2016-06-21 18:04:10 · 374 阅读 · 0 评论 -
javascript 面向对象基础(四)面向对象的继承
/** * * 继承: * 属性的继承:调用父类的构造函数call * 方法的继承: for in 拷贝继承(jquery) * * apply: 方法名A.apply(对象名B, [执行A需要的参数,用数组表示]);call: 方法名A.call(对象名B, [执行A需要的参数,用逗号分隔]); apply和call功能是: 执行某一个对象的方法A, 但原创 2016-06-17 17:37:42 · 292 阅读 · 0 评论 -
javascript 面向对象基础(三)面向对象的常用属性和方法
/** * hasOwnProperty:判断是不是对象自身的属性 * constructor:查看对象的构造函数 * 每个原型都会自动添加constructor属性 * for in的时候有些属性是找不到的 * 避免修改constructor属性 * instanceof 运算符 * 对象与构造函数在原型链上是否有关系 * toString() object方法原创 2016-05-27 18:05:44 · 338 阅读 · 0 评论 -
javascript 面向对象基础(一)对象组成及函数封装
/** *过程式编程 *面向对象写法 * 面向对象编程的特点 * -抽象:抓住问题的核心 * -封装性:只能通过对象来访问 * -继承性:从已有对象上继承出新的对象-复用 * -多太:多对象的不同形态 * * 对象的组成 * 对象下面的变量叫做对象的属性 * arr.xxx * 对象下面的函数叫做对象的方法 * arr.xxx = f原创 2016-05-27 13:36:24 · 269 阅读 · 0 评论 -
javascript基础二 (DOM,BOM基础二)
BOM的几种方法:1: window.open("页面的url","打开方式")如果url为空默认打开空白页面默认为空,新窗口打开方式返回值:返回新打开的窗口的的window对象2: close();3: window.location window.location.search; /*url ?后面的内容*/window.location.hash原创 2016-04-19 16:08:29 · 329 阅读 · 0 评论 -
Png的使用技巧
Png是图像文件存储格式,在网页设计中已经不是一个陌生的名词,在前端开发中经常使用到它,如常用CSS 雪碧图。而Png的使用不仅仅如此,Png有多少种格式,有哪些特点,PC端中常用的Png格式是哪些,手机端最合适的Png格式是什么呢?如果你对这些问题有疑问,那么很开心的告诉你,这里有你需要的答案(*^__^*) 嘻嘻……目录:Png的格式和透明度[Png 不透明]格式Png转载 2015-02-12 15:07:24 · 639 阅读 · 0 评论 -
width:100vh有感而发
在看一个网页的代码是看到width:100vh 纳尼。。。这这我怎么没有见过,这是个什么属性,随之有看到 min-height:calc(100vh + 51px);这尼玛又是怎么用的....感叹入行已整整两年却...先介绍一下vh:相对于视窗的高度,那么vw:则是相对于视窗的高度“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.inn原创 2015-02-27 17:16:56 · 24968 阅读 · 9 评论 -
seajs使用教程指南
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放转载 2015-05-31 22:17:17 · 765 阅读 · 0 评论 -
hasLayout
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有翻译 2015-06-04 11:29:28 · 325 阅读 · 0 评论 -
TweenMax 一
var t1 = TweenLite;var t2 = TweenMax;var t3 = new TimelineLite();var t4 = new TimelineMax();t1.to('.test',1,{scaleX:0.6,scaleY:0.6});t2.to('.test',1,{scaleX:0.6,scaleY:0.6},2);t3.to('.test原创 2015-12-31 18:06:10 · 1406 阅读 · 0 评论 -
译~GreenSock动画平台(GSAP)的JavaScript版本入门
快速连结:引言载入文件基本的补间动画特殊屬性缓动插件补间动画的CSS属性控制补间动画用TimelineLite排序和分组补间学习TweenMax和TimelineMax覆盖其他补间动画常见问题开始玩转如果您还没有玩过的话,请看看玩转GSAP JS-它直观地演示了API的基本知识,并让您能快速上手。互动式幻灯转载 2015-12-17 11:34:03 · 8153 阅读 · 0 评论 -
TweenMax 二
// *param TweenLine 不依存于jquery TweenLine.to("#test") 补间ID为test的元素 // *param TweenLine 不依存于jquery TweenLine.to(".test") 补间class为test的元素// 1.to方法$(".test").toggle(function(){TweenLite.to("#demo"原创 2015-12-31 18:11:08 · 3319 阅读 · 0 评论