jquery事件

最新推荐文章于 2024-07-30 11:51:58 发布

codelyq

最新推荐文章于 2024-07-30 11:51:58 发布

阅读量541

点赞数

分类专栏： # 95_javascript

本文链接：https://blog.csdn.net/weixin_41748874/article/details/80841769

版权

95_javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

jquery事件

jquery是为事件处理特别设计的。

什么是事件

页面对于不同访问者的响应叫做事件。

事件处理程序指的是当HTML当中发生某些事件时候所调用的方法。

实例：

在元素上面移动鼠标

选取单选按钮

点击元素

在事件当中经常使用术语”触发”或者”激发”，例如: “当您按下按键的时候触发keypress事件”

常见的DOM事件:

鼠标事件: click、dbclick、mouseenter、mouseleave

键盘事件：keypress、keydown、keyup

表单事件：sublit、change、focus、blur

文档/窗口事件: load、resize、scroll、unload

jquery事件方法语法

在jquery当中，大多数逇DOM事件都有一个等效的jquery方法。

页面当中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
    //动作触发后执行的代码
})

常见的jquery事件方法

$(document).ready()

$(document).ready()方法允许我们在文档完全加载后执行函数，该事件方法在jquery语法章节当中已经提到过了。

click()

click()方法是当按钮点击事件被触发的时候会调用的一个函数。

该函数在用户点击HTML元素的时候执行。

在下面的实例当中，当点击事件在某个<p>元素上触发的时候，隐藏当前的<p>元素:

$("p").click(function(){
  $(this).hide();
});

dblclick()

当双击元素的时候，会发生dblclick事件。

dblclick()方法触发dblclick事件，或规定当发生dblclick事件时候运行的函数：

$("p").dblclick(function(){
  $(this).hide();
});

mouseenter()

当鼠标指针穿过元素的时候，会发生mouseenter事件。

mouseenter()方法触发mouseenter事件，或者规定当发生mouseenter事件的时候运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
  });
});
</script>
</head>
<body>

<p id="p1">鼠标指针进入此处，会看到弹窗。</p>

</body>
</html>

mouseleave()

当鼠标指针离开元素的时候，会发生mouseleave事件。

mouseleave()方法触发mouseleave事件，或者规定当发生mouseleave事件时候运行的函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
  });
});
</script>
</head>
<body>

<p id="p1">这是一个段落。</p>

</body>
</html>

mousedown()

当鼠标指针移动到元素上方的时候，并按下鼠标按键的时候，会发生mousedown事件。

mousedown()方法触发mousedown事件，或规定当发生mousedown事件的时候运行的函数:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
  });
});
</script>
</head>
<body>

<p id="p1">这是一个段落</p>

</body>
</html>

mouseup()

当在元素上松开鼠标按钮的时候，会发生mouseup事件。

mouseup()方法触发了mouseup事件。或者规定当发生mouseup事件的时候运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
  });
});
</script>
</head>
<body>

<p id="p1">这是一个段落。</p>

</body>
</html>

hover()

hover()方法用于模拟光标悬停的事件。

当鼠标移动到元素上的时候，会触发指定的第一个函数(mouseenter);

当鼠标移出这个元素的时候，会触发指定的第二个函数(mouseleave);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("#p1").hover(
        function(){
            alert("你进入了 p1!");
        },
        function(){
            alert("拜拜! 现在你离开了 p1!");
        }
    )
});
</script>
</head>
<body>

<p id="p1">这是一个段落。</p>

</body>
</html>

focus()

当元素获得焦点的时候，发生focus事件

当通过鼠标点击选中元素或者通过tab键定位到一个元素的时候，该元素就会获得焦点。

focus()方法触发了focus事件，或规定当发生focus事件时候运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>

blur()

当元素失去焦点的时候，发生blur事件。

blur()方法触发了blur事件，或者规定当发生blur事件的时候运行的函数:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>