JQuery一些常用事件

最新推荐文章于 2021-01-22 22:17:15 发布

迷失的风景web

最新推荐文章于 2021-01-22 22:17:15 发布

阅读量164

点赞数

本文链接：https://blog.csdn.net/qq_44193048/article/details/106462406

版权

1.ready: 当页面加载完时就会执行此函数事件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .box1{
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box1">

    </div>

    <script src="./src/js/tool/jquery-1.8.3.min.js"></script>
    <script>
      $().ready(function(){
        $(".box1").css({
          backgroundColor:'red'
        })
      })
    </script>
  </body>
</html>

效果图：
在这里插入图片描述
2.click：触发页面内元素的单击事件
列子：点击后把背景颜色改为绿色

<script>
        $(".box1").click(function(){
          $(".box1").css({
          backgroundColor:'green'
        })
        })
    </script>

点击前
在这里插入图片描述
点击后

3.dblclick：触发页面内元素的双击事件
列子：点击后把背景颜色改为绿色

<script>
        $(".box1").dblclick(function(){
          $(".box1").css({
          backgroundColor:'green'
        })
        })
    </script>

点击前
在这里插入图片描述
点击后

4.focus：获取焦点时触发

<script>
      $("input").focus(function(){
      $("input").css({
          backgroundColor:'green'
        })
    });
</script>

获取前：
在这里插入图片描述
获取后：

5.blur：失去焦点时触发

<script>
      $("input").blur(function () {
        $("input").css({
          backgroundColor: "green",
        });
      });
    </script>

失去前：
在这里插入图片描述
失去后：

6.mouseenter：移入事件

<script>
      $(".box1").mouseenter(function(){
          $(".box1").css({
          backgroundColor:'yellow'
        })
        })
 </script>

移入前：
在这里插入图片描述
移入后：

7.mouseleave：移出事件

<script>
        $(".box1").mouseleave(function(){
          $(".box1").css({
          backgroundColor:'green'
        })
        })
    </script>

移出前：
在这里插入图片描述
移出后：

8.on(event,selector,data,function)
event（必需）: 一个或多个由空格分隔的事件
selector: 可选。规定只能添加到指定的子元素上的事件处理程序
data: 当一个事件被触发时，要传递给事件处理函数的event.data。
function:回调函数
利用on写的移入

<script>
      $(".box1").on('mouseenter',function(){
          $(".box1").css({
          backgroundColor:'yellow'
        })
        })
    </script>

移入前：
在这里插入图片描述
移入后：

迷失的风景web

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery一些常用事件

1.ready: 当页面加载完时就会执行此函数事件。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <st
复制链接

扫一扫