jQuery事件操作与动画效果

事件操作

常见事件

事件 描述
click() 单击事件
dbclick() 双击事件
hover() 鼠标指针悬停事件和鼠标指针离开事件
focus() 聚焦事件
blur() 失焦事件

绑定方式

// 第一种
$().click(function(){
    
})
// 第二种
$().on('click',function(){
    
})

克隆案例

<button id="d1">克隆按钮</button>
<script>
    $('#d1').click(function () {
    // $('body').append($(this).clone())  // 不克隆事件
    $('body').append($(this).clone(true))  // 克隆事件
})
</script>

悬浮事件hover()

hover()有两次触发条件:鼠标悬浮和鼠标移开,如果要使这两个事件有不同操作,需要写两个函数。

$('p').hover(
    function () {  // 悬浮触发
        this.style.color = 'red'
    },
    function () {  // 移走触发
        this.style.color = 'black'
    }
)

监听input输入值事件

<input type="text" id="i1">
<script>
    $('#i1').on('input',function () {
        console.log($(this).val())
    })
</script>

阻止后续事件

如果给已经有事件的标签绑定事件,那么会依次执行;比如form表单中的重置按钮已经有了一个重置的事件。

如果想要取消后续事件的执行,可以使用两种方式阻止:

方式一:函数返回false

$('#d1').click(function () {
    alert(123)
    return false  //  取消当前标签对象后续事件的执行
})

方式二:使用特殊方法

$('#d1').click(function (e) {
    alert(123)
    e.preventDefault()
})

事件冒泡概念

在多个标签嵌套的并且都有相同事件的情况下,会出现逐级汇报的现象,称为事件冒泡。

事件委托

针对动态创建的标签,提前写好的事件默认是无法生效的。比如我先给所有p标签设置了单击事件,打开网页后添加的p标签都是没有单击事件的。

这时候就需要用到事件委托:把一个标签里的一个事件都委托给子标签。

// 将body内所有的点击事件交给p标签处理
$('body').on('click', 'p', function (){
    $(this).css('color','red')
})

动画效果

动画(speed单位毫秒) 描述
hide(speed) 以左上角为终点消失
show(speed) 以左上角为起点出现
slideUp(speed) 以顶部为终点收起
slideDown(speed) 以顶部为起点展开
fadeIn(speed) 淡入
fadeOut(speed) 淡出
animate() 自定义动画

自定义动画实现点赞效果:

点赞动画示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞动画示例</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>
posted @ 2022-06-24 20:12  Yume_Minami  阅读(85)  评论(0编辑  收藏  举报