zoukankan      html  css  js  c++  java
  • 简单技巧集合,提升jQuery技能

    1.回到顶部按钮:

       通过使用jQuery中的animate和scrollTop方法,你无须插件便可简单的回到顶部动画。

    下面是简单的代码:

       //首先创建一个人a标签

         <a class="top" href="#">Back to  top </a>

       //jquery代码

       $('a.top').click(function(e){

       e.preventDefault();

       $(document.body).animate({scrollTop:0},800);

    });

    //将scrollTop的值改为你想要的scrollbar停止的地方,然后设置在800毫秒内回到顶部。

    2.Hover上的Class切换:

     // 如果用户的鼠标悬停在页面上的某个可点击元素上时,你想要改变这个元素的视觉表现。

    // 可以使用下面这段代码,当用户悬停时,为该元素增加一个class,当用户鼠标移开后移除这个代码。

    $('.btn').hover(function(){

    $(this).addclass('hover');

    },function(){

    $(this).removeClass('hover');

    });

    //你仅需要增加必须的CSS。如果需要更简单的方式,还可以使用toggleClass方法;

    $('.btn').hover(function(){

    $(this).toggleClass('hover');

    });

    //注意:css或许是这个例子更快速的解决方法。

    3.简单的手风琴效果

    //代码如下:

    $('#accordion').find('.content').hide();

    $('#accordion').find('.accordion-header').click(function(){

    var next=$(this).next();

    next.slideToggle('fast');

    $('.content').not(next).slideUp('fast');

    return false;

    });

    4.Ajax调用的错误处理

    //当某次Ajax调用返回404或500错误,就会执行错误处理,但如果没用定义该处理,其他iquery代码或许会停止工作。可以通过下面

    //这段代码定义一个全局Ajax错误处理:

    $(document).ajaxError(function(e,xhr,setting,error){

    console.log(error);

    });

    5.禁用input字段

    //有时想要让表单的提交按钮或其文本输入框变得不可用,直到用户执行了一个特定的行为(例如:"我已阅读该条款"的复选框);

    //增加disabled attribute到你的input,就可以实现自己想要的效果了;

    $('input[type="submit"]').prop('disabled',true);

    //当你想把disabled的值改为false时,仅需在该input上在运行一次prop方法。

    $('input[type="submit"]').prop('disabled',false);

  • 相关阅读:
    组队竞赛--全国模拟(三)
    排序子序列--全国模拟(三)
    20、剑指offer--包含min函数的栈
    19、剑指offer--顺时针打印链表
    leetcode链表--12、remove-duplicates-from-sorted-list-ii(删除排序链表中全部的重复结点)
    qq客服代码
    百度翻译API
    .net如何判断网页是否由搜索引擎蜘蛛访问?
    Kibana4学习<三>
    Kibana4学习<二>
  • 原文地址:https://www.cnblogs.com/lumeiling/p/5017928.html
Copyright © 2011-2022 走看看