`
小杨学JAVA
  • 浏览: 900327 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery 10个简单实用的 jQuery 代码片段

 
阅读更多

转:http://www.cnblogs.com/lhb25/p/10-useful-jquery-code-snippets.html

 

平滑滚动到锚点

  这个功能很常见,在网站底部添加一个让访客快速回到页面顶部的功能,下面是实现这个功能的示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>
 
$(document).ready(function() {
    $("a.topLink").click(function() {
        $("html, body").animate({
            scrollTop: $($(this).attr("href")).offset().top + "px"
        }, {
            duration: 500,
            easing: "swing"
        });
        return false;
    });
});

缩放图片

  虽然图片应该在服务器端缩放,不过如果服务器端未做缩放,需要再客户端缩放的时候,可以使用下面这个方便的代码片段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(window).bind("load", function() {
    // IMAGE RESIZE
    $('#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;
        }
    });
    //$("#contentpage img").show();
    // IMAGE RESIZE
});

滚动时自动加载内容

  很多网站使用了流行的瀑布图布局,这种类型的网站在页面滚动的时候会自动加载内容。下面这段代码让你能够把这个功能搬到你的网站上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
            loading = true;
            $('#loadingbar').css("display","block");
            $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
                $('body').append(loaded);
                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
                $('#loadingbar').css("display","none");
                loading = false;
            });
        }
    }
});
 
$(document).ready(function() {
    $('#loaded_max').val(50);
});

检测密码强度

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#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;
});

均衡元素的高度

  使用纯 CSS代码实现均衡元素的高度比较困难,而下面这段 jQuery 代码会根据最高的元素来均衡所有的 Div 元素。

1
2
3
4
5
6
7
var maxHeight = 0;
 
$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
 
$("div").height(maxHeight);

修复 IE6 PNG 问题

  至今,IE6 在国内仍然占据了大量的份额,因此在 Web 开发中仍然需要考虑 IE6 的兼容问题。比较常用的 IE6 PNG 图片问题,下面这段代码可以方便的修复。

1
2
3
4
5
$('.pngfix').each( function() {
   $(this).attr('writing-mode', 'tb-rl');
   $(this).css('background-image', 'none');
   $(this).css( 'filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")');
});

解析 JSON 字符串

  使用 jQuery 解析 JSON 数据并不复杂。下面是一个高效解析 JSON 数据并将其追加到您的网页的例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function parseJson(){
    //Start by calling the json object, I will be using a
        //file from my own site for the tutorial
    //Then we declare a callback function to process the data
    $.getJSON('hcj.json',getPosts);
  
    //The process function, I am going to get the title,
        //url and excerpt for 5 latest posts
    function getPosts(data){
        //Start a for loop with a limit of 5
        for(var i = 0; i < 5; i++){
            var strPost = '<h2>'
                      + data.posts[i].title
                      + '</h2>'
                      + '<p>'
                      + data.posts[i].excerpt
                      + '</p>'
                      + '<a href="'
                      + data.posts[i].url
                      + '" title="Read '
                      + data.posts[i].title
                      + '">Read ></a>';
            //Append the body with the string
            $('body').append(strPost);
        }
    }
}
  
//Fire off the function in your document ready
$(document).ready(function(){
    parseJson();                  
});

隔行换色

  这是一个很老的功能了,在大的列表或表格中,隔行颜色可以大大提高内容的可读性。下面的代码可以非常简单实现这个功能。

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

预加载图片

  你是否注意到 facebook 相册的图片加载速度特别快?那是因为在你看到这些图片之前已经预加载到你的浏览器缓存中了。下面是实现这个类似功能的代码示例:

1
2
3
4
5
6
7
8
var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
    window.setTimeout(function(){
        var img = $("<img>").attr("src", nextimage).load(function(){
            //all done
        });
    }, 100);
});

让整个 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;
});
分享到:
评论

相关推荐

    50个jquery代码片段

    从给定的文件信息中,我们可以提炼出一系列关于jQuery的重要知识点,这50个代码片段不仅展示了jQuery的强大功能,还提供了实用的编程技巧,适用于各种JavaScript项目。以下是对部分代码片段的详细解释: ### 1. ...

    jquery实用代码片段集合

    ### jQuery实用代码片段集合知识点 ...以上知识点涵盖了在实际开发中常用的jQuery代码片段,它们可以提高开发效率,增强用户体验。通过这些实用的代码片段,开发者可以更灵活地处理常见的前端开发场景。

    45个实用的jquery代码片段

    这个“45个实用的jquery代码片段”集合为开发者提供了丰富的资源,可以帮助他们更高效地开发网页应用。下面,我们将详细讨论这些jQuery代码片段中的关键知识点。 1. **选择器**:jQuery提供了丰富且直观的选择器,...

    jQuery常用代码片段

    这篇博文"jQuery常用代码片段"很可能是为了分享一些实用的jQuery代码示例,帮助开发者提高工作效率。下面我们将深入探讨jQuery的一些核心功能和常见用法。 1. **选择器**: jQuery的选择器类似于CSS,可以轻松地选取...

    直接拿来用的15个jQuery代码片段

    标题中提到的是“直接拿来用的15个jQuery代码片段”,这表明本文将分享十五个可以直接应用于项目中的实用jQuery代码片段。jQuery是广泛使用的一个JavaScript库,它简化了HTML文档遍历、事件处理、动画以及AJAX交互...

    简单实用jQuery返回顶部代码.zip

    在网页设计中,用户体验往往是非常重要的一环,而“返回顶部”功能则是一个常见的提升用户体验的设计元素。这个“简单实用jQuery返回顶部代码.zip...在实际项目中,这样的代码片段可以被轻松集成,提升网站的整体质量。

    一些实用的jQuery代码片段

    ### 一些实用的jQuery代码片段 #### 1. 使用jQuery获取用户的IP地址 在Web开发中,有时我们需要知道用户所在的IP地址,以便进行一些特定的操作,例如地理定位、访问控制等。下面是一段使用jQuery来获取用户IP地址...

    《超实用的jQuery代码段》PDF版本下载.txt

    《超实用的jQuery代码段》这本书提供了大量实用的jQuery代码片段,这些片段可以帮助开发者快速地解决实际项目中遇到的问题。通过学习本书,不仅可以提升使用jQuery的能力,还能提高开发效率。对于初学者来说,这本书...

    《超实用 的jQuery代码段》 配套 源码

    《超实用的jQuery代码段》是一本专注于jQuery实践的书籍,其配套源码提供了一整套丰富的代码示例,帮助读者深入理解并掌握jQuery库在实际项目中的应用。jQuery是JavaScript的一个强大库,它简化了DOM操作、事件处理...

    几个实用的 jQuery 表单操作代码片段

    以下是一些实用的jQuery表单操作代码片段,它们涵盖了表单的常见需求。 1. **禁用‘回车键’提交表单**: 当用户在表单中按下回车键时,有时我们不希望表单被意外提交。通过监听 `keypress` 事件,我们可以阻止...

    50个必备的实用jQuery代码段

    ### 50个必备的实用jQuery代码段 #### 1. 如何创建嵌套的过滤器 嵌套过滤器能够帮助我们进一步精简选择器的结果集。例如,我们需要找到所有不包含特定类(如 `selected`)子元素的元素。 ```javascript // 创建一...

    10个超棒jQuery表单操作代码片段

    以上代码片段展示了jQuery在处理表单交互时的灵活性和实用性。它们可以帮助开发者更有效地管理用户输入,防止错误操作,以及优化用户体验。在实际项目中,可以根据具体需求进行调整和扩展,以满足各种复杂场景的需求...

    jQuery简单实用分页代码.zip

    本资源"jQuery简单实用分页代码.zip"提供了一个基于jQuery 1.11.1.min.js库的分页解决方案,适用于那些希望在网站上实现高效、简洁分页功能的开发者。 jQuery是一款强大的JavaScript库,它简化了JavaScript的DOM...

    超实用的JQUERY代码

    10个超实用的jQuery代码片段 jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢!

    60个实用的jQuery代码片段.pdf

    以下是从60个实用jQuery代码片段中提取的知识点: 1. **选择器与过滤**:`filter()`方法允许根据指定条件筛选元素集合,如`":not(:has(.selected))"`用于移除包含特定类的元素。 2. **元素引用**:存储已选择的...

    jQuery 常用代码段

    这个压缩包文件“超实用的jQuery代码段”显然是一份汇集了多个常见和实用jQuery代码片段的资源,对于前端开发者来说极具价值。下面,我们将深入探讨这些关键知识点。 1. **选择器**:jQuery的选择器使得选取DOM元素...

    Firebug控制台动态加载jquery脚本并执行jquery代码

    在`firebug动态加载js脚本.txt`文件中,可能包含了一些关于如何在Firebug控制台中执行这些操作的步骤和代码片段。 6. **扩展应用**:除了在Firebug控制台中使用,这种动态加载和执行jQuery的方法还可以应用于实际的...

    简单实用的jQuery多尺寸图片上传预览代码.zip

    这个“简单实用的jQuery多尺寸图片上传预览代码”是一个针对网页图片上传功能的解决方案,尤其适用于需要在用户上传前预览不同尺寸图片的应用场景。 首先,我们来看`index.html`。这是项目的主页面,它包含了HTML...

    50个常见的JQUery代码

    jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了网页中的 DOM 操作、事件处理和动画效果。以下是一些关于 jQuery 的常见...了解并熟练掌握这些代码片段,可以提升工作效率,创建出更加用户友好的 web 应用。

    30个经典实用jQuery演示代码打包下载

    **jQuery基础** jQuery是一款强大的JavaScript库,它简化了HTML文档遍历、事件处理、...每个示例都是一个独立的代码片段,你可以逐一研究,理解它们的运作机制,并尝试应用到自己的项目中,从而提高你的jQuery技能。

Global site tag (gtag.js) - Google Analytics