2014.01.14 笔记(收集的简单实用的 jQuery 代码片段)

收集几个常用的简捷的代码片段：

1.返回页面顶部：

// Back To Top 
$(document).ready(function(){ 
$('.top').click(function() { 
$(document).scrollTo(0,500); 
}); 
}); 
//Create a link defined with the class .top 
<a href="#" class="top">Back To Top</a>

 

3.自动替换丢失的图片

// Safe Snippet 
$("img").error(function () { 
    $(this).unbind("error").attr("src", "missing_image.gif"); 
}); 
// Persistent Snipper 
$("img").error(function () { 
    $(this).attr("src", "missing_image.gif"); 
});

 

 

4. 在鼠标悬停时显示淡入/淡出特效 

$(document).ready(function(){ 
    $(".thumbs img").fadeTo("slow", 0.6); 
    // This sets the opacity of the thumbs to fade down to 60% when the page loads 
    $(".thumbs img").hover(function(){ 
        $(this).fadeTo("slow", 1.0); 
        // This should set the opacity to 100% on hover 
    },
    function(){ 
        $(this).fadeTo("slow", 0.6); 
        // This should set the opacity back to 60% on mouseout 
    }); 
}); 

 

 

5.清空表单数据

function clearForm(form) { 

    $(':input', form).each(function() { 
        var type = this.type; 
        var tag = this.tagName.toLowerCase(); 
        
        if (type == 'text' || type == 'password' || tag == 'textarea') 
        this.value = ""; 

        else if (type == 'checkbox' || type == 'radio') 
        this.checked = false; 

        else if (tag == 'select') 
        this.selectedIndex = -1; 
    }); 
}; 

 

6.图像等比例缩放

$(window).bind("load", function() { 

    $('#product_cat_list img').each(function() { 
        var maxWidth = 120; 
        var maxHeight = 120; 
        var ratio = 0; 
        var width = $(this).width(); 
        var height = $(this).height(); 
        if(width > maxWidth){ 
            ratio = maxWidth / width; 
            $(this).css("width", maxWidth); 
            $(this).css("height", height * ratio); 
            height = height * ratio; 
        } 
        var width = $(this).width(); 
        var height = $(this).height(); 
        if(height > maxHeight){ 
            ratio = maxHeight / height; 
            $(this).css("height", maxHeight); 
            $(this).css("width", width * ratio); 
            width = width * ratio; 
        } 
    }); 

});

 

7.让页面中的每个元素都适合在移动设备上展示 

var scr = document.createElement('script'); 
scr.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'); 
document.body.appendChild(scr); 
scr.onload = function(){ 
    $('div').attr('class', '').attr('id', '').css({ 
        'margin' : 0, 
        'padding' : 0, 
        'width': '100%', 
        'clear':'both' 
    }); //这个我觉得，不需要去掉Div的 class,id ，这样会乱套。。建议保留 Div的class，id。通过重新定义Css也可以
};

 

8.  margin:auto实现绝对定位元素的居中

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

 

9.  检测密码强度 (在表单功能中，经常会有检测用户输入的密码强度的功能，下面这个代码片段使用正则表达式来检测密码是否足够安全，当然记得在服务端也进行表单验证。)

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

 

10. 隔行换色  (在大的列表或表格中，隔行颜色可以大大提高内容的可读性)

$('div:odd').css("background-color", "#F4F4F8");
$('div:even').css("background-color", "#EFF1F1");

 

11.  让整个 Div 可点击

//这是实现链接的父 Div 也能够点击的简单方法，HTML 示例代码如下：

<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a>
</div>
　　下面的 jQuery 代码让整个 Div 可点击：

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

 

 12.  实时监听输入框值变化  (对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发)

$('textarea').bind('input propertychange', function() {
    $('.msg').html($(this).val().length + ' characters');
});

 

 

 

 

 

利用CSS3 中的样式属性设置圆角框，两句代码就能搞定。。

    <style type="text/css"> 
            #div1 {
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border:solid 1px #0CC;
                background:#F9C;
    　　　　　　　width:500px;
    　　　　　　  padding-left:100px;
            }  
   </style>

   <div id="div1"> aaaaaaaaaaa </div>

效果图：