可鱼-CSDN博客

原创前端开发工具sublime text 3

插件：DocBlockr：生成特定格式的函数注释。只要在函数上面一行输入“/**”，按Tab就OK了。Git和GitGutter：项目管理用。Markdown Preview：针对Markdown文件ConvertToUTF8：支持除UTF8外多种编码Emmet：Zen Coding！Package Control：管理插件Color Picker（不是Color Pick）：取色

2015-08-01 12:40:01 716

做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己的经

2015-07-20 15:47:19 748

转载从一个居中方法说起 —— 谈 translate 与相对、绝对定位

方法介绍垂直水平居中是日常前端开发当中一个常见的需求，在支持 CSS3 属性的现代浏览器当中，有一个利用 CSS3 属性的垂直水平居中方法： .center { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%);

2015-07-07 17:22:57 3028

转载 :before和::before的区别

在一次项目中，有一次要用到::selection伪元素，然后开发同学问我，CSS中一个冒号和两个冒号有神马区别？这好像真的是个问题，或许很多前端同学对此都有疑惑，查了些资料，证实了下两个符号的区别，简而言之：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。W3C关于CSS3选择器的规范中有一段描述：A pseudo-element is made of two co

2015-07-07 14:11:29 532

转载 JS（javaScript）的with用法

1初次接触到with用法，是这样一段代码： ?1234567891011function validate_email(field,alerttxt){with (field){apos=value.indexO

2015-07-03 10:09:05 389

转载 js 获取屏幕各种宽高的方法(浏览器兼容)

屏幕的有效宽高：window.screen.availHeightwindow.screen.availWidth网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：documen

2015-07-02 14:09:23 605

转载用Margin还是用Padding

margin和padding的意义相信大家都很清楚，可是在具体应用中，到底应该使用哪一个，就比较难于判断了。这篇文章说得挺清楚的，在这里翻译一下，供参考。何时应当使用margin需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。何时应当时用padding

2015-07-02 10:38:15 358

转载 js闭包的理解

花了三天时间，终于弄清楚闭包的各种写法和注意的事项，以及以前写，经常出错的地方，特此做一个总结，虽然不够专业，但是对于那些初学者来说，绝对对闭包的理解事半功倍。案例一：functionaa(){ varb=10; returnfunction cc(){ b++;

2015-07-02 10:26:20 1126

转载 js中(function(){…})()立即执行函数写法理解

javascript和其他编程语言相比比较随意，所以javascript代码中充满各种奇葩的写法，有时雾里看花，当然，能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法，最初我以为是一个括号包裹匿名函数，再在后面加个括号调用函数，最后达到

2015-07-02 10:23:16 365

转载 HTML DOM innerHTML和write的区别

DOM的innerHTML是DOM元素对象的一个属性而write是document对象的一个方法document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修

2015-06-30 12:40:22 464

转载 HTML在IE中的条件注释

HTML的条件注释在IE5中被首次引入，直到IE9.一直都是简单地判定用户浏览器（IE，非IE，IE版本）的一种手段，而在IE10的标准模式下，条件注释功能被停止支持（兼容性视图下继续有效）！本来一种用来判定用户使用浏览器版本的方法IE10以后反而要依赖于用户所使用的工作模式，缺点被扩大了许多，还在使用这个东东的同学赶紧去改了它吧。。。 IE条件注释是一种特殊的HTML注释

2015-06-30 11:29:08 392

转载 Bootstrap之所以广泛流传的11大原因

前言　　当下最流行的前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢。本文总结了Bootstrap之所以广泛流传的11大原因。如果你还没有使用Twitter Bootstrap，建议你去了解一下。我也是最近才有所发现的，不过有更好的消息，在微软发布的VS2013正式版中，也已经将BootStrap3.0的版本加入了额，连微软都看到bootStrap的强大，而

2015-06-30 11:07:50 710

转载 SASS用法指南

学过CSS的人都知道，它不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专

2015-06-30 10:38:42 386

转载 LESS CSS 框架简介

简介CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，

2015-06-30 10:14:55 297

转载详解js闭包

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。闭包的特性闭包有三个特性：1.函数嵌套函数2.函数内部可以引用外部的参数和变量3.参数和变量不会被垃圾回收机制回收闭包的定义及其优缺点闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访

2015-06-24 22:31:55 324

转载 display:inline-block引发的间隙思考

一、导火线没错，总有一类属性在助你轻松寻得捷径的同时，也可为你增添烦劳，比如本文的主谋display:inline-block。众前端们所诸知，其作用是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。然而不幸的是，它并没有得到所有浏览器的支持，比如ie6、7和古老一点的firefox完全无视它，由于firefox的老版本几乎已经从市场中消失，

2015-06-23 13:31:43 389

转载 nodeName、nodeValue 以及 nodeType

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。(一)nodeName 属性含有某个节点的名称。元素节点的 nodeName 是标签名称属性节点的 nodeName 是属性名称文本节点的 nodeName 永远是 #text文档节点的 nodeName 永远是 #document注释：nodeName

2015-06-18 12:32:24 440

原创 CSS清浮动处理（Clear与BFC）

在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼1 浮动带来布局的便利，却也带来了新问题 1 doctype html> 2 html lang="en"> 3 head> 4 meta charset="UTF-8"> 5 title>Clear floattitle> 6 style t

2015-06-15 15:42:07 368

转载 Javascript 检测键盘按键信息及键码值对应介绍

Javascript中有3个事件句柄在对应键盘的输入状态：keydown、keypress和keyup。分别对应的意思是：按键被按下（按下按键但还没有抬起）、点击按键（按下并抬起按键）、按键抬起（按键抬起之后）按键的分类按键可以分为“实键”和“虚键” 实键可以理解为我们能够看到并打印出来的按键，如字母“A”、数字“1”、字符“?”等等虚键就是那些无法打印出来起到控制作用

2015-06-15 15:28:52 522

原创 jquery禁用右键、文本选择功能、复制按键的实现

//禁用右键、文本选择功能、复制按键 $(document).bind("contextmenu",function(){return false;}); $(document).bind("selectstart",function(){return false;}); $(document).keydown(function(){return ke

2015-06-15 15:26:19 475

转载 jquery判断元素是否有某个属性

在JQuery编码中,我们会判断元素是否存在某个属性.比如是否包含 class="new" 的样式呢.JQuery判断就非常简单了,因为有 hasClass这个方法 $("input[name=new]").hasClass("new") 即可判断.但是有时候我们需要判断别的属性,比如有的 a 链接包含 rel 属性,有的没有rel属性.这时该怎么判断呢?这时就没有现成的方法了. 如果存在某个

2015-06-15 14:56:22 5561 1

转载 jquery parent() parents() closest()区别

parent是找当前元素的第一个父节点，不管匹不匹配都不继续往下找parents是找当前元素的所有父节点 closest() 是找当前元素的所有父节点，直到找到第一个匹配的父节点parent()、parents()与closest()方法两两之间有类似又有不同，本篇简短的区分一下这三个方法。通过本篇内容，大家将会在以后使用.parent()、parents()和clo

2015-06-15 14:42:34 262

转载 jQuery 事件 - change() 方法

定义和用法当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text

2015-06-15 14:20:08 588

转载 jquery中prop()方法和attr()方法的区别

官方例举的例子感觉和attr()差不多，也不知道有什么区别，既然有了prop()这个新方法，不可能没用吧，那什么时候该用attr()，什么时候该用prop()呢jquery1.6中新加了一个方法prop()，一直没用过它，官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled

2015-06-15 12:46:34 247

转载 jQuery中trigger()的使用方法

trigger() 触发事件触发事件就是类似于点击click, mouseover, keydown 等有动作的js事件，简单的说就是一个动作，可能有人会问，那show, hide 是不是? 不是为什么要用 trigger() ？比如：你给一个按钮添加了一个click点击事件，弹出提示框，代码如下。var div = $(“#mybutton”); //你的按钮。

2015-06-14 21:09:29 776

转载浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

前言　　因为项目中经常会有利用jquery操作dom元素的增删操作，所以会涉及到dom元素的绑定事件方式，简单的归纳一下bind,live,delegate,on的区别，以便以后查阅，也希望该文章日后能帮助到园友，文中如有不当之处，还望各位指正，话不多说，直接进入正题。bind()简要描述　　bind()向匹配元素添加一个或多个事件处理器。使用方式　

2015-06-14 00:26:14 348

转载事件绑定on()、bind()与delegate() 方法详解

啃了一段日子的js相关了，学的过程中发现在jQuery中绑定事件时，有人用bind()，有人用on()，有人用delegate()，还有人用live()，看代码的时候觉得都实现功能了也就掀过去了，只是一直没完全弄懂之间的区别，于是今天查了下资料，自己做个总结。之所以有这么多类型的绑定方法，是因为jQuery的版本更新的原因，如on()方法就是1.7以后出现的。jQuery的事件绑定

2015-06-14 00:01:06 783

转载 JQ之 offset 和 position 的用法与区别

offset：获取元素相对于文档（document）的当前坐标注意：使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移。postion：获取元素相对父元素的偏移注意: 1，使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移

2015-06-13 22:11:21 1084

转载 Jquery的val()方法

Jquery的val()方法不仅能够设置元素的值，同时也能获取元素的值。常见的操作是对文本框的操作，比如判断邮箱地址等看下面的一个例子：复制代码代码如下: 代码：复制代码代码如下:$("#address").focus(function(){ // 地址框获得鼠标焦点 var txt_value =

2015-06-13 21:03:16 625

原创移动节点

插入节点的方法（append prepend after before ）还可以对原有的DOM进行移动：无标题文档$(function(){ $("ul").append($("li:eq(1)"));}) 苹果梨子香蕉得到结果：苹果香蕉梨子

2015-06-13 20:48:00 582

转载关于 jQuery，什么叫隐式迭代（implicit iteration）？

举几个例子就明白了。$('.className') 这其实是一个数组集合，并不是直接的DOM元素所以像 $('.className').addClass('newClass')，执行的其实是类似这样的语句$('.className').each(function() {$(this).addClass('newClass');});还有一些例

2015-05-28 09:27:35 762

转载 Eric Meyer css reset

@charset "utf-8";html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,sma

2015-04-27 15:28:58 413

转载常见的WAMP集成环境

WAMP是指在Windows服务器上使用Apache、MySQL和PHP的集成安装环境，可以快速安装配置Web服务器，一般说来，大家都习惯于将Apache、MySQL、PHP架设在Linux系统下，但是，不可否认的是Windows也有其优点，就是易用，界面友好，软件丰富，操作起来非常方面，因此对新手来说在Windows平台下使用Apache、MySQL、PHP也确实是一个不错的选择。下面我将介绍几

2015-04-24 13:49:57 727

zhcscs的博客