- 博客(37)
- 收藏
- 关注
RSS订阅原创 编写jQuery插件
一、插件的种类 jQuery的插件主要分为三种类型： 1、封装对象方法的插件 将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。 2、封装全局函数的插件 可以将独立的函数加到jQuery命名空间之下。如jQuery.
2017-07-11 11:55:07
1451
转载 简单的分页代码js实现
先看看效果图： 简单的分页js代码: 1、效果描述： 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单，效果很棒 2、调用方法：$(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //单击回调方法，p是当前页码 } }
2017-07-10 20:18:51
8792
原创 JS 之 预解释
1、JS中的内存空间分为两种：栈内存、堆内存栈内存：提供JS代码执行的环境； 存储基本数据类型的值； 全局作用域或私有作用域都是栈内存。堆内存：存储引用数据类型的值 ------ 对象是把属性名和属性值存储进去；
2017-05-03 09:47:02
458
原创 ES6 之 let 和 const 命令
1、let命令 基本用法： ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{ let a = 10; var b = 1;} a // ReferenceError : a is not defined. b // 1for 循环的计数器，就很适合使用let命令。for(let i=0; i<10
2017-05-02 14:43:49
410
原创 Compass简单入门
一、Compass是什么？简单说，Compass是Sass的工具库。 Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。他们之间的关系，有点想JavaScript和jQuery的关系。二、安装Compass是用Ruby开发的，所以在安装它之前，必须安装Ruby。 之后，在命令行模式下输入：#macsudo gem install comp
2017-04-26 14:44:10
2055
原创 JavaScript 中的变量提升
一、案发现场先看一段简单的代码：var v = 'Hello World';alert(v);这个没有疑问，弹出“Hello World”。OK，我们继续。 我们再看一段Code：var v = "Hello World";(function(){ alert(v);})()经过运行后，我们发现，还是和我们预期的一样，弹出了“Hello World”。好了，有意思的来了。接着看一段下
2017-04-25 14:22:44
544
原创 Gulpfile.js 详解
// generated on 2017-04-19 using generator-webapp 2.4.1const gulp = require('gulp');const gulpLoadPlugins = require('gulp-load-plugins'); //自动加载配置文件中的已安装插件const browserSync = require('browser-sync
2017-04-21 15:55:16
2471
原创 前端构建之gulp与常用插件
gulp是什么？http://gulpjs.com/ 相信你会明白的！ 与著名的构建工具grunt相比，有什么优势呢？ 1. 易于使用，代码优于配置 2. 高效，不会产生过多的中间文件，减少I/O压力 3. 易于学习，API非常少，你能在很短的事件内学会gulp那些常用的gulp插件No.1、run-sequenceLinks: https://www.npmjs.com/packag
2017-04-21 14:14:11
749
原创 Canvas 常用API总结
基础部分参见上篇，《Canvas常用语法详解》。 本文的详细参数和例子，参见《玩转html5 画图》：http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html1、绘制矩形 context.fillRect(x,y,width,height) context.strokeRect(x,y
2017-04-20 10:41:47
1784
原创 Canvas常用语法详解
Canvas是HTML5的新增标签，通过创建画布，在画布上创建任何想要的形状。 一、标签原型<canvas width="1000" height="1000" id="demo"> 您的浏览器版本太低，不支持HTML5新增的canvas标签！</canvas> 使用js获取画布，并指定对象<script> var demo = document.getElementById
2017-04-19 10:01:34
1009
1
原创 $.ajax( )、$.getJson( )及JSON格式转换
通过cdn或本地引入jQuery：<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>1、$.ajax( )$(function(){ $('#send').click(function(){ $.ajax({ type: "GET",
2017-04-12 16:57:31
897
原创 Sass语法详解
一、文件后缀名 二、导入 三、注释 四、变量 五、嵌套（Nesting） 六、@at-root 七、混合（Mixin） 八、继承 九、函数 十、运算 十一、条件判断及循环
2017-04-10 17:02:41
1133
原创 SASS入门
一、变量 sass可以定义变量，方便统一修改和维护。//scss style$fontStack: 'Microsoft Yahei';$primaryColor: #333;body{ font-family:$fontStack; color: $primaryColor;}//解析为css//css stylebody{ font-fami
2017-04-10 11:30:55
439
原创 使用Gulp构建前端项目
一、什么是Gulp? Gulp是新一代前端项目构建工具，可以使用Gulp及其插件对你的项目代码（less,sass）等进行编译，还可以压缩你的js和css代码，甚至是压缩你的图片，Gulp仅有少量的API，所以非常容易学习。Gulp使用stream方式处理内容。 Node催生了一批自动化工具，像Yeoman, Bower, Grunt等。
2017-04-07 11:41:57
1580
原创 SASS与SCSS的区别
SASS是对CSS进行自动化的工具，有为CSS添加浏览器前缀，精灵图合图及样式优化等功能。SASS有.sass 和 .scss两种语法。 1、.sass 是一种类Ruby的缩进式语法，对空格敏感，不使用花括号，并且每个属性之间通过换行来分割，如 h1
2017-04-07 10:26:00
2601
原创 使用Node的 express创建项目
使用Node的express创建项目的具体步骤： 1、安装Node,现在Ｎode安装包进行安装即可； 2、安装grunt-cli : 打开cmd，以管理员的身份运行，将grunt-cli安装到全局环境中去。 grunt-cli是grunt的命令行，负责调用同一目录下
2017-04-06 09:58:07
3442
原创 Node-SASS安装
鉴于国内的环境，node-sass实在是太难安装了，可以直接通过淘宝的npm镜像来安装。1.安装cnpm（https://npm.taobao.org/）npm install -g cnpm --registry=https://registry.npm.taobao.org2.在项目文件夹下安装node-sasscnpm install --save-dev node-
2017-04-01 14:47:10
15747
转载 npm install 时总是报phantomjs-prebuilt@2.1.14安装失败
在npm install时总是报如下错误，尝试单独安装：npm install phantomjs-prebuilt@2.1.14 还是报错 Please report this full log at https://github.com/Medium/phantomjsnpm ERR! Darwin 15.0.0npm ERR! argv "/usr/l
2017-04-01 11:55:42
2689
原创 如何将一张960*1280的图片修改为350*345的图片
本次操作是将一张图片调整大小并剪取自己所需的那一部分。1、用PS打开图片，复制图层，原图设为不可见；2、在工具栏选择 矩形工具 ，设置矩形工具的大小 为 350*345； 改变矩形工具的背景颜色与透明度；3、选中图片的图层，Ctrl + T 进行变换 ，其中 Shift + T 进行 等比例变换；4、调整到与 矩形工具同等 宽度或高度时 ，选中图片图层，在工具
2017-03-30 10:27:41
2149
原创 点击自定义按钮弹出百度商桥对话框
在页面中已经成功安装了百度商桥的情况下，想通过点击自定义的按钮来弹出百度商桥的对话框，来达到及时沟通和不使页面跳转的目的。有以下解决方法：1、首先需要把你的按钮添加一个class，例如 加一个 “shangqiao”我要咨询 2、然后在js中引入jquery，添加一个 $(function(){ //点击按钮时判断 百度商桥代码
2017-03-27 17:13:16
12000
2
原创 实现字体滚动效果的标签 <marquee>详解
html标签——可以实现多种滚动效果，无需js控制。使用marquee标签不仅可以滚动文字，也可以滚动图片，表格等，而且使用起来方便快捷。该标签是个容器标签语法：以下是一个最简单的例子：代码如下: Hello, World 下面这两个事件经常用到：onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚
2017-03-27 14:27:29
2242
原创 jQuery 替换元素函数
1.replaceWith( ) 使用括号内的内容替换所选择的内容。 $("#div").replaceWith("这是替换后的内容"); 使用方法如上，将ID为div的元素替换为ID为tt的p元素。 2.replaceAll( ) 将选择的内容替换到括号内的选择器。 $("替换后的内容").
2017-03-27 12:25:57
1599
原创 Yeoman创建项目一直在根目录的问题及解决方案
问题： 在Mac上安装使用 Yeoman创建项目的时候，想把创建的项目放在指定的目录下，却发现项目一直出现在根目录下。对此，网上给出了一个合理的解决办法，可以将项目生成在自定义的文件夹下。解决方案： 在根目录下有个文件叫做”.yo-rc.json”的文件，mac下，在终端进入到根目录，用ls -al命令，可以看得到这个以点开头的文件，然后使用 rm -rf .yo-rc.j
2017-03-26 15:54:56
697
原创 margin重叠问题的解决方案
一、水平方向 水平方向不会发生多个div的margin重叠的现象，不做讨论。二、垂直方向 1、同级关系margin重叠 解决方案：a、float：left | right ; b、display:inline-block; 2、父子关系m
2017-03-24 19:57:25
795
原创 SEO网页中的应用
一、SEO基础知识： SEO原理：搜索网站都有一个搜索引擎数据库，是通过搜索引擎蜘蛛抓取的关键字组成的，每个关键字对应着不同的网址。当一个关键字对应多个网站时，则需要通过关键字优化来提升网站的排名。 SEO分为：SEO白帽和SEO黑帽。 SEO白帽是一种公正的手法，是使用符合主流搜索引擎发行方针规定的SEO优化方法。以下介绍的都是白帽方法。
2017-03-23 15:38:15
445
原创 HTML5 Web存储
一、cookie 存储：这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上，它也可以存储大量的数据，而不影响网站的性能。 数据以 键/值 对存在，web网页的数据只允许该网页访问使用。二、localStorage 和 sessionStorage 客户端存储数据的两个对象为：
2017-03-22 11:45:12
549
原创 web字体文件过大优化方案
使用font-spider[字蛛]对ttf文件进行压缩原理：字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。font-spirder 官网：http://font-spider.org/第一步：先安装好 NodeJS,然后执行：npm install font-spi
2017-03-16 17:00:08
13192
转载 深入理解JavaScript中的立即执行函数(function(){.....})()
文章来源：http://www.jb51.net/article/50967.htm 受益匪浅，非常感谢！javascript和其他编程语言相比比较随意，所以javascript代码中充满各种奇葩的写法，有时雾里看花，当然，能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。( function(){…} )()和( function (){…} ()
2017-03-16 10:40:15
409
原创 jQuery 随笔 之 与其他JS库冲突的解决
jQuery在JS库导入之前；在JS库导入之后 默认情况下，jQuery用$作为自己的快捷方式。 在其他库和jQuery库都被加载完毕后，可以在任何时候调用jQuery.
2017-03-15 16:17:50
437
原创 jQuery实现序列号(序列点)型自动图片轮播
效果图：完整代码如下： 序列号点击型的图片轮播 *{ margin:0;padding:0; } .container{ width:478px;height:286px;border:1px solid #666;position: relative;overflow: hidden; margin:50px auto;font-famil
2017-03-14 18:08:51
974
原创 getComputedStyle与currentStyle获取样式(style/class)
大家都知道，用document.getElementById(‘element').style.xxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式规则信息，如：getComputedStyle(obj,null
2017-03-14 16:07:18
772
原创 React 笔记
HTML模板、JSX、组件、节点、表单、Ajax ReactDOM.render( , document.getElementById('ex
2017-03-13 16:30:26
374
原创 jQuery中animate（）对Firefox无效的解决办法
在使用 animate（）做返回顶部的动画时，会出现对Firefox无效的情况，如：$('body').animate({scrollTop:'0'},500);它对Chrome,IE,Opera 有效，而另一种情况：$('html').animate({scrollTop:'0'},500);则只对Firefox有效。如果需要对所有浏览器有效，则需要将两者结合
2017-03-10 16:51:40
1873
原创 a链接点击出现虚线边框的解决办法
a链接点击出现虚线边框只需要在CSS加入下列样式，即可消除：a{ -webkit-tap-highlight-color:transparent; outline:none; blr:expression(this.onFocus = this.blur());}a:focus{ outline:none;}
2017-03-10 16:49:54
1301
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人