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);

  • 相关阅读:
    植物大战僵尸英文原版
    2020-5-13递归练习 六人参加竞赛
    2020-5-1递归练习
    java当脚本用。QQ表白轰炸机
    面向实战---VUE项目的文件加载顺序,或者加载流程,以及index.html,main.js,app.vue的区别
    CSS多个view随机分布,不重叠,如何实现呢?
    vite项目才踩坑日志1
    css属性之clip-path
    纯CSS3实现的阳光海鸥沙滩遮阳伞和比基尼美女风景动画效果源码
    TP5 中使用wherein 进行查询,太慢了,怎么优化?
  • 原文地址:https://www.cnblogs.com/lumeiling/p/5017928.html
Copyright © 2011-2022 走看看