huoniu007的专栏

原创 jquery 只能输入数字和小数

baseclearNoNum:function(obj){obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符  obj.value = obj.value.replace(/^\./g,"");  //验证第一个字符是数字而不是. obj.value = obj.value.replace(/\.{2,}/g,

原创 jquery 身份号码验证

var idCardNoUtil = {provinceAndCitys: {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",4

原创 css中单位px、pt、em和rem的区别

国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？px ：像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)px 特点：1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3

原创 实现html页面的参数传递

做中英转换的时候，要准确的获取参数并取出，所以做了一个简单的html中用js获取当取地址栏的一个Object。 里面有三个方法： 1、request.QueryString("参数")//获取指定参数，返回字符串; 2、request.QueryStrings();//获取全部参数，并返回数组; 3、request.setQuery("参数","参数的值");//如果当前地址栏有此

原创 js冒泡、捕获事件及阻止冒泡方法详细总结

javascript, jquery的事件中都存在事件冒泡和事件捕获的问题，下面将两种问题及其解决方案做详细总结。 事件冒泡是一个从子节点向祖先节点冒泡的过程； 事件捕获刚好相反，是从祖先节点到子节点的过程。 给一个jquery点击事件的例子： 代码如下：   test    $(function(){ $('#clickMe

原创 JavaScript Array 对象

Array 对象属性属性描述constructor返回对创建此对象的数组函数的引用。length设置或返回数组中元素的数目。prototype使您有能力向对象添加属性和方法。Array 对象方法方法描述concat()连

原创 javascript中concat()、slice()、substr()和substring()字符串方法

方法一，concat()，用于将一或多个字符串拼接起来，返回拼接得到的新字符串。先看一个例子：var stringValue = "hello "var result = stringValue.concat("world");alert(result); //"hello world"alert(stringValue); //"hello"通过strin

原创 js数组去除重复方法添加

试题：有这样一个数组，成员都是数字，例如var a = [1,2,3,4,5,2,3,4,6,7,8];请实现a.distinct()方法，用来给数组a去掉重复值，要求对Array的原型进行扩展方法，并尽可能做到效率最优。考察点：1，考察应试者是否理解原型链2，考察应试者是否由意识的控制算法的时间复杂度，了解应试者对专业课知识的掌握程度3，考察应试者对js数组函数的

原创 js中prototype与Property的用法区别

prototype为类型（函数）定义动态的属性和方法，而Proerty为类型定义“静态”的属性和方法。例子一(JavaScript中允许添加行为的类型)：可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。 JS中允许的类型有Array, Boolean, Date, Enumerator, Error, Function, Number, Objec

原创 js中的hasOwnProperty和isPrototypeOf方法

hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。isPrototypeOf是用来判断要检查其原型链的对象是否存在于指定对象实例中，是则返回true，否则返回false。function siteAdmin(nickName,siteName){     

原创 视频 音频兼容

原创 两种 HTTP 请求方法：GET 和 POST

比较 GET 与 POST下面的表格比较了两种 HTTP 方法：GET 和 POST。 GETPOST后退按钮/刷新无害数据会被重新提交（浏览器应该告知用户数据会被重新提交）。书签可收藏为书签不可收藏为书签缓存能被缓存不能缓存编码类型

原创 背景透明，文字不透明全兼容方案

DOCTYPE html>html>head>meta charset="utf-8">title>背景透明，文字不透明title>style>*{ padding: 0; margin: 0;}body{ padding: 50px; background: url(img/bg.png) 0 0 repeat;}.demo{ padding:

原创 CSS3 经典教程系列：CSS3 线性渐变（linear-gradient）

CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，主要有 Mozilla（Firefox，Flock等）、WebKit（Safari、Chrome等）、Opera（Opera浏览器）、

原创 css3动画模块transform transition animation属性解释

首先来看下对各大浏览器的兼容性 IEFirefoxSafariChromeOperaCSS 2D Transformno3.53.22.010.5CSS 3D Transformnono4.* (Mac)nono

原创 JavaScript版几种常见排序算法

说明写这个主要是为了锻炼自己，并无实际意义。每个浏览器测试得出的数据会不一样。比如我用chrome 测试 一般快速排序都会最快，IE 则根据数组长度有可能希尔最快。不要用太大数据去测试冒泡排序(浏览器崩溃了我不管)如果有兴趣可以 在线排序动画  下载测试页面个人理解冒泡排序：最简单，也最慢，貌似长度小于7最优插入排序： 比冒泡快，比快速排序和希尔排序慢，较小数据有优势快速排

原创 jquery append appendTo before after insertAfter insertBefore prepend prependTo用法区别

after()在匹配的元素之后插入内容。$("button").click(function(){ $("p").after("Hello world!");});结果：This is a paragraph.Hello world!before()在每个匹配的元素之前插入内容。$("bu

原创 js中几种实用的跨域方法原理详解

对于端口和协议的不同，只能通过后台来解决。js中几种实用的跨域方法原理详解这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。下表给出了相对http://store.company.com/dir/page.ht

原创 js闭包是什么？

我初次接触“闭包”时，看了很多资料，总是无法理解，因为一些文章写得太“学术化”，虽然措辞非常严谨，但是对初学这来说，太难理解了。自从看到这篇文章，我的眼前“豁然开朗”一、什么是闭包？“官方”的解释是：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。相信很少有人能直接看懂这句话，因为他描述的太学术

原创 js onerror的用法

onerror=handleErrvar txt=""function handleErr(msg,url,l){txt="本页中存在错误。\n\n"txt+="错误：" + msg + "\n"txt+="URL: " + url + "\n"txt+="行：" + l + "\n\n"txt+="点击“确定”继续。\n\n"alert(txt)r

原创 js 数组排序

function sortNumber(a, b){return a - b}var arr = new Array(6)arr[0] = "10"arr[1] = "5"arr[2] = "40"arr[3] = "25"arr[4] = "1000"arr[5] = "1"document.write(arr + "")docum

原创 js 设置读取cookie

function getCookie(c_name){if (document.cookie.length>0){ c_start=document.cookie.indexOf(c_name + "=")if (c_start!=-1){ c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf

原创 JS 数字格式千分位相互转换

/** * 数字格式转换成千分位 *@param{Object}num */function commafy(num){   if((num+"").Trim()==""){      return"";   }   if(isNaN(num)){      return""; 

原创 JS 页面加载触发事件 document.ready和onload的区别

document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件：一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；二是onload，指示页面包含图片等文件在内的所有元素都加载完成。 1、Dom Ready用jQ的人很多人都是这么开始写脚本的： $(function(){    

原创 简单的九宫格布局

一、效果图：二、布局一（IE6下兼容有问题）01<!DOCTYPE html>020304<meta charset="utf-8">05九宫格

原创 js 数组去除的几种方法

面试前端必须准备的一个问题：怎样去掉Javascript的Array的重复项。据我所知，百度、腾讯、盛大等都在面试里出过这个题目。 这个问题看起来简单，但是其实暗藏杀机。 考的不仅仅是实现这个功能，更能看出你对计算机程序执行的深入理解。    我总共想出了三种算法来实现这个目的：Array.prototype.unique1 = function(){ var n = []

原创 CSS左侧固定宽 右侧自适应（兼容所有浏览器）

左侧固定宽，右侧自适应屏幕宽；左右两列，等高布局；左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）要求不用JS或CSS行为实现；仔细分析试题要求，要达到效果其实也并不是太难，只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事： 左边固定，右边自适应布局，这个第一点应该来说是非常的容易，实现的方

原创 js 基础

JavaScript 数据类型1,字符串、数字、布尔、数组、对象、Null、Undefined2,极大或极小的数字可以通过科学（指数）计数法来书写：实例var y=123e5; // 12300000var z=123e-5; // 0.001233,var person={firstname : "Bill",l

原创 CSS各种居中方法

水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响，否则一切都是无用功。margin:0 auto也可以被写成margin:0 auto 0 auto。不能理解的童鞋们可以自己去找找关于css缩写的内容。

原创 前端web开发的MVC模式 - 从一个简单实例讲起

MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架：model模型是理解成服务器端的模块程序；view为发送给客服端的内容；control为servlet程序控制跳转和工作流。随着前端Ajax兴起、前端开发工作进一步划分：js程序员和ue页面制作、另外从整个前端项目的清晰明朗以可扩展性角度来看，MVC的应用也越来越必要，特别是对大的项目。

原创 Web语义化

1.结构更好，更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高，因为结构清晰,so易于阅读)。 HTML的每个标签都有其特定含义（语义），Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。

原创 史上最全前端面试题(含答案)

HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；2.xhtml和html有什么区别HTM

原创 H5规范

lang="zh-CN"> Page title charset="UTF-8"> http-equiv="X-UA-Compatible" content="IE=Edge"> rel="stylesheet" href="code-guide.css"> src="code-guide.js"> c

原创 常用正则表达式

匹配中文字符：[\u4e00-\u9fa5]匹配双字节字符(包括汉字在内)：[^\x00-\xff]匹配空白行：\n\s*\r匹配Email地址：[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?匹配网址URL：[a-zA-z]+://[^\s]*

原创 JS 中面向对象的5种写法

//第1种写法function Circle(r) {      this.r = r;}Circle.PI = 3.14159;Circle.prototype.area = function() {  return Circle.PI * this.r * this.r;}var c = new Circle(1.0);   alert(c.area

原创 一个密码复杂度的验证js

在项目开发中，要求密码进行复杂度限制，现帖出来跟大家做个分享。密码复杂要求：1、长度大于8         2、密码必须是字母大写，字母小写，数字，特殊字符中任意三个组合。 代码如下：function checkPass(pass){   if(s.length             return 0;  } var ls = 0; if(s.

原创 webfont应用系列 如何制作图标字体？

最近在评估font-face是否可以用在邮箱的实际开发中，第一步就是做矢量图标（字体图标要矢量），如何把位图图标转为矢量？1、用PS转为纯色：PS打开图标，上色（黑色），如果原图不是纯色，则需注意对边缘的处理。 图一、用PS把图标处理成纯色2、以eps格式导出：另存为，格式选择EPS。 图二、以EPS格式导出3、用AI

原创 CSS3 @font-face

首先我们一起来看看@font-face的语法规则： @font-face { font-family: YourWebFontName>; src: source> [format>][,source> [format>]]*; [font-weight: weight>]; [font-style: style>]; }取

原创 css em弹性布局

元素自身没有设置字号大小时，元素的width、height、line-height、margin、padding、border等值转换都按下面公式转换：1 ÷ 父元素的font-size × 需要转换的像素值 = em值我们来看一个实例： test 我们在body默认字体大小为“16px”,此时需要“div#wrapper”的相关参数值为：

原创 myeclipse 2014 发布项目注意的问题