第三章jQuery事件与特效

late summer182

于 2024-09-12 13:55:41 发布

阅读量375

点赞数 14

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_63533204/article/details/142173786

版权

1 jQuery中的事件

1.1 定义元素监听事件

语法：$(选择器).监听事件名称(处理函数);

说明：监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click

例如：

为页面中所有的 button 绑定 onclick,并关联处理函数 fun1

$("button").click(fun1)

为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2

$("tr").mouseover(fun2)

1.2 鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件

常见的鼠标事件区别：

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

鼠标事件方法的区别：

方法	相同点	不同点
mouseover( )	鼠标进入被选元素时会触发	鼠标在其被选元素的子元素上来回进入时：触发mouseover( ) 不触发mouseenter
mouseenter( )
mouseout( )	鼠标离开被选元素时会触发	鼠标在其被选元素的子元素上来回离开时：触发mouseout 不触发mouseleave
mouseleave( )

1.3 键盘事件

键盘事件 通常在可以获取焦点的元素上触发，比如输入框

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

$("input").keydown(function(k){
  //在 JavaScript 中，当某个事件被触发时，浏览器会自动生成一个与该事件相关的事件对象（Event 对象），
//并将其作为参数传递给事件处理函数,处理函数可以定义参数(k)接收事件对象。
   k.key   //获取键盘按下后对应的字符
});

1.4 浏览器事件

通常用于监控浏览器窗口的大小变化，并根据窗口尺寸变化执行相应的操作。

$(window).resize( );

$(window).resize(function() {
  console.log("The window has been resized.");
});//在这个例子中，每次调整浏览器窗口大小时，会执行 console.log() 输出消息。

1.4 常见的事件

2 事件的绑定与解除绑定

2.1 on绑定事件

在 jQuery 中，on() 方法是一个强大的事件绑定方法，它可以用于给元素绑定一个或多个事件处理程序。它是 jQuery 中较新的绑定事件的方式，取代了老式的如 bind()、live() 和 delegate() 等方法。

on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法

语法：$(选择器).on(event, childSelector ,data,function)

event：字符串类型，表示要绑定的事件类型（如 "click"、"mouseover" 等）。
childSelector：可选。表示只为某些子元素绑定事件，常用于事件委托。
data：可选。额外的数据传递给事件处理函数。
function：事件触发时要执行的回调函数。

语法：

jQuery元素对象.on(事件名称,function(){
//逻辑代码
})
其中：事件名称是jQuery的事件方法的方法名称，例如：click、mouseover、mouseout、focus、blur等

示例;

//绑定单个事件
$("#myButton").on("click", function() {
  alert("Button clicked!");
});


//绑点多个事件  通过一个对象来传递不同的事件及其对应的处理函数。
$("#myElement").on({
  mouseenter: function() {
    $(this).css("background-color", "lightblue");
  },
  mouseleave: function() {
    $(this).css("background-color", "");
  }
});
//多个事件 一个回调函数
$("#parent").on("click chenge moseover", function() {
  alert("Child element clicked!");
});

2.2 off解绑事件

语法：

jQuery元素对象.off(事件名称);

其中：参数事件名称如果省略不写，可以解绑该jQuery对象上的所有事件

移除特定事件：

// 绑定事件
$("#myButton").on("click", function() {
  console.log("Button clicked!");
});

// 移除 click 事件
$("#myButton").off("click");

移除多个事件：

// 绑定多个事件
$("#myButton").on("click mouseover", function() {
  console.log("Event triggered!");
});

// 移除 click 和 mouseover 事件
$("#myButton").off("click mouseover");

移除所有事件：

如果你不传入任何参数，off() 方法会移除该元素上所有事件。

// 绑定多个事件
$("#myButton").on("click mouseover", function() {
  console.log("Event triggered!");
});

// 移除所有绑定的事件
$("#myButton").off();

移除指定回调函数：

只有 handleClick 这个回调函数会被移除，其他绑定的 click 事件不会受影响。

function handleClick() {
  console.log("Button clicked!");
}

// 绑定 click 事件并指定回调函数
$("#myButton").on("click", handleClick);

// 移除特定回调函数
$("#myButton").off("click", handleClick);

3 复合事件

3.1 hover()方法

hover()方法相当于mouseover与mouseout事件的组合

语法：

hover([over,]out)

其中：

over代表鼠标移入事件触发的函数；

out代表鼠标移出事件触发的函数。

$("#myDiv").hover(function(){
  $(this).css("background","green");
    },function(){
  $(this).css("background","red");
});

3.2 toggle()方法

toggle()方法用于模拟鼠标连续click事件：

该方法允许在单击元素时，依次执行两个回调函数，第一次点击执行第一个回调，第二次点击执行第二个回调依次以此交替切换行为

$("input").toggle(
        function(){$("body").css("background","#ff0000");},
         function(){$("body").css("background","#00ff00");},
          function(){$("body").css("background","#0000ff");}
    )

toggle() 方法用于在显示和隐藏元素之间切换

每次调用该方法时，如果元素是可见的，它会被隐藏；如果元素是隐藏的，它会显示。

<body>
		<input type="text" />
		<p>554455</p>
	</body>

$("input").click(function(){$("p").toggle();})

toggleClass( )可以对样式进行切换

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    .st1{
      background-color: red;
    }
  </style>
  <body>
    <input type="text" />
    <p>554455</p>
  </body>
  <script src="../Test01/practise2/js/jquery-1.12.4.js"></script>
  <script>
    $("input").click(function(){
      $("p").toggleClass("st1");
    })
  </script>
</html>

4 jQuery动画效果

4.1 显示效果

方法

方法名称	解释
show([speed],[easing],[fn]])	显示元素方法
hide([speed],[easing],[fn]])	隐藏元素方法
toggle([speed],[easing],[fn])	切换元素方法，显示的使之隐藏，隐藏的使之显示

参数

参数名称	解释
speed	三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing	用来指定切换效果，默认是"swing"(摆动)，可用参数"linear"(直线)
fn	在动画完成时执行的函数，每个元素执行一次

示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
      function hideFn(){
        $("#showDiv").hide("slow","swing");
      }
      function showFn(){
        $("#showDiv").show("normal","swing");
      }
      function toggleFn(){
        $("#showDiv").toggle(5000,"linear");
      }
    </script>
  </head>
  <body>
    <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    <input type="button" value="点击按钮显示div" onclick="showFn()">
    <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

    <div id="showDiv" style="width:300px;height:300px;background:red">
      div显示和隐藏
    </div>
  </body>
</html>

4.2 滑动效果

方法

方法名称	解释
slideDown([speed,[easing],[fn]])	向下滑动方法
slideUp([speed,[easing],[fn]])	向上滑动方法
slideToggle([speed],[easing],[fn])	切换元素方法，向下使之向下,向下使之向上

参数

参数名称	解释
speed	三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing	用来指定切换效果，默认是"swing"，可用参数"linear"
fn	在动画完成时执行的函数，每个元素执行一次

示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
      function hideFn(){
        $("#showDiv").fadeOut("slow","swing");
      }
      function showFn(){
        $("#showDiv").fadeIn("normal","swing");
      }
      function toggleFn(){
        $("#showDiv").fadeToggle(5000,"linear");
      }
    </script>
  </head>
  <body>
    <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    <input type="button" value="点击按钮显示div" onclick="showFn()">
    <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

    <div id="showDiv" style="width:300px;height:300px;background:red">
      div显示和隐藏
    </div>
  </body>
</html>

4.3 淡入淡出效果

方法

方法名称	解释
fadeIn([s],[e],[fn])	淡入方法
fadeOut([s],[e],[fn])	淡出方法
fadeTo([[s],o,[e],[fn]])	设置元素的透明度
fadeToggle([s,[e],[fn]])	淡入淡出之间切换

参数

参数名称	解释
speed	三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing	用来指定切换效果，默认是"swing"，可用参数"linear"
fn	在动画完成时执行的函数，每个元素执行一次
opacity	一个0至1之间表示透明度的数字

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    function hideFn(){
        $("#showDiv").fadeOut(1000);//1秒钟淡出(隐藏)
    }
    
    function showFn(){
        $("#showDiv").fadeIn(1000);//1秒钟淡入(显示)
    }
    
    function toggleFn(){
        $("#showDiv").fadeToggle(1000);//1秒钟淡入淡出之间切换
    }
    
    function fadeTofn(){
        $("#showDiv").fadeTo(2000,0.5);//2秒钟设置div的透明度为50%
    }
</script>
</head>
<body>
    <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    <input type="button" value="点击按钮显示div" onclick="showFn()">
    <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
    <input type="button" value="点击按钮设置div透明度" onclick="fadeTofn()">

    <div id="showDiv" style="width:300px;height:300px;background:red">
        div显示和隐藏
    </div>
</body>
</html>

late summer182

关注

14
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
第三章jQuery事件与特效

语法：$(选择器).监听事件名称(处理函数);说明：监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click例如：为页面中所有的 button 绑定 onclick,并关联处理函数 fun1为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2。
复制链接

扫一扫