jQuery学习（三）事件 + 动画 + AJAX + 扩展

最新推荐文章于 2023-04-12 13:28:30 发布

小白追梦

最新推荐文章于 2023-04-12 13:28:30 发布

阅读量260

点赞数

分类专栏： jquery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_43815680/article/details/108665822

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1 事件

在这里插入图片描述

1-1 鼠标事件
1、点击事件
在这里插入图片描述

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

2、
各种事件
在这里插入图片描述
3、
比较重要的ready事件

很重要的一点内容

4、
事件参数

5、在这里插入图片描述
6、

7、

2 动画

1、在这里插入图片描述

我整个图片实际测试一下

<!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秒内消失了
当然事时间和图片都是可以自己定义的
在这里插入图片描述

2、

这个东西很容易敲，之后使用的时候我们再看看

3、
串行动画
在这里插入图片描述

3、

AJAX

这里简单看一下具体的内容我感觉需要补一下
在这里插入图片描述

在这里插入图片描述

4、扩展

1、
在这里插入图片描述
我们实际操作一手

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>

调用这个地方需要注意

本节完

小白追梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习（三）事件 + 动画 + AJAX + 扩展

1 事件1-1 鼠标事件1、点击事件<script> var a = $("#test-link"); a.click(function () { alert("Hello"); });</script>2、各种事件3、比较重要的ready事件很重要的一点内容4、事件参数5、6、7、2 动画1、我整个图片实际测试一下<!DOCTYPE html><html> <head&
复制链接

扫一扫

专栏目录