li_shanshan_ok的专栏

转载 ie6兼容性

1、终极方法：条件注释 这段文字仅显示在 IE6及IE6以下版本。 这段文字仅显示在 IE6及IE6以上版本。 这段文字仅显示在 IE6以上版本（不包含IE6）。 这段文字仅显示在 IE5.5。 缺点是在IE浏览器下可能会增加额外的HTTP请求数。 2、CSS选择器区分 IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后

转载 js判断浏览器类型及版本

在网站前端开发中，浏览器兼容性是前端开发框架要解决的第一个问题，要解决兼容性问题就得首先准确判断出浏览器的类型及其版本，而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道.各种浏览器的userAgent:IE各个版本典型的userAgent如下Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)Mozilla/4.0

转载 JS去除重复字符串

方法一：   通常就是把字符串分割成数组，再对数组操作。       var str ="aabdeegdcffdsf",       result = [],       tempStr = "";    var removeDuplicate =function ( str ){       var arr = str.split('');//把字符串分割成数组

转载 背景图片拉伸

现在WEB页面设计比较流行使用大背景图，那么您知道如何使用一张大背景图进行拉伸效果呢？也就是说使用一张固定尺寸的背景图片，让它在页面中随着浏览器尺寸进行拉伸，就像我们的电脑桌面壁纸效果。本文将带您一起使用jQuery和CSS实现背景图片拉伸效果。查看演示DEMO将背景图片拉伸，而不是平铺，注意平铺效果我们可以使用CSS的background-repeat来实行背景图片的平铺效果，本

转载 清除浮动

css清除浮动大全，共8种方法清除浮动 是每一个 web前台设计师 必须掌握的机能。 为什么浮动这么难？因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。 解决浮动引起的问题有多种方法，但有些方法在浏

转载 Modernizr：为HTML 5和CSS3而生

Modernizr：为HTML 5和CSS3而生2011-03-22 08:54 堂主 HTML5研究小组 字号：T |TModernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。AD：51CTO学院：IT精品课程在线看！10年前，只有最尖端的网站设计师会为网页的布局和修饰

原创 javascript中的this

1.var name = "Bob"; var nameObj ={ name : "Tom", showName : function(){ alert(this.name); }, waitShowName : function(){ setTimeout(this.showNa

转载 ECMASCRIPT5新特性

Function 1: Object.create这是一个很重要的改动，现在我们终于可以得到一个原型链干净的对象了。以前要创建一个类 Js代码  function Cat(name) {      this.name   = name;                                                        

转载 精通Css伪类

有了css的伪类,网页的交互更加丰富,实现也更加简单.逐渐这些本来是js干的事,css慢慢掺和进来.而且实现很简单,我们当然会选择后者.我们已经熟悉了一些原始时代就存在的伪类,比如:link,:visited,:active,:focus,:hover等在这里只简单提一下::link 未被访问的链接:visited 已被访问的链接:hover 鼠标直于上方:active 一个元

转载 W3C下的冒泡和捕获机制。到底是冒泡呢。还是捕获呢。一个DOM元素绑定多个事件时如何执行。

首先冒泡和捕获是怎么一回事。简单点说。冒泡就是从下往上，像鱼吐泡，泡泡是从下往上升的，也就是DOM元素被触法事件时(此时的dom元素为目标元素)，目标元素事件执行后，它的祖先元素所绑定的事件会向上顺序执行。如下代码，有四个div嵌套元素，均绑定了click事件，addEventListener函数的第三个参数设置为false说明不为捕获事件，即为冒泡事件。该代码执行结果如下：点击one

转载 JavaScript作用域

1.作用域JavaScript的作用域与C、Java等语言不同，它不是以花括号包围的块级作用域，这个特性经常被大多数人忽视。例如下面代码，在大多数类C的语言中会出现变量未定义的错误，但在JavaScript中却完全合法：if (true) {    var msg = 'msg';}console.log(msg); // 输出 msg;复制代码这是因为

转载 js异步加载的三种解决方案

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。(1) defer，只支持IEdefer属性的定义和用法（我摘自w3school网站）defer 属性规定是否对脚本执行进行延

转载 href="#"和href="javascript:void(0)"

"＃"包含了一个位置信息默认的锚点是＃top 也就是网页的上端而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首而Javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)或者等打开新窗口链接的几种办法1.window.open('url')2.用自定义函数 

原创 css3 width属性的calc()及box-sizing

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦

转载 css3 display:box

display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-web

转载 css水平垂直居中

利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。1Line-Height Method试用：单行文本垂直居中，demo代码：html

转载 Javascript跨域访问解决方案

什么是跨域1、document.domain+iframe的设置2、动态创建script3、利用iframe和location.hash4、window.name实现的跨域数据传输5、使用HTML5 postMessage6、利用flash本文来自网络（http://f2e.me/200904/cross-scripting/，该网址已不能访问），仅作个人读书笔记之用，并稍作修改和补充。

原创 试做前端笔试题

1.实现如下图所示的布局，要求：sidebar 固定宽度200px，content和header宽度自适应；当window宽度小于600px时，变成三行布局。默认如下宽度小于600px时如下下面是html结构： class='header'> header class="sidebar> ">sidebar" class="content

转载 web前端笔试

java1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20　　1  var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;2reg.test("a1a__a1a__a1a__a1a__");

转载 前端学习书籍推荐

WEB前端研发工程师，在国内算是一个朝阳职业，这个领域没有学校的正规教育，大多数人都是靠自己自学成才。本文主要介绍自己从事web开发以来（从大二至今）看过的书籍和自己的成长过程，目的是给想了解JavaScript或者是刚接触JavaScript的朋友，介绍如何通过循序渐进的看书来学习javascript。  一。 入门级 ：就是有一定的基础（比如最常见的HTML标签及其属性、事件、方法;最

转载 sublime text2快捷键

一个好的编辑器，能大大提高编程的效率。如果能熟知软件的快捷键，那更能让你得心印手。这些内容都是我网上和自己实际使用过程中所收集而来的，在网络上应该也算比较全面的了吧。欢迎大家补充，我也会在以后慢慢添加上来。插件使用方法：Ctrl+Shift+P 调用命令面板，我们就会找到一些以“Package Control:”开头的命令，我们常用到的就是几个 Install Package (安装扩展)、L

原创 图片间断滚动---jQuery插件bxCarousel

BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件，特征主要有：Ø  可以指定显示的元素数Ø  可以指定每次滚动元素数Ø  自动播放模式Ø  前一张/后一张按钮控制图片流动 下面我看两个BxCarousel的Demo         DEMO One 控制左右滚动Jquery代码$(document).ready(fu

原创 图片的无缝滚动

js替代marquee实现图片无缝滚动可能大家都碰到过，当marquee中滚动的是图片的时候，滚到终点的时候直接就跳回到起点了，而不像文字那样可以无缝滚动，下面介绍的是通过js来实现图片的无缝滚动。先了解一下下面这几个属性：innerHTML:     设置或获取位于对象起始和结束标签内的 HTMLscrollHeight:     获取对象的滚动高度。scrollLe

转载 html之marquee详解

该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核，所以如果你使用非IE内核浏览器(如：Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法：以下是一个最简单的例子：代码如下:Hello, World 下面这两个事件经常用到：onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动onM

原创 canvas 合成globalCompositeOperation

转载 javascript闭包

closure被翻译成“闭包”，感觉这东西被包装的太学术化。下面参考书本和网上资源简单探讨一下（理解不当之处务请留意）。1、什么是闭包官方的回答：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。看了上面的定义，如果你不是高手，我坚信你会和我一样愤怒的质问：这tmd是人话吗？要理解闭包，还是代码最有说服力啊，上代

原创 笔记

1.ie7 渲染模式X-UA-Compatible X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。由于当下 IE6 和 IE7 使用率依然较高，综合考虑，启用 IE8 版本的 X-UA-Compatible 兼容模式显得相当重要。各种兼容模式代码示例如下：像是使用了 Windows Internet

转载 jquery position

在给元素定位之前，我们首先要了解一些CSS定位相关的知识。 在CSS中关于定位的内容是：position:relative | absolute | static | fixed 。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-inde

原创 jquery ui dialog (buttons),progressbar

buttons 显示一个按钮，并写上按钮的文本，设置按钮点击函数。默认为{}，没有按钮。$("#dialog").dialog({ bgiframe:true, autoOpen:false, modal:true, buttons:[ { text:"追加", click:function(){ $("").append(

转载 jquery ui effects

jQuery ui 内置了一组effects，包括：blind，bounce，clip，drop，explode，fade，fold，highlight，pulsate，puff，scale，size，shake，slide，transfer这些效果这些effect可以通过$("selector").effect(effect,[option],[speed],[callback]

原创 学习笔记

元素可提供有关页面的元信息。必需属性content：定义与http-equiv或name属性相关的元信息。可选元素http-equiv：值content-type/expires/refresh/set-cookie，把content属性关联到HTTP头部。                name：值author/description/keywords/generator/revis