网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jquery常用的12个小功能
内容
    12个jquery常用功能，极好的，分享给大家，帮助大家更好的进行jQuery开发，感兴趣的小伙伴们可以参考一下
    返回顶部
    使用JQuery的animate和scrollTop方法可以创建简单地返回顶部的动画：
    // Back to top
    $('a.top').click(function (e) {
     e.preventDefault();
     $(document.body).animate({scrollTop: 0}, 800);
    });
    HTML中得有一个按钮：
    <!-- Create an anchor tag -->
    <a href="#">Back to top</a>
    可以改变scrollTop的值来定位滚动条的位置。
    图片预加载
    如果页面使用了很多不是最初加载便可见的图片，有必要进行预加载：
    $.preloadImages = function () {
     for (var i = 0; i < arguments.length; i++) {
     $('img').attr('src', arguments[i]);
     }
    };
    $.preloadImages('img/hover-on.png', 'img/hover-off.png');
    判断图片是否完全加载
    有时需要图片完全加载才能进行后面的操作，下面的这段脚本可以实现：
    $('img').load(function () {
     console.log('image load successful');
    });
    你也可以通过带id或者class的img标签来判断某张特定的图片是否完全加载
    自动修复损坏图片
    如果图片损坏，可以用另外一张进行替换：
    $('img').on('error', function () {
     $(this).prop('src', 'img/broken.png');
    });
    Hover状态的类切换
    当用户的鼠标指针悬浮在一个可以点击的元素上时，你可以通过添加一个class改变它的视觉效果，鼠标指针离开该元素时，就移开刚刚添加的class：
    $('.btn').hover(function () {
     $(this).addClass('hover');
     }, function () {
     $(this).removeClass('hover');
     });
    一个更简单的方式是使用toggleClass：
    $('.btn').hover(function () {
     $(this).toggleClass('hover');
    });
    Note: CSS may be a faster solution in this case but it's still worthwhile to know this.输入框的不可编辑
    有时，你想要表单的提交按钮或者文本框变的不可编辑，直到用户完成某个特定的动作，通过修改input元素的disabled属性来实现：
    $('input[type="submit"]').prop('disabled', true);
    再次调用prop方法将disabled值改为false，就可以更改元素状态：
    $('input[type="submit"]').prop('disabled', false);
    停止链接加载
    若你不想点击链接跳转到另一个页面或者重新加载页面，仅仅只想让它做点别的事情，如触发其它脚本，则需要阻止链接的默认行为:
    $('a.no-link').click(function (e) {
     e.preventDefault();
    });
    Fade/Slide切换
    Slideing 和 fading 是很常用的 JQuery 动画。如果你想要在用户产生点击事件时显示一个元素，可以用fadeIn或者slideDown，若要实现第一次点击显示元素而第二次点击隐藏元素的效果，可以参考下面的脚本：
    // Fade
    $('.btn').click(function () {
     $('.element').fadeToggle('slow');
    });
    // Toggle
    $('.btn').click(function () {
     $('.element').slideToggle('slow');
    });
    简单地手风琴
    下面的这段脚本可以简单实现手风琴效果：
    // Close all panels
    $('#accordion').find('.content').hide();
    // Accordion
    $('#accordion').find('.accordion-header').click(function () {
     var next = $(this).next();
     next.slideToggle('fast');
     $('.content').not(next).slideUp('fast');
     return false;
    });
    让两个Div等高
    有时，需要让两个Div保持等高，而不管两个Div的内容如何：
    $('.div').css('min-height', $(.main-div).height());
    var $columns = $('.column');
    var height = 0;
    $columns.each(function () {
     if ($(this).height() > height) {
     height = $(this).height();
     }
    });
    $columns.height(height);
    在上述的示例中，会循环一个元素集合，并将元素的高度设置成元素集合中高度最高的。若要所有 column 保持同样地高度，则可以这样：
    var $rows = $('.same-height-columns');
    $rows.each(function () {
     $(this).find('.column').height($(this).height());
    });
    在新的Tab/Window打开外链
    在浏览器的新Tab/Window打开外链，并且在同一个Tab/Window打开同源的链接：
    $('a[href^="http"]').attr('target','_blank');
    $('a[href^="//"]').attr('target','_blank');
    $('a[href^="'+window.location.origin+'"]').attr('target','_self');
    Note: window.location.origin doesn't work in IE10. This fix takes care of the issue.
    通过文本查找元素
    利用 JQuery 的contains()选择器可以查找一个包含特定文本的元素，如果文本不存在，元素则隐藏：
    var search = $('#search').val();
    $('div:not(:contains("'+search+'"))').hide();
    以上就是本文的全部内容，希望对大家的学习有所帮助
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 18:16:51