JQuery事件

最新推荐文章于 2023-01-07 11:07:03 发布

代码小小爱好者

最新推荐文章于 2023-01-07 11:07:03 发布

阅读量200

点赞数

分类专栏：日常

本文链接：https://blog.csdn.net/weixin_44799698/article/details/103197918

版权

日常专栏收录该内容

47 篇文章 0 订阅

订阅专栏

jQuery（是为事件处理特别设计的）：

1.jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优

秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write

Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaSc

ript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文

档操作、事件处理、动画设计和Ajax交互。

2.jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功

能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥

有便捷的插件扩展机制和丰富的插件。

3.jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理

等操作。

4.jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事

件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

5.jQuery可以修改网页中的内容

6.jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块

jQuery 事件函数：

jQuery 事件处理方法是 jQuery 中的核心函数。

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

由事件“触发”（或“激发”）经常会被使用。

通常会把 jQuery 代码放到部分的事件处理方法中：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

当按钮的点击事件被触发时会调用一个函数：

$("button").click(function() {..some code... } )

jQuery 事件方法语法：

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

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

$("p").click();

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

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

常用的 jQuery 事件方法：

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

该事件方法在 jQuery 语法章节中已经提到过。

click()

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

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

尝试一下：

1.dblclick()

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

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运

行的函数：

实例

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

2.mouseleave()

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

mouseleave() 方法触发 mouseleave 事件，或规定当发生

mouseleave 事件时运行的函数：

实例

$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});

3.mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生

mousedown 事件。

mousedown() 方法触发 mousedown 事件，或规定当发生

mousedown 事件时运行的函数：

实例

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原
则时，您的代码会更恰当且更易维护：
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

下面是 jQuery 中事件方法的一些例子：

$(document).ready(function)：将函数绑定到文档的就绪事件（当

文档完成加载时）

$(selector).click(function) ：触发或将函数绑定到被选元素的点击

事件

$(selector).dblclick(function)：触发或将函数绑定到被选元素的双

击事件

$(selector).focus(function) ：触发或将函数绑定到被选元素的获得

焦点事件

$(selector).mouseover(function) ：触发或将函数绑定到被选元素的

鼠标悬停事件

代码小小爱好者

关注

0
点赞
踩
0

收藏

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

jQuery（是为事件处理特别设计的）：1.jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“writeLess，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTM...
复制链接

扫一扫

专栏目录