jQuery 常用代码片段收集

发布日期:2010-01-26 23:00:06.0 发布讲师:don 浏览量:213

课程类别:IT电脑开发
学习标签: jquery 代码片段收集
免费在线正则表达式验证工具！免费在线HTML/JS/CSS调试工具！

收集一些jquery常用的代码片段，方便记忆和以后使用。不断更新。

1.自动识别超级链接并应用相应样式

$('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass(C[1]);
   }
});

应用场合：根据下载链接中的文件自动匹配链接样式。

2. 检验所有为空元素

$('*').each(function() {
         if ($(this).text() == "") {
                   //Do Something
         }
});

var emptyTest = $('#myDiv').is(:empty);

3.检查元素是否存在

if ( $('#myElement').length > 0 ) {
// it exists
}

4.当搜索框获得焦点时，自动清除其中的默认文字

$("#s")
    .val("输入搜索内容...")
    .css("color", "#ccc")
    .focus(function(){
        $(this).css("color", "black");
        if ($(this).val() == "输入搜索内容...") {
            $(this).val("");
        }
    })
    .blur(function(){
        $(this).css("color", "#ccc");
        if ($(this).val() == "") {//如果失去焦点，但输入内容为空则继续显示默认内容
            $(this).val("输入搜索内容...");
        }
    });

5.没有子菜单的父节点去除背景

$("ul.dropdown > li:not(:has('ul')) a").css({
"background-image": "none",
});

应用场合：当下一级中没有内容时，让父节点显示不同于其他有子菜单的节点，防止用户点击后才发现下面没有内容了。（用到时就有体会了）

6.只触发一次的事件

$('#my-selector').bind('click', function() {
       $(this).unbind('click');
       alert('Clicked and unbound!');
       //Do Something
});

也可以这样，本质相同

$(‘#my-selector’).one(‘click’, function() {
alert(‘This can only happen once’);
});

7.简易的图片轮回效果

        $(document).ready(function() {
     var j = 0;
     var delay = 2000; //millisecond delay between cycles
     function cycleThru(){
             var jmax = $("ul#cyclelist li").length -1;
             $("ul#cyclelist li:eq(" + j + ")")
                     .animate({"opacity" : "1"} ,400)
                     .animate({"opacity" : "1"}, delay)
                     .animate({"opacity" : "0"}, 400, function(){
                             (j == jmax) ? j=0 : j++;
                             cycleThru();
                     });
             };

     cycleThru();

});
    <style type="text/css">
        ul#cyclelist {width:200px;border:solid;position:relative;overflow:hidden;height:200px}
        ul#cyclelist li {font-size:1.4em;padding:20px;opacity:0;position:absolute}
    </style>
//将下面的文本替换为图片
    <ul id="cyclelist">
        <li>list 1</li>
       <li>list 11</li>
       <li>list 111</li>
       <li>list 1111</li>
       <li>list 11111</li>
       <li>list 111111</li>
       <li>list 1111111</li>
    </ul>

注：部分内容来源网络，参考URL：http://css-tricks.com/snippets/

　（V1 2010.01.26）

Tag标签: jquery,代码片段,常用代码收集