Mr.Think

最近花在jQuery上的时间比较多.看过的文章中,对于jQuery的变量命名, 一般都提倡以$符号开始.比如$think,$php…这样做, 是为了更好的与原生JavaScript区分开.但如果在项目中后台程序是php,这种做法不妥当的,还会给你带来麻烦.
原因是什么? 在PHP中, $声明的就是一个变量.比如$think, 代表的就是变量think.如果你的jQuery中的变量名以$起始, 而这段jQuery代码正好在php中执行.那么这段jQuery代码中以$起始的变量将被PHP解析掉,而导致这些变量在jQuery代码中消失.
所以,个人建议,如果jQuery与之交互的后台程序是PHP,变量名最好都改个法子命名,比如以_起始.

迷上jQuery,相对于原生JavaScript,它是如此的美妙.也因此,促使我更加的努力的研习原生JavaScript.
分享一个控制左右滚动及自动滚动的样例, 昨晚花了两个多小时, 忍受着悍蚊的叮咬, 汗水的侵袭, 一行行的敲出来的血汗代码. 哈哈.
封装了两种模式: 点击滚动版本DEMO自动滚动版本DEMO,源码中有详细注释.
思路:
点击滚动模式下,是为点击(向前/向后/数字)添加click事件,通过控制展示区块left值实现切换.
1.向前(左):当在第一个版面时,滚动到最后一个页面,否则,累加left值,向前滚动;
2.向后(右):当在最后一个版面时,滚动到第一个页面,否则,累减left值,向后滚动;
3.数字点击:利用index(…)获取当前点击在数字列表中的索引值, 然后索引值为倍数为外围宽度负值.即可达到切换.
核心代码:

//***向前滚动
    $pre.click(function(){
        if (!$showbox.is(':animated')) {  //判断展示区是否动画
            if ($cur == 1) {   //在第一个版面时,再向前滚动到最后一个版面
                $showbox.animate({
                    left: '-=' + $w * ($pages - 1)
                }, 500); //改变left值,切换显示版面,500(ms)为滚动时间,下同
                $cur = $pages; //初始化版面为最后一个版面
            }
            else {
                $showbox.animate({
                    left: '+=' + $w
                }, 500); //改变left值,切换显示版面
                $cur--; //版面累减
            }
            $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
        }
    });
    //***向后滚动
    $next.click(function(){
        if (!$showbox.is(':animated')) { //判断展示区是否动画
            if ($cur == $pages) {  //在最后一个版面时,再向后滚动到第一个版面
                $showbox.animate({
                    left: 0
                }, 500); //改变left值,切换显示版面,500(ms)为滚动时间,下同
                $cur = 1; //初始化版面为第一个版面
            }
            else {
                $showbox.animate({
                    left: '-=' + $w
                }, 500);//改变left值,切换显示版面
                $cur++; //版面数累加
            }
            $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
        }
    });
    //***数字点击事件
    $num.click(function(){
        if (!$showbox.is(':animated')) { //判断展示区是否动画
            var $index = $num.index(this); //索引出当前点击在列表中的位置值
            $showbox.animate({
                left: '-' + ($w * $index)
            }, 500); //改变left值,切换显示版面,500(ms)为滚动时间
            $cur = $index + 1; //初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1
            $(this).addClass('numcur').siblings().removeClass('numcur'); //为当前点击加上高亮样式,并移除同级元素的高亮样式
        }
    });

自动滚动模式是基于点击滚动模式加强的,无非是添加了自动滚动事件,以及当鼠标划上时清除动画事件.
这里要说明一点.DEMO演示中,为向前/向后/数字/区域都添加了当鼠标划过时都添加了清除动画事件.但是,如果你的页面中,这几个需要添加清除动画事件的都在同一个区域内,完全可以用trigger(…)模拟实现自动滚动.
还有一点,自动滚动中是用setTimeout(“fun”,interval)实现,而不用setInterval(“fun”,interval)实现. 原因在于,setInterval是在间隔时间后重复执行传入的函数,而setTimeout只在间隔时间后执行一次函数传入函数,这样即可避免第二次鼠标划入停止动画区域时不能清除动画.
核心代码:

   ......
   //***调用自动滚动
   autoSlide();
   ......
    //***停止滚动
    clearFun($showbox);
    clearFun($pre);
    clearFun($next);
    clearFun($num);
    //***事件划入时停止自动滚动
    function clearFun(elem){
        elem.hover(function(){
            clearAuto();
        }, function(){
            autoSlide();
        });
    }
    //***自动滚动
    function autoSlide(){
        $next.trigger('click');
        $autoFun = setTimeout(autoSlide, 3000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效
    }
    //***清除自动滚动
    function clearAuto(){
        clearTimeout($autoFun);
    }

更详细代码分析,请查看源码,写有详细的注释.

一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~
可以验证哪些? 文字,日期,邮箱,网址,数字,AJAX用户名验证以及自定义的正则等等几乎所有我们要用到的验证.
不多说,看DEMO吧: 点此查看DEMO点此下载DEMO
如何使用?
第一步,当然是和使用其他jQuery插件一样,引入插件文件vanadium.js;
第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项:

那么,就给它添加class=”:required”> :

其他的也依次类推,类似:required的验证钩子,可以在静态页中找到,比如数字是:number,最大值是:max_length;4,当然,你还可以自定义或者修改成你懂的名称.
如果你同一个表单要满足多个条件,比如必填项,且输入字符数在4-8之间,你可以这样写:

输入4到8个字符:

明白了吗?用空格隔开条件即可;
第三步,修改弹出信息,比如此项不可为空,你觉得不个性,你可以在判断语句中找到这个字段修改成你觉得个性的.
第四步,删除你用不到的条件判断.保持代码的干净精练,是一种美德.DEMO页面中列出了所有的判断方法,这些判断在现实应用中几乎不可能在同一个表单中用完.所以,删除那些你用不着的判断语句.不删?好吧,那只能证明你很懒,别的没什么影响.
第五步,几个参数说明:

valid_class: 'rightformcss',//验证正确时表单样式
invalid_class: 'failformcss',//验证失败时该表单样式
message_value_class: 'msgvaluecss',//这个样式是弹出信息中调用值的样式
advice_class: 'failmsg',//验证失败时文字信息的样式

哦?就这么简单,没其他好说的了,使用时请看我写的注释.

使用jQuery很长时间了,但一直没有深入的研究过. 下午正好有空,看了锋利的jQuery第1和第2章,顷刻间为之所迷.
之前也曾通过jQuery手册了解过一些jQuery的知识,但从没系统的看过它的核心.看完锋利的jQuery前两章,jQuery简直太美了.简单,易懂,易用,还有那无所不能的$(虽然有点夸大,哈哈). The write less,do more 这是我现在对jQuery的认知.
相见恨晚.我甚至去想,如果当初学JavaScrip时也学jQuery,可能会更快.虽然jQuery从属于JavaScrip,但它比JavaScrip有意思的多.对于初学者,JavaScrip是相当枯燥的(看那本比字典还厚的权威指南时差点放弃了,哈).所以,如果JavaScrip初学者看到这篇文章,我希望你在学习的同时也学学jQuery,这样会更快.jQuery有多容易入门? 噢,就跟CSS一样,没错,她的选择符就跟CSS选择符一样.兴趣是最好的老师,只有兴趣提起来了,才更容易吸收知识.
最后,也特别的赞一下锋利的jQuery这本书,国人写的,避免了翻译过程中的”变味”,写的也很易懂.此书完全可以和JavaScript DOM编程艺术媲美,都是非常棒的入门书.
用最少的代码,做最多的事.jQuery,真美~

了解jQuery,点此前往: http://jquery.com/
学习jQuery,点此前往: http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html

自己前端开发中常用到的一些技巧及问题解决方法,会常更新,希望对前端路上的朋友有帮助.
JavaScript常用函数请点此前往: 一些常用且实用的原生JavaScript函数 , 你还可以前往兰芝博客, 查看由淘宝UED整理的前端tips: http://www.12sui.cn/develop/.
1.文章标题列表中日期居右显示的两种方法,方法A相对方法B省资源,但比方法B要多写两句代码,使用时请视情况而定:
方法A(经典论坛ariesjia提供的思路.感谢~):

@Mr.Think这是文章标题2010-10-10

然后定义p和span的样式:

p{position:relative}
p span{position:absolute; right:0}

方法B:

2010-10-10@Mr.Think这是文章标题

然后定义span右浮动:

p span{float:right}

其实这两种方法可以延伸到很多情况下,很实用的一种写法;
2.web标准中,同一页面中只能有一个h1标签.很多人知道这个概念,但做到的却很少;
3.空白外边距互相叠加的问题:一般通过添加透明边框或者1px的内边距避免.详细解读:http://mrthink.net/css-margin-overlying-way/;
4.ie6下max/min-width/height实现,_width:expression(document.body.clientWidth > 600 ? “600px” : “auto”); _height: expression(this.scrollHeight >600 ? “600px” : “auto”);.
5.html/class/id,最好统一以小写书写,这样更严谨(符合xhtml标准);
6.不推荐用下面代码兼容IE8:

如果是非短期性页面,尽量避免使用,页面应尽可能保证向后兼容.更多兼容方法请详细阅读: http://mrthink.net/cssandhtml-hack-mainbrower/
7.空div在IE(FF中没有)是有默认高度的,可以用定义:div { witdh:100%; background:#9c0; font-size:0}的方式去掉默认高度;
8.在使用table标签时应该尽可能的利用它本身的属性，最大限度的分离结构与样式.详细解读:http://mrthink.net/csshtml-colgroup-col-style/;
9.充分利用表单中label标签提升用户体验; 这一点对于页面中那些小的选项框,以及对残障人士阅读网站都有好处. 细节是用户体验的第一步;例如:

SAMPLE

当鼠标点击SAMPLE时,光标将自动在文本域中获取焦点;
10.fieldset, legend标签, 鲜为人知,却很实用的一组标签;它可以很明了的把一组元素框起来,主要用于表单;
11.optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助.作用? 就是可以在有很多选项时,对这些选项分组:

one select
two select


three select
four select

效果演示:

one select
two select


three select
four select

12.表单都要加name值,name值是一个标识,不同于id,据我所发现,若是未定义name值,非IE浏览器下是无法通过document.formid获取到表单元素的.请看如下代码及注释:

<html>
<head>
<script>
window.onload=function(){
alert(document.mrform.length);  //所有浏览器均会弹出表单元素长度
alert(document.thinkform.length);  //仅IE会弹出该表单元素长度
}
</script>
</head>
<body>
<form name="mrform" id="thinkform" action="#">
......
</form>
</body>
</html>

13.同一行上文字与图片垂直居中对齐方法:为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};
例如:

@Mr.Think

只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中.
14.同一行上文字与表单对齐方法: 设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦:

body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}

15.获取m至n间随机数的公式: Math.random()*(n-m)+m;
16.针对ie6下png背景显示问题,CSS中可以这样解决:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http://mat1.gtimg.com/www/mb/images/openShadow.png’);
17.优先加载页面中的Sprite图(请参见Google首页源码):

if(document.images)new Image().src='images/sprite.png'

18.CSS及JavaScript中,非注释类中文(CSS中指字体),在最后优化时须转换成Unicode码,以避免编码错误时的乱码显示.
19.ie6/ie7下若overflow失效, 一般是由于元素中有relative定位元素,可为为父级元素添加position:relative解决.
20.ie6下border-color:transparent无效解决方法:

_border-color:#ff0 #047 #047 #047;_filter:chroma(color=#047)/*#047颜色值将被透明*/