js修改标签内内容(上)

最近几天做页面,跟表单设计制作打交道很多,很多页面的表单格式都很简单,其中,在设计初期,有些效果未添加,而后期需要增加这些效果,于是面对大量的input标签,修改起来也出现了困难,具体情况待我细说.

比如原始的代码大部分格式是这样的:

<html>
<head>
</head>
<body>
<form>
<input type="text" />
</form>
</body>
</html>

而,后来有需求说,需要添加一个效果,当光标进入输入框时,会出现比如输入框边框颜色变化,输入框背景颜色变化的效果,当然,如果这仅仅是修改其中这一个输入框的效果,那么方法很多,其中最简单的方法可能可以这样写:

<html>
<head>
</head>
<body>
<form>
<input type="text" onBlur="this.style.backgroundColor='#ffffff'" onMouseUp="this.style.backgroundColor='#fffab5'" />
</form>
</body>
</html>

是的,大概就是这样,但是如果有很多页面,有很多input标签,难道一个个这样加,虽然我不是很会js,但是我感觉应该可以直接修改input标签内的内容,更多的是通过获取某个ID,并通过setAttribute()修改某个属性的值,然后事实并不是这样的.也不知道是不是我代码写错了,还是什么的,无论是用setAttribute(属性,值)还是setAttribute(属性,函数),效果都无法实现,当然,这里是为了测试才使用ID的,既然无法实现,则采取另外一个思路,直接通过getElementsByTagName()方法,对于这个方法,可以方便的修改所有input标签的属性,即getElementsByTagName(“input”),当然,首先是需要遍历当前页面的所有input标签,然后一个个进行修改,之前,我试了很多次,可能是由于代码规范问题,因为我还没有系统的学习js,或者可能是种种原因,弄了一晚上没弄好,最后还Anfy同学的帮助下,解决了这个问题,由于时间关系,今天暂时写这些,明天把这个简单的小例子写出来,分析,同时也是为了方便以后查阅,举一反三!

正则表达式学习总结(表单验证)

前一阵子,每天忙着做公司的电子商务网站的前台,对我来说也是一个很大的挑战,由于某些原因程序员离职,最后公司找了一个兼职程序员,这可苦了我~一向做前台只管设计图纸和HTML的我需要自己弄js了,也怪我不争气,早就说了把js掌握,可是到现在都没搞好,还是个看得懂却写不出的水平.

这次电子商务网站首先从用户注册开始写起,之前做过博客制作项目,不过当时是公司程序员做了很多js,那时我也就万事大吉了~现在看到注册页面,首先表单不熟悉的我就是悲剧,这个要动态验证用户注册时填写的是否正确可是让我忙碌了许多天,也头疼了许多天,当然在此先感谢前几天热心帮助我的大师丁同志.于是乎,今天也是闲着,细致了看了关于正则表达式的基本用法,受益匪浅,学习过程中像小熊同志(最近研究PHP)问了下,也给我带来了不少帮助,不过他说PHP的正则表达式跟这个我看的js有区别,这下我又晕了,不管,总之大同小异. 其实本来表单验证的正则表达式网上是有很多的,但是不够灵活,不具复制性,下面,我将以我自己学习的结果举几个例子.

  1. 验证手机号码(大陆): 我是这样写的: ^(\(\+86\)?)|(\+86)?(13[0-9]|15[0|3|6|7|8|9]|18[8|9])\d{8}$ 首先在input内的文本输入框有个默认的value=”(+86)”或者没有都不影响最终验证,并且,它能够验证当前国内的手机号码是否符合,当然同样国际手机号码的格式可以这样写 \+/d{2,4}/d{8,11} 这里需要说明的是,它分为两个部分,第一部分\+/d{2,4}为国家区号长度为最小长度2,最大长度4,后面同理号码最小长度6,最大长度11.
  2. 验证网站地址: 网上大多比较简陋,比如: [a-zA-z]+://[^/s]* ,这个明显存在很大问题,如果用户输入 what://baidu 他是可以通过验证的,有谁见过这样的网址?当然准确的说,http://可写可不写,因为ftp://和https://一般不是默认域名.我则是这样处理的,input文本输入框默认值value=”http://”,而表达式是我是这样写的: ^(http\:\/\/)?([a-zA-Z]{0,63}\.)?[-a-zA-Z0-9]{0,63}\.[a-zA-Z]{2,3}$ 这个对于whidy.net,www.whidy.net,http://whidy.net,http://www.whidy.net都是OK的,对于网站域名最大长度保守的来说我就设定为最大63,我想没有谁会申请这么长的域名了: ),,,而对于网址的结尾,则做了最小长度为2,最大长度为3的限制,域名一般没有长度为1或者大于3的.那么这样相对来说就很严格,用户哪里有输入错误,可以方便的检测出来~

看了这两个例子之后,大家可以尝试在其他表单验证,根据自己需求来写.对于正则表达式的熟练使用还是相当重要的! 最后,我分享几个有关资源,大家可以用来学习测试(一下资源均来自互联网,仅供学习参考使用,不可用于商业用途.嘻嘻~)

  1. 正则表达式系统教程
  2. 正则表达式验证小工具:RegexTester.exe 简要说明:在Regex输入框内输入规则后,在Resource内输入你要验证的内容,最后按F5,查看Matches框内的验证结果~示例如图:

    Regex Tester
    Regex Tester
  3. 一个别人写的,不错,当然看到后面也比较费力,大家有兴趣也可以看看 http://deerchao.net/tutorials/regex/regex.htm

Dreamweaver CS5 新功能学习有感

一早起床,实在想不出来做什么了,于是看了看上次没看完的Adobe Dreamweaver CS5 新特性视频教程,可能我下载的不够完整,教程一共11个视频,每个视频看后都觉得大有惊喜,那么我挑几个我认为很有帮助的简单说一下

  1. 禁用/启用CSS属性:
    这个主要是在
    (点击图片可放大)

    禁用/启用CSS属性
    禁用/启用CSS属性

    这里可以更加方便的将某个标签的CSS属性比如途中是font-size,(点击图中其中任意箭头指向的地方)禁用查看效果,我想这个功能也许会在有时遇到某些莫名其妙的问题中通过排除法更快的解决,功能比较类似chrome里面的”审查元素”将某个CSS属性关闭或开启,总而言之,这个将会在web设计中起到很大的帮助作用,具体用法还需大家多多实践~

  2. 检查:
    当你需要编辑某个标签时,通过该功能可以直观的查看他的CSS属性和该标签在代码中的位置,如图

    检查

    当你鼠标悬浮在元素上时,左侧代码区讲随着你的光标对不同的元素选择而变化,当你单击某个元素时,便是图中的状态,你可以清晰的看出来该元素的CSS特征(例如,未定义PADDING和MARGIN值,这个P标签是由默认的外边距和内边距的),我自己感觉的话这个功能其实跟Firefox和chrome里面的工程模式差不多了.

  3. Adobe BrowserLab:
    当然这个是需要在线测试的,并且需要注册ADOBE帐号才能使用,按理说是可以本地测试的,不过我的DW配置有问题,而且没有添加站点,所以只好在线测试已经上传了的页面,通过这个可以方便的对比出不同浏览器之间的区别,更容易解决兼容性问题,这个功能是我最喜欢的,因为经常要考虑多浏览器兼容的时候,用那个IE TESTER有时候会崩溃,很麻烦,而且电脑安装多个浏览器也不是很方便.如图,这是分成两列的效果

    Adobe BrowserLab 2-up view

    同样的可以用参考线,进行对比,左边是FF 3.6效果,右边则是IE6效果,太方便了,当然还有个更神奇的,见下图

    Adobe BrowserLab

    如果我不说你猜出来是什么了没,就是将两种效果重叠的看,图中间有个滑动块,可以调整两个不同浏览器的效果图的透明度,简直就是Wonderful ; )有兴趣的赶紧尝试下吧~

就先介绍这三个强大的新功能,更多细节还有待发掘 : )

通过photoshop的阴影/高光工具调整相片曝光问题(下)

上次翻译了一半<<通过photoshop的阴影/高光工具调整相片曝光问题(上)>>.近期比较忙,今天抽点时间继续写完,以了心事

高光

调节阴影的部分和高光的作用相同,只不过是减少高光替换成了减少阴影,即使你觉得必须对高光部分进行修改,也不要紧:你所有做的事情对这个整体的对比都会产生很大的影响.其实我觉得我很少用到高光部分.来看看究竟什么是对你有效的.

调整

首先,我们来看这最后两个滑动块:颜色校正中间调对比度.实际上颜色校正滑块应该叫做饱和度滑块,当它单独滑动时来提高或降低饱和度的.在阴影高光调整之前,我用它来重新调整其饱和度让它看起来很合适.当然比起这里的饱和度调整,我更加偏向于使用调整图层来使修改变得更加简单.

中间调对比度滑块可以被用来提高或降低中间色调的对比度.完美而又简单:就是名副其实.然后我继续重复刚才的操作.这次将对比度还原,保持原始的效果.

在上面这张图中,通过阴影部分的调整,我又重新调整了颜色校正中间调对比度这样使树叶(也就是图上的圈圈部分)看起来更加真实.(这里并没有调整高光区域).在修正了阴影和高光后,我可以通过色相/饱和度或者是添加其他调整图层来实现不同的效果.

实例

OK,拖了若干天,总算完成了,心得也不想写了,不过学的知识是活用的,希望大家在了解了这个工具的同时,能够更好的运用到平时的设计中~

原文出处: Correcting Exposure with the Shadows & Highlights Tool

通过photoshop的阴影/高光工具调整相片曝光问题(上)

这篇文章通过photoshop的”阴影/高光”工具调整相片曝光来展现出相片的最美一面!

引言

复制图层

今天我们来共同了解下这个极其有用的,不可思议的工具:阴影/高光调整工具

当我们在拍照的时候,很难或者说几乎不可能在每次拍出来的照片中获得最佳的曝光度. 尤其是在户外,拍摄高反差的景物时,经常会把要拍的东西拍得曝光过度或者曝光不足.那么,阴影/高光调整工具将会充分发掘你所拍的照片的最大潜力.
那么接下来就让我们一起看看吧!

阴影/高光介绍

工具面板

首先,它并不算是一个调整图层一样的东西,所以你可以通过Ctrl+J(Win)或Command+J(Mac)先复制图层,这样你就可以直接修改这个图,当然感觉不好的话也可以还原,因为你有原始图层.

复制完图层后,接下来我们开始进入正题!

其次,Image>Adjustments>Shadows/Highlights…(图像>调整>阴影/高光 *因为我也是用的英文版PS CS5,不知道中文版是不是这样的,若不是请及时通知我~)打开阴影/高光,在这个面板的底部,找到Show More Options(查看更多选项)的选择框,并勾上,这样这些对于新手看似复杂的更多的调整项目就展现出来了,接下来我们一个个看,相信我,你将十分感谢居然有如此强大的控制功能.

最后这一步,你可做可不做,这不过是我的个人习惯罢了.这里的所有值都是photoshop默认的.当你在处理不同的图片时这些值对你来说毫无用处.当然我更加偏向于在处理图片之前将Shadows(阴影) 和 Highlights(高光)框框里面的Amount(数量)Tonal Width(色调宽度), 和 Radius(半径) 设置为0 (也就是全部调整至最左边). 把在Adjustments(调整)框内的Color Correction(颜色校正)Midtone Contrast(中间调对比度) 设置为0 (也就是滑动条的中央). 最后点击 Save as Defaults(存储为默认值)这个按钮. 那么以后每当你打开Shadows/Highlights(阴影/高光)时它永远都不会改变了.

数量,色调宽度和半径

你可以在阴影框和高光框内看到这三个滑动条,我们先来看看阴影框.

数量

数量

我是这样理解的,它会根据你的调整对图像进行较大的改变(当然即使不勾上Show More Options(查看更多选项)依然能够直接调),这里你可以分别将阴影部分调亮或者高亮部分调暗.这个好像可以两边滑动的小刷子,我想你也许用过,也知道它的作用,当然我重点要说的是下面两个滑块的作用.

色调宽度

色调宽度

这里我们来看看怎么样的一个范围可以影响图片.滑块调整到0%,意味着只有阴影部分最黑的地方会被改变,通过向右拖动滑块,慢慢的会影响到中间色调.

半径

半径

半径滑块决定了你想调整的区域在图片该处的其他多大的范围将会被渲染.当然你必须输入一个大于0的值,否则图片看起来灰又像被洗过的.这样你就会知道它对图片的影响效果有么多好了,在3-15px这个值之间,不多也不少,看起来图片变得清爽而干净.我十分喜欢这个感觉,在20px或更高的时候效果变得使图片的区别更加大,不是感到混到一起了就是感觉模糊了.那么设置的越高,就越混…(*其实我对原文理解不够,我尝试着在图片上修改,真的没感觉到什么变化,其实我也不是很会用这个囧rz)

笔记

其实你可以看出来,正如我所说,你无法将每个调整至完美,我经常使用的方法是将数量调到35%左右,色调宽度则必须提高(*作者没有说调至多少.那估计看效果行事了~)最后将半径调整至5px,最后根据当前状态进行细微调整.

哎呀,第一次翻译外国的文章才发现原来这么辛苦,自己经常看国外的好东西,感觉好像理解起来很简单,但是对不懂E问的童鞋来说,估计看了我的也算是很杯具.除此翻译多多包涵.(话说搞了三个小时,头都大了,除了翻译,版式总是调不好…休息下,今天到此为止吧~)

原文出处: Correcting Exposure with the Shadows & Highlights Tool