注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

放飞自由

年轻人,如果三年的时间里,没有任何想法,他这一生,就基本这个样子,没有多大改变。

 
 
 

日志

 
 

50个必备的实用jQuery代码段(二)  

2011-08-29 17:22:08|  分类: WEB前端 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


26. 如何显示或是删除input域中的默认值

    //这段代码展示了在用户未输入值时,  
    //如何在文本类型的input域中保留  
    //一个默认值  
    wap_val = [];  
    $(".swap").each(function(i){  
        wap_val[i] = $(this).val();  
        $(this).focusin(function(){  
            if ($(this).val() == swap_val[i]) {  
                $(this).val("");  
            }  
        }).focusout(function(){  
            if ($.trim($(this).val()) == "") {  
                $(this).val(swap_val[i]);  
            }  
        });  
    }); 
或:
$(function(){
$(":input[type^=text]").focus(function(){
  $(this).removeClass("defaule_value");
  if($(this).val() ==this.defaultValue){  
  $(this).val("");           
  } 
}).blur(function(){
 $(this).addClass("defaule_value");
 if ($(this).val() == '') {
$(this).val(this.defaultValue);
 }
});
});

27. 如何在一段时间之后自动隐藏或关闭元素(支持1.4版本):

    //这是1.3.2中我们使用setTimeout来实现的方式  
    setTimeout(function() {  
      $('.mydiv').hide('blind', {}, 500)  
    }, 5000);  
    //而这是在1.4中可以使用delay()这一功能来实现的方式(这很像是休眠)  
    $(".mydiv").delay(5000).hide('blind', {}, 500); 

28. 如何把已创建的元素动态地添加到DOM中:

    var newDiv = $('');  
        newDiv.attr('id','myNewDiv').appendTo('body'); 

29. 如何限制“Text-Area”域中的字符的个数:

    jQuery.fn.maxLength = function(max){  
        this.each(function(){  
            var type = this.tagName.toLowerCase();  
            var inputType = this.type? this.type.toLowerCase() : null;  
            if(type == "input" && inputType == "text" || inputType == "password"){  
                //Apply the standard maxLength  
                this.maxLength = max;  
            }  
            else if(type == "textarea"){  
                this.onkeypress = function(e){  
                    var ob = e || event;  
                    var keyCode = ob.keyCode;  
                    var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;  
                    return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);  
                };  
                this.onkeyup = function(){  
                    if(this.value.length > max){  
                        this.value = this.value.substring(0,max);  
                    }  
                };  
            }  
        });  
    };  
    //用法  
    $('#mytextarea').maxLength(500); 

30. 如何为函数创建一个基本的测试

    //把测试单独放在模块中  
    module("Module B");  
    test("some other test", function() {  
        //指明测试内部预期有多少要运行的断言  
        expect(2);  
        //一个比较断言,相当于JUnit的assertEquals  
        equals( true, false, "failing test" );  
        equals( true, true, "passing test" );  
    }); 

31. 如何在jQuery中克隆一个元素:

    var cloned = $('#somediv').clone(); 

32. 在jQuery中如何测试某个元素是否可见

    if($(element).is(':visible') == 'true') {  
        //该元素是可见的  
    } 

33. 如何把一个元素放在屏幕的中心位置:

    jQuery.fn.center = function () {  
        this.css('position','absolute');  
        this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');  
        this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');  
        return this;  
    }  
    //这样来使用上面的函数:  
    $(element).center(); 

34. 如何把有着某个特定名称的所有元素的值都放到一个数组中:

    var arrInputValues = new Array();  
    $("input[name='table[]']").each(function(){  
        arrInputValues.push($(this).val());  
    }); 

35. 如何从元素中除去HTML

    (function($) {  
        $.fn.stripHtml = function() {  
            var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;  
            this.each(function() {  
                $(this).html( $(this).html().replace(regexp,”") );  
            });  
            return $(this);  
        }  
    })(jQuery);  
    //用法:  
    $('p').stripHtml(); 

36. 如何使用closest来取得父元素:

    $('#searchBox').closest('div'); 

37. 如何使用Firebug和Firefox来记录jQuery事件日志:

    // 允许链式日志记录  
    // 用法:  
    $('#someDiv').hide().log('div hidden').addClass('someClass');  
    jQuery.log = jQuery.fn.log = function (msg) {  
        if (console){  
            console.log("%s: %o", msg, this);  
        }  
        return this;  
    }; 

38. 如何强制在弹出窗口中打开链接:

    jQuery('a.popup').live('click', function(){  
        newwindow=window.open($(this).attr('href'),'','height=200,width=150');  
        if (window.focus) {  
            newwindow.focus();  
        }  
        return false;  
    }); 

39. 如何强制在新的选项卡中打开链接:

    jQuery('a.newTab').live('click', function(){  
        newwindow=window.open($(this).href);  
        jQuery(this).target = "_blank";  
        return false;  
    }); 

40. 在jQuery中如何使用.siblings()来选择同辈元素

    // 不这样做  
    $('#nav li').click(function(){  
        $('#nav li').removeClass('active');  
        $(this).addClass('active');  
    });  
    //替代做法是  
    $('#nav li').click(function(){  
        $(this).addClass('active').siblings().removeClass('active');  
    }); 

41. 如何切换页面上的所有复选框:

    var tog = false;  
    // 或者为true,如果它们在加载时为被选中状态的话  
    $('a').click(function() {  
        $("input[type=checkbox]").attr("checked",!tog);  
        tog = !tog;  
    }); 

42. 如何基于一些输入文本来过滤一个元素列表:

    //如果元素的值和输入的文本相匹配的话  
    //该元素将被返回  
    $('.someClass').filter(function() {  
        return $(this).attr('value') == $('input#someId').val();  
    }) 

43. 如何获得鼠标垫光标位置x和y

    $(document).ready(function() {  
        $(document).mousemove(function(e){  
            $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);  
        });  
    }); 

44. 如何把整个的列表元素(List Element,LI)变成可点击的

    $("ul li").click(function(){  
      window.location=$(this).find("a").attr("href");  
      return false;  
    }); 

    <ul>  
    <li><a href="#">Link 1</a></li>  
    <li><a href="#">Link 2</a></li>  
    <li><a href="#">Link 3</a></li>  
    <li><a href="#">Link 4</a></li>  
    </ul> 

45. 如何使用jQuery来解析XML(基本的例子):

    function parseXml(xml) {  
        //找到每个Tutorial并打印出author  
        $(xml).find("Tutorial").each(function() {  
            $("#output").append($(this).attr("author") + "");  
        });  
    } 

46. 如何检查图像是否已经被完全加载进来

    $('#theImage').attr('src', 'image.jpg').load(function() {  
        alert('This Image Has Been Loaded');  
    }); 

47. 如何使用jQuery来为事件指定命名空间:

    //事件可以这样绑定命名空间  
    $('input').bind('blur.validation', function(e){  
    // ...  
    });  
    //data方法也接受命名空间  
    $('input').data('validation.isValid', true); 

48. 如何检查cookie是否启用

    var dt = new Date();  
    dt.setSeconds(dt.getSeconds() + 60);  
    document.cookie = "cookietest=1; expires=" + dt.toGMTString();  
    var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;  
    if(!cookiesEnabled) {  
    //没有启用cookie  
    } 

49. 如何让cookie过期:

    var date = new Date();  
    date.setTime(date.getTime() + (x * 60 * 1000));  
    $.cookie('example', 'foo', { expires: date }); 

50. 如何使用一个可点击的链接来替换页面中任何的URL

    $.fn.replaceUrl = function() {  
        var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;  
        this.each(function() {  
            $(this).html(  
                $(this).html().replace(regexp,'<a href="$1">$1</a>‘)  
            );  
        });  
        return $(this);  
    }  
    //用法   
    $('p').replaceUrl(); 


  评论这张
 
阅读(70)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017