分类：WEB开发

2014
11-24

[转载]响应式WEB设计的9项基本原则

响应式Web设计对于解决多类型屏幕问题来说是个不错方案，但从印刷的角度来看，其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸，没有任何物理限制，让人感到无从下手。随着建立网站可用的各种小工具越来越多，像素设计局限于桌面和移动端也已经成为历史。因此，现在就让我们来说明一下如何运用响应式Web设计的各项基本原则来实现，而不是抗拒流畅的网页体验。为了简单起见，我们将着重讲布局。响应式设计vs适应式设... 继续阅读 >
2014
11-23

[转载Javascript实现全选并赋值给文本框代码

   全选的实现非常的简单，只要点击之后进行for遍历checkbox设置为checked即可，了但如果还要赋值简单的升级一下即可，下面来看看。    网上有很多的全选、赋值的js方法，但是没有小编想要的那样的代码，既然今天用到了，就把代码贴出来分享一下。js代码：代码如下<script>functionuncheckAll(){varcode_Values=document.getElementsByName('email');vartem=document.getElementById("t... 继续阅读 >
2014
11-20

流量的大小对网站排名的影响

一个网站在搜索引擎上的排名是由多种因素决定的，其中有一种因素可能最容易被忽视，那就是流量的大小对网站排名的影响!百度了一下，很少有文章来阐述流量对网站排名的影响，搜索结果大多都是在谈网站排名对流量的影响，大概的想一下，其实他们是相互作用的。有了好排名，流量自然就高了，流量高了，排名自然也就好了。。。而站在搜索引擎的角度来看待这个问题，他们可能会更重视非搜索引擎流量的价值。当然，这些可能并不... 继续阅读 >
2014
11-11

js中的trim() _去掉字符串两边的空格

js中去除字符串两端的空格可以用正则表达式来实现：String.prototype.trim=function(){returnthis.replace(/(^\s*)|(\s*$)/g,"");}当然用法很简单，varstr="Hi,MyNameisWater!";str.trim();当然也可以自己写一个函数用，或者有些人会习惯这样：functiontrim(stri){returnstri.replace(/(^\s*)|(\s*$)/g,"");}varstr="Hi,MyNameisWater!";trim(str); ... 继续阅读 >
2014
11-11

jQuery中ajax post的使用

jQuery.post(url, [data], [callback], [type])概述通过远程HTTPPOST请求载入信息。这是一个简单的POST请求功能以取代复杂$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。参数url,[data],[callback],[type]String,Map,Function,StringV1.0url:发送请求地址。data:待发送Key/value参数。callback:发送成功时回调函数。type:返回内容格式，xml,html,script,json,text,... 继续阅读 >
2014
11-11

js中字符串常用判断方法大全

functionobj$(id)根据id得到对象functionval$(id)根据id得到对象的值functiontrim(str)删除左边和右边空格functionltrim(str)删除左边空格functionrtrim(str)删除右边空格functionisEmpty(str)字串是否有值functionequals(str1,str2)js判断比较两字符串是否相等functionequalsIgnoreCase(str1,str2)js判断忽略大小写比较两个字符串是否相等functionisChinese(str)js判断判断是否中文functionisEmail(strEmai... 继续阅读 >
2014
11-11

js将输入的中文逗号自动转化为英文逗号

在处理表单输入标签tags的时候经常会遇到几个标签之间的分隔符问题，一般都会使用英文逗号，但是处理中文输入的时候切换中英文输入很麻烦，所以需要在客户端输入的时候通过js将中文逗号切换成英文逗号，这样既方便后台处理也方便前台的友好输入，主要原理就是js捕捉输入中文逗号输入事件，然后对字符串进行处理，如果输入的是中文逗号则将其转化为英文逗号。废话不多说，直接贴出代码如下：<inputtype="text"name="tags"onKey... 继续阅读 >
2014
11-11

js仿淘宝在分页导航中实现跳转到指定分页功能

淘宝网搜索结果页分页导航右侧跳转到指定分页的效果是这样的：在输入框没有获取焦点之前，界面是这样的：在输入框获取焦点之后，界面呈现是这样的：其实只要用js就可以实现这样的效果，代码如下：$("#gotoBtn").hide();$("#pageNumber").on("focus",function(){$("#gotoBtn").show();$("#gotoBtn").attr({'style':'margin-left:0px;'});});$("#gotoBtn").on("click",function(){varnumber=parseInt($("#pageN... 继续阅读 >
2014
11-11

可以尝试用Google Font API来摆脱网页字体的单调

在网页设计里，字体的显示是个问题。最普遍用的是宋体，但是宋体在Win7下的表现真的很难看。雅黑端庄一些，但是随着字体大小，感觉汉字的大小也会有区别。小站现在用的字体是是宋体+Arial/Georgia，因为习惯了也没多在意，其实对于英文字体有其它更好的选择。比如Bitter字体，用来做标题倒是不错：<divstyle="text-align:center;font-size:24px;font-family:Bitter;">WelcomeToNowaMagic.net</div>CSS怎么调用Bi... 继续阅读 >
2014
11-11

利用响应式技术构建大规模社区网站

移动化是未来大趋势，做任何互联网项目都必须将移动战略放在一个很重要的位置上，对于回声来说也不例外。尽管回声现阶段仍然以文字为内容主要载体，也必须充分考虑到移动端的使用场景和体验。一般来说，社区网站的移动化策略有三种：1)开发并提供原生的app；2)制作专门的移动版网站，也就是Webapp；3)采用响应式技术，用一套代码、一个网站来适配不同的终端。我们权衡再三，最后选择了采用响应式设计技术。响应式设计是最近... 继续阅读 >
2014
11-11

JavaScript中变量的存储方式

基本原理前面文章提到过，在js中变量包括5中基本类型以及一个复杂数据类型Object，当然常用的函数和数组都是对象。对于基本类型和复杂类型，对应着两种不同的存储方式–栈存储和堆存储。为什么要实现两种存储方式的理由很简单，就是基本类型一旦初始化则内存大小固定，访问变量就是访问变量的内存上实际的数据，称之为按值访问。而对象类型说不定什么时候就会增加自身的大小，内存大小不固定。比如动态添加对象的属性、动态增加数... 继续阅读 >
2014
11-11

js去掉字符串前后空格的五种方法

第一种：循环检查替换//供使用者调用functiontrim(s){returntrimRight(trimLeft(s));}//去掉左边的空白functiontrimLeft(s){if(s==null){return"";}varwhitespace=newString("\t\n\r");varstr=newString(s);if(whitespace.indexOf(str.charAt(0))!=-1){varj=0,i=str.length;while(j<i&&whitespace.indexOf(str.charAt(j))!=-1){j++;}str=str.substring(j,i);}returnstr;}//去掉右边的空白func... 继续阅读 >
2014
11-11

js中的正则表达式(一)

字符含意\做为转意，即通常在"\"后面的字符不按原来意义解释，如/b/匹配字符"b"，当b前面加了反斜杆后/\b/，转意为匹配一个单词的边界。-或-对正则表达式功能字符的还原，如"*"匹配它前面元字符0次或多次，/a*/将匹配a,aa,aaa，加了"\"后，/a\*/将只匹配"a*"。^匹配一个输入或一行的开头，/^a/匹配"anA"，而不匹配"Ana"$匹配一个输入或一行的结尾，/a$/匹配"Ana"，而不匹配"anA"*匹配前面元字符0次... 继续阅读 >
2014
11-11

js中的正则表达式(二)

正则表达式对象的属性及方法预定义的正则表达式拥有有以下静态属性：input,multiline,lastMatch,lastParen,leftContext,rightContext和$1到$9。其中input和multiline可以预设置。其他属性的值在执行过exec或test方法后被根据不同条件赋以不同的值。许多属性同时拥有长和短(perl风格)的两个名字，并且，这两个名字指向同一个值。(JavaScript模拟perl的正则表达式)正则表达式对象的属性属性含义$1...$9如果它(们... 继续阅读 >
2014
11-11

javascript正则表达式检验

/**********************************************************************************EO_JSLib.js*javascript正则表达式检验**********************************************************************************///校验是否全由数字组成functionisDigit(s){varpatrn=/^[0-9]{1,20}$/;if(!patrn.exec(s))returnfalsereturntrue}//校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串func... 继续阅读 >
2014
11-11

正则表达式在javascript中的几个实例

!去除字符串两端空格的处理如果采用传统的方式,就要可能就要采用下面的方式了//清除左边空格functionjs_ltrim(deststr){if(deststr==null)return"";varpos=0;varretStr=newString(deststr);if(retStr.lenght==0)returnretStr;while(retStr.substring(pos,pos+1)=="")pos++;retStr=retStr.substring(pos);return(retStr);}//清除右边空格functionjs_rtrim(deststr){if(deststr==null)return"";varr... 继续阅读 >
2014
11-11

正则表达式在JavaScript应用

--------------------------------------------------------------去掉字符串头尾多余的空格/g是全文查找所有匹配functionString.prototype.Trim(){returnthis.replace(/(^\s*)|(\s*$)/g,"");}functionString.prototype.LTrim(){returnthis.replace(/(^\s*)/g,"");}functionString.prototype.RTrim(){returnthis.replace(/(\s*$)/g,"");}--------------------------------------------------------------应用：计... 继续阅读 >
2014
11-11

用正则表达式和javascript对表单进行全面验证

使用时请将下面的javascript代码存到一个单一的js文件中。1、表单要求<formname="formname"onSubmit="returnvalidateForm(this)"></form>将对表单中的所有以下类型的域依次验证，所有验证是去除了前导和后缀空格的，要注意是区分大小写的。2、空值验证表单中任意域加上emptyInfo属性将对此域是否为空进行验证（可以和最大长度验证\一般验证方式同时使用）。无此属性视为此域允许空值。如：<inputtype="text"name="fiel... 继续阅读 >
2014
11-11

jQuery中使用trigger触发click事件失效的解决办法

今天在处理jquery根据cookie是否存在而使用trigger触发元素的click事件的时候遇到这个问题，各种调试都没能找出引起问题的原因所在，后来在stackoverflow中搜索到相关问题，并用其所提到的原因解决了这个问题。整理英文原版如下：question：I'mfiguringoutwhythissimplescriptisnotworking:jQuery.noConflict();jQuery(document).ready(function(){jQuery('.next_buttona').trigger('click');});noConflict&nb... 继续阅读 >
2014
11-11

png、jpg、gif三种图片格式的区别

为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如... 继续阅读 >
2014
11-11

a标签触发onclick事件而不跳转

在web页面开发时，我们经常会遇到下列情况：1.一个标签仅仅是要触发onclick行为；2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果。比如执行删除操作时，为了避免误操作，我们要弹出对话框让用户确定是否删除。因此我们经常会用链接<a></a>形式代替<button>触发onclick事件。代码如下：<scripttype="text/javascript">functiondel(){if(confirm("确定删除该记录？")){parent.window.location="执行删除... 继续阅读 >
2014
11-11

浅析jQuery删除节点的三个方法

jQuery提供了三种删除节点的方法，即remove()，detach()和empty()。测试所用HTML代码：<ptitle="选择你最喜欢的水果？">你最喜欢的水果是？</p><ul><lititle="苹果">苹果</li><lititle="橘子">橘子</li><lititle="菠萝">菠萝</li></ul>1、remove()方法$("ulli").click(function(){alert($(this).html());});var$li=$("ulli:eq(1)").remove();$li.appendTo("ul");当某个节点用remove()方法删除后，该节点所包含的所... 继续阅读 >
2014
11-11

jQuery如何阻止事件冒泡

条件：外层有一个DIV元素，在内层有一个P元素，存在这样的关系:DIV是P元素的父元素，而P是外层DIV的子元素，他们之间存在包含和被包含的关系。事件：现在我们都在这两个元素上绑定相同的事件，比如click事件。结果：这时，当我们点击内层的P标签的时候，内层元素的click事件触发，同时外层DIV的click事件也会触发。JQuery提供了三种方式来阻止事件冒泡。方式一：event.stopPropagation();方式二：event.preventDefault();方... 继续阅读 >