jQuery 事件

肯古巴
175 阅读4分钟

jQuery 常用事件

方法描述
blur()触发、或将函数绑定到指定元素的 blur 事件
focus()触发、或将函数绑定到指定元素的 focus 事件
click()触发、或将函数绑定到指定元素的 click 事件
dblclick()触发、或将函数绑定到指定元素的 double click 事件
change()触发、或将函数绑定到指定元素的 change 事件
die()移除所有通过 live() 函数添加的事件处理程序。
error()触发、或将函数绑定到指定元素的 error 事件
delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器
bind()向匹配元素附加一个或更多事件处理器
unbind()从匹配元素移除一个被添加的事件处理器
event.isDefaultPrevented()返回 event 对象上是否调用了 event.preventDefault()。
event.pageX相对于文档左边缘的鼠标位置。
event.pageY相对于文档上边缘的鼠标位置。
event.preventDefault()阻止事件的默认动作。
event.result包含由被指定事件触发的事件处理器返回的最后一个值。
event.target触发该事件的 DOM 元素。
event.timeStamp该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type描述事件的类型。
event.which指示按了哪个键或按钮。
keydown()触发、或将函数绑定到指定元素的 key down 事件
keypress()触发、或将函数绑定到指定元素的 key press 事件
keyup()触发、或将函数绑定到指定元素的 key up 事件
live()为当前或未来的匹配元素添加一个或多个事件处理器
load()触发、或将函数绑定到指定元素的 load 事件
mousedown()触发、或将函数绑定到指定元素的 mouse down 事件
mouseup()触发、或将函数绑定到指定元素的 mouse up 事件
mousemove()触发、或将函数绑定到指定元素的 mouse move 事件
mouseenter()触发、或将函数绑定到指定元素的 mouse enter 事件(不冒泡)
mouseleave()触发、或将函数绑定到指定元素的 mouse leave 事件（不冒泡)
mouseover()触发、或将函数绑定到指定元素的 mouse over 事件（冒泡)
mouseout()触发、或将函数绑定到指定元素的 mouse out 事件（冒泡)
hover()这个hover()方法其实就是mouseenter()和mouseleave()的合并方法
one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()文档就绪事件（当 HTML 文档就绪可用时）
resize()触发、或将函数绑定到指定元素的 resize 事件
scroll()触发、或将函数绑定到指定元素的 scroll 事件
select()触发、或将函数绑定到指定元素的 select 事件
submit()触发、或将函数绑定到指定元素的 submit 事件
toggle()绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()所有匹配元素的指定事件
triggerHandler()第一个被匹配元素的指定事件
undelegate()从匹配元素移除一个被添加的事件处理器，现在或将来
unload()触发、或将函数绑定到指定元素的 unload 事件

jQuery CSS 操作函数

下面列出的这些方法设置或返回元素的 CSS 相关属性。

CSS 属性描述
css()设置或返回匹配元素的样式属性。
height()设置或返回匹配元素的高度。
offset()返回第一个匹配元素相对于文档的位置。
offsetParent()返回最近的定位祖先元素。
position()返回第一个匹配元素相对于父元素的位置。
scrollLeft()设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop()设置或返回匹配元素相对滚动条顶部的偏移。
width()设置或返回匹配元素的宽度。

获取宽度与高度

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="username" id="username">
<style>
  input {
    margin: 10px;
  }
</style>

<script>
  $(function () {
    console.log($("#username").width())                   //返回元素的宽
    console.log($("#username").height())                  //返回元素的宽

    console.log($("#username").innerWidth())              //返回元素的宽度（包括内边距）
    console.log($("#username").innerHeight())             //返回元素的高度（包括内边距）

    console.log($("#username").outerWidth())              //返回元素的宽度（包括内边距和边框）
    console.log($("#username").outerHeight())             //返回元素的高度（包括内边距和边框）

    console.log($("#username").outerWidth(true))          //返回元素的宽度包括内边距、边框和外边距）
    console.log($("#username").outerHeight(true))         //返回元素的高度（包括内边距、边框和外边距）


    console.log($(window).width(), $(window).height())     //浏览器可视区的宽和高
    console.log($(document).width(), $(document).height()) //设置或者获取元素的宽和高

  })
</script>

设置宽高

  • .width(值) -- 设置宽度
  • .height(值) -- 设置高度
<input type="text">
<input type="text" id="username">
<input type="text" id="password">

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  //获取div的宽和高
  var w = $("input:eq(0)").css("width");
  var h = $($("input").get(1)).css("height");

  //设置div的宽和高
  $("#username").css("width", (parseInt(w) * 2) + "px");
  $("#username").css("height", (parseInt(h) * 2) + "px");
  $("#password").width(1300).height(200)
</script>

offset() 相对页面的绝对位置

  • 获取或者是设置元素的left和top
  • .offset() 返回的是一个对象,该对象中两个属性,left和top
  • offset() 获取left或者是top的时候是包括margin的值
<style>div{width: 100px;height: 100px;background-color: antiquewhite;margin: 10px;}</style>

<div id="div"></div>
<input type="button" value="按钮" id="btn">

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function () {
    $("#btn").click(function () {
      // 用css()获取left和top，获取的是字符串类型
      var l = $("#div").css("margin-left");
      var t = $("#div").css("margin-left");
      $("#div").css("margin-left", parseInt(l) * 2 + "px");
      $("#div").css("margin-top",  parseInt(t) * 2 + "px");

      //left和top包含left和margin-left和top和margin-top的值
      $("#div").css("margin-left", $("#div").offset().left * 2);
      $("#div").css("margin-top", $("#div").offset().top * 2);

      //该方法获取的是一个对象,该对象中有两个属性,left和top
      $("#div").offset({ "left": 500, "top": 250 });
    });
  });
</script>

position() 相对于父元素的位置（偏移）

该方法返回的对象包含两个整型属性：top 和 left，以像素计 此方法只对可见元素有效

<style>button{margin-top: 100px;margin-left: 100px;}</style>

<button>获得 p 元素的位置坐标</button>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script>
  $(document).ready(function () {
    $("button").click(function () {
      position = $(this).position();
      offset = $(this).offset();
      console.log("Left position: " + position.left + " Top position: " + position.top);
      console.log("Left offset: " + offset.left + " Top offset: " + offset.top);
    });
  });
</script>

⚠️注意: offset() 相对页面的绝对位置，position()相对于父元素的位置（偏移）

sccroll() 滚动事件

窗口滚动

$(window).scroll(function(){  })

文档滚动

$(document).scroll(function(){  })

获取页面滚动距离

//JQ中
$(selector).scrollTop()   //向上卷曲出去的距离
$(selector).scrollLeft()  //向左卷曲出去的距离

$(document).scrollTop();  
$(document).scrollLeft();


//JS DOM中 使用属性而不是方法获取
scrollLeft  //向左卷曲出去的距离的值
scrollTop   //向上卷曲出去的距离的值
scrollWidth //元素中内容的实际的宽
scrollHeight //元素中内容的实际的高

<style>
  div { width: 100%; height: 10000px; }
  input{position: fixed;top:0}
</style>

<div></div>
<input type="button" value="按钮" id="btn">

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).scroll(() => {
    console.log($(document).scrollLeft(), $(document).scrollTop());
    
     //div滚动上下滚动条的时候,一直获取他的向上卷曲出去的值
    console.log($(this).scrollTop());
  })
</script>

scrollTop 滚动

$('#app').scrollTop(100);

animate 动画滚动

let top = $(`.location-agreement-20210618`).offset().top
$("#app").animate({ scrollTop: top }, 300);
return Toast.info('请勾选协议');

事件参数与按键

onmousewheel 鼠标滚动

⚠️注意: JS的DOM对象中与JQ对象的事件只是多数DOM多了on
DOM对象中

<script>
  window.onload = function () {
      document.onmousewheel = function (e) {
        console.log(e,e.deltaY)
      }
    }
</script>

**JQ中 **
jquery.mousewheel 鼠标滚动插件使用

<style>
  #cube {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 10px;
    left: 65px;
    background: yellow;
    opacity: 0.5;
  }
</style>

<body>
  <div id="cube"></div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-mousewheel/3.1.9/jquery.mousewheel.js"></script>
<script type="text/javascript">
  $(function () {
    $('#cube').on('mousewheel', function (event) {
      //输出滚轮事件响应结果
      console.log(event.deltaX, event.deltaY, event.deltaFactor);

      //上下滚动时让鼠标垂直移动
      var newTop = $(this).position().top - event.deltaY + "px";
      $(this).css("top", newTop);

      //左右滚动时让鼠标水平移动
      var newLeft = $(this).position().left + event.deltaX + "px";
      $(this).css("left", newLeft);
    });
  });
</script>

keydown() 键盘按下事件

<style>
  div { width: 150px; height: 150px; }
</style>

<div></div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script>
  $(function () {
    $(window).keydown(function (e) {
      console.log(e.keyCode)
      switch (e.keyCode) {
        case 37: $("div").css("background-color", "red"); break;
        case 38: $("div").css("background-color", "black"); break;
        case 39: $("div").css("background-color", "gray"); break;
        case 40: $("div").css("background-color", "yellow"); break;
      }
    })
  })
</script>

mousedown() 鼠标按下事件

<style>
  div {
    width: 150px;
    height: 150px;
  }
</style>

<div></div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script>
  $(function () {
    //事件参数对象
    $(window).mousedown(function (e) {
      console.log(arguments);

      $(document).mousedown(function (e) {
        //判断用户按下鼠标的时候,有没有按下alt键 按键+鼠标键组合
        if (e.altKey) {
          console.log("按下了alt键,鼠标也按下了");
        } else if (e.shiftKey) {
          console.log("按下了shift键,鼠标也按下了");
        } else if (e.ctrlKey) {
          console.log("按下了ctrl键,鼠标也按下了");
        } else {
          console.log("用户按下了鼠标");
          console.log(e, e.button)
        }
      })
    })
  })
</script>
avatar
文章
阅读
粉丝