美文网首页
jQuery 事件和动画以及Ajax

jQuery 事件和动画以及Ajax

作者: fejavu | 来源:发表于2019-05-18 18:15 被阅读0次

.on(events[,selector],handle(eventObject))

例如,给button绑定事件将输入框内的内容(非空),添加到 ul 里面,然后点击 li 元素会打印相应的元素的text。

  // HTML
  <ul class="ulist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>  
  <input type="text">
  <input type="button" value="Add to list">
  <div id="show"></div>
  <script>
  // button click event
  $("input[type=button]").on("click", function(){
    if($("input[type=text]")) {
      $("<li>"+ $("input[type=text]").val() + "</li>").appendTo(".ulist");
    }
  });

  // li click event
  $(".ulist").on("click","li",function(e){
    $("#show").text($(this).text());
  })
  </script>

.off(events[,selector],handle(eventObject))

对事件进行解绑,例如对上文的li列表的click事件进行解绑。

$(".ulist").off("click");

.trigger(evnets)

对事件进行自动触发,而无需进行真实点击。例如上例设定 2 秒对第三个li元素进行点击:

setTimeout(function(){
  $(".ulist").eq(2).trigger("click");
}, 2000)

源码地址

jQuery 常用动画

.hide() / .show() / .fadeOut() / .fadeIn() / .slideDown() / .slideUp()

jQuery 常用的动画函数都遵循一样的参数以及函数格式,handle([duration][,easing][,complete func])

  <div class="anima"></div>
  <div class="wrap">
    <button class="hide">hide</button>
    <button class="show">show</button>
    <button class="fade-out">fade-out</button>
    <button class="fade-in">fade-in</button>
    <button class="slide-down">slide-down</button>
    <button class="slide-up">slide-up</button>      
    <button class="callback">callback</button>

   </div>
  <script>
    var duration = 550;
    $(".hide").on("click", function() {
      $(".anima").hide(duration);
    })
    $(".show").on("click", function() {
      $(".anima").show(duration);
    })
    $(".fade-out").on("click", function() {
      $(".anima").fadeOut(duration);
    })
    $(".fade-in").on("click", function() {
      $(".anima").fadeIn(duration);
    })
    $(".slide-down").on("click", function() {
      $(".anima").slideDown(duration);
    })
    $(".slide-up").on("click", function() {
      $(".anima").slideUp(duration);
    })

jQuery 还允许像调用对象的方法那样连续地对同一个对象调用动画函数而不用写成“回调地狱”的样子:

    $(".callback").on("click", function() {
      $(".anima").hide(duration)
                 .show(duration)
                 .fadeOut(duration)
                 .fadeIn(duration)
                 .slideUp(duration)
                 .slideDown(duration);
    });

上述源码地址

自定义动画

.animate(properties[,duration][,easing][,complete])

  <div class="wrap">  
  <div class="anima"></div>
  </div>
    <button class="step">step50</button>
    <button class="back">back50</button>
    <button class="down">down50</button>
    <button class="up">up50</button>
    <button class="toMiddle">to middle</button>
    <button class="stop">stop</button>      
    <button class="toEnd">toEnd</button> 
    <button class="reset">reset</button>
  <script>
    var duration = 500;
    $(".step").click(function() {
      $(".anima").animate({
        left:"+=50px"
      },duration);
    });
    $(".back").click(function() {
      $(".anima").animate({
        left:"-=50px"
      },duration);
    });  
    $(".down").click(function() {
      $(".anima").animate({
        top:"+=50px"
      },duration);
    }); 
    $(".up").click(function() {
      $(".anima").animate({
        top:"-=50px"
      },duration);
    }); 
    $(".toMiddle").click(function() {
      $(".anima").animate({
        left:"200px",
        top:"200px"
      },3000);
    }); 

    $(".auto").click(function(){
      $(".anima").animate({
        left:"300px"
      },duration)
      .animate({
        top: "200px"
      },duration)
      .animate({
        left:"-=300px"
      },duration)
      .animate({
        top:"+=200"
      },duration)
    });
  </script>

.clearQueue()

清除动画队列中未执行的动画,不影响现在正在执行的动画。当执行上文auto 函数,执行到某一个阶段,点击clear,会将未执行的动画清除,进将当前动画执行完毕就结束。

    $(".clear").click(function(){
      $(".anima").clearQueue();
    });

.stop([clearqueue][,jumptoend])

停止当前动画,根据参数是否清除动画队列,或者跳到最终执行状态,默认都是false。当使用默认写法时,点击stop即停止当前动画,执行队列的接下来一系列动画。

    $(".stop").click(function() {
      $(".anima").stop();
    }); 

.finish()

停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。

    $(".toEnd").click(function() {
      $(".anima").finish();
    });

源码地址

Ajax 方法

.ajax()

普遍的ajax请求,包括get方法和post方法其他方法。

$.ajax({
  url:'http://example.com',
  method:'GET',
  data:{
    username:'myname',
    password:'423kfdjah'
  },
  dataType:'json'
}).done(function(result){
  // do something  
}).fail(function(){
  // do something
}).always(function(){
  // do something
})

.get() 和 .post()方法

$.get("example.com").done(function(result) {
  // do something
})

$.post("example", data)

.getJSON()

var jqxhr = $.getJSON( "example.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });

相关文章

  • jQuery 事件和动画以及Ajax

    .on(events[,selector],handle(eventObject)) 例如,给button绑定事件...

  • jQuery笔记(二)-- 使用选择器

    选择器是jQuery的根基,在jQuery中,遍历DOM、事件处理、CSS控制、动画设计和AJAX操作都依赖于选择...

  • 事件冒泡 委托 节点 ajax jsonp

    事件冒泡 事件委托 节点操作 ajax ajax jQuery-jsonp

  • jQuery知识整理

    jQuery jQuery和DOM关系 jquery框架对象分析 加载事件 事件绑定 动画效果 jquery封装的...

  • jQuery动画与ajax

    jQuery动画与ajax jQuery 中, $(document).ready()是什么意思 jQuery的l...

  • jquery动画和ajax

    jQuery 中, $(document).ready()是什么意思? 页面加载完成后,浏览器会通过JavaScr...

  • jQuery 动画和ajax

    1. jQuery 中, $(document).ready()是什么意思? 为了防止文档在完全加载(就绪)之前...

  • jquery实战

    jQuery属性操作 jQuery特殊效果 jQuery动画 jQuery循环 jQuery其他事件 自定义事件

  • jQuery

    jQuery模块 选择器、DOM操作、事件、AJAX与动画 匿名函数自执行 作用:解决命名空间与变量污染的问题 总...

  • jQuery

    jQuery语法: jQuery获取内容和属性 : AJAX load()方法: jQuery ajax() 方法...

网友评论

      本文标题:jQuery 事件和动画以及Ajax

      本文链接:https://www.haomeiwen.com/subject/qeozaqtx.html