jQuery学习(三)事件 + 动画 + AJAX + 扩展

1 事件

在这里插入图片描述

1-1 鼠标事件
1、点击事件
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第1张图片

<script>
  var a = $("#test-link");
  a.click(function () {
    alert("Hello");
  });
</script>

2、
各种事件
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第2张图片
3、
比较重要的ready事件
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第3张图片
很重要的一点内容
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第4张图片
4、
事件参数
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第5张图片

5、jQuery学习(三)事件 + 动画 + AJAX + 扩展_第6张图片
6、
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第7张图片
7、
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第8张图片

2 动画

1、在这里插入图片描述
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第9张图片
我整个图片实际测试一下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jquery test</title>
  </head>
  <style type="text/css"></style>

  <body>
    <div id="test-show-hide"><img src="1.png"</div>
  </body>
</html>
<script src="jquery-3.5.1.min.js"></script>
<script>
  var div = $("#test-show-hide");
  div.hide(3000);
</script>

实现的效果是页面的图片 3秒内消失了
当然事时间和图片都是可以自己定义的
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第10张图片
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第11张图片
2、
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第12张图片
这个东西很容易敲,之后使用的时候我们再看看

3、
串行动画
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第13张图片
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第14张图片
3、

AJAX

这里简单看一下 具体的内容 我感觉需要补一下
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第15张图片
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第16张图片

jQuery学习(三)事件 + 动画 + AJAX + 扩展_第17张图片

4、扩展

1、
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第18张图片
我们实际操作一手
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第19张图片
jQuery学习(三)事件 + 动画 + AJAX + 扩展_第20张图片

2、我想自己处理一下 DIY一下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jquery test</title>
  </head>
  <style type="text/css"></style>

  <body>
    <span>h1</span>
  </body>
</html>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $.fn.highlight = function (options) {
    // 要考虑到各种情况:
    // options为undefined
    // options只有部分key
    var bgcolor = (options && options.backgroundColor) || "red";
    var color = (options && options.color) || "green";
    this.css("backgroundColor", bgcolor).css("color", color);
    return this;
  };
  $("span").highlight();
</script>

调用这个地方需要注意

本节完

你可能感兴趣的:(jquery,jquery,javascript)