细说 jQuery 事件篇（二） - 处理简单事件

ckllj 发布于2019-08-19 14:51 / 1905人阅读

摘要：我们可以利用可以对用户发起的事件进行处理，这里以样式转换为例来说明。其他类似的操作事件都可以通过这个方法，将处理事件的程序绑定到同名事件上面。

我们可以利用 jQuery 可以对用户发起的事件进行处理，这里以样式转换为例来说明。

增添样式

基于用户的事件，对特定的 DOM 元素样式进行转换是 jQuery 处理事件中比较常见的情形，举例说明，当用户点击输入框后，会增添 highlight 的样式：

highlight 的样式：

.highlight {
  border: 1px solid orange；
}

jQuery 代码：

  $("input[type="text"]").on("click", function() {
    $(this).addClass("highlight");
  });

1.《Learning jQuery》一书中先介绍使用 .on() 方法，但是书中也明确指明这不是最佳的方法，所以我就按照书中的节奏来记录下笔记。
2.这里的 this 指的是当前的 DOM 元素，并不是 jQuery 对象。

效果为：

点击后：

简写事件

在上例中，我们通过 .on() 方法来处理 click 事件，而 jQuery 实际上提供了一种更为简单的方法，我们可以使用 .click() 方法来简写代替。
因此，上例中的 jQuery 代码可以简写为：

$(function() {
  $("input[type="text"]").click(function() {
    $(this).addClass("highlight");
  });
})

此时，取得的效果是相同，不过代码要比之前简洁不少。
其他类似的 DOM 操作事件都可以通过这个方法，将处理事件的程序绑定到同名事件上面。

折叠样式

对于上例中添加样式的效果，我们希望在点击第二次时又能取消该样式，即常见的折叠样式的需求，在 jQuery 中，我们可以通过 toggleClass 来实现。

$(function() {
  $("input[type="text"]").click(function() {
    $(this).toggleClass("highlight");
  });
})

此时点击第一次后，highlight 样式添加成功，点击第二次后，样式取消成功，如此这般。

移除样式

假设原本输入框是有指定样式的，通过点击输入框后我们希望取消该样式，我们可以使用 removeAttr 方法。

alert 样式：

.alert {
  border: 1px solid red;
}

那么移除该样式的 jQuery 代码可以这样写：

  $("input[type="text"]").click(function() {
    $(this).removeClass("alert");
  });

而如果希望点击输入框后，先移除现有的 alert 样式，而增添 highlight 样式，则可以利用 jQuery 的连缀方法：

  $("input[type="text"]").click(function() {
    $(this).removeClass("alert").addClass("highlight");
  });

效果为：

点击后：

参考

http://book.douban.com/subject/24669823/

专线服务 idc机房托管 jquery的事件处理事件jquery jquery事件 jquery键盘事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78143.html

细说 jQuery DOM操作篇（二） - DOM 树操作

摘要：此时，点击新建的将会触发。设置元素内容的方法则使用上述两种方法，将新内容作为参数传递即可，例如修改上例中的文本内容方法同理。我们知道通过 $() 函数可以访问文档中的元素，并返回一个 jQuery 对象，并且通过一系列方法，我们可以修改元素的样式和内容，实际上，我们还可以通过该函数做更多的事情，例如添加、删除、复制等操作来改变 DOM 树的结构。创建元素我们可以通过 $() ...

Anchorer 2019-08-21 12:20 评论0 收藏0
细说 jQuery 事件篇（三） - 事件传播

摘要：是如何决定由哪个元素来处理事件的，以及又是如何优化处理这个问题的，这些都涉及到了事件传播。事件冒泡的弊端事件冒泡可能会导致意料之外的行为，例如在响应事件时，依旧是上例，当为最外层的添加一个事件。使用方法可以避免事件传播导致的问题。 Javascript 是如何决定由哪个元素来处理事件的，以及 jQuery 又是如何优化处理这个问题的，这些都涉及到了事件传播。事件传播策略当页面内...

Cc_2011 2019-08-19 14:51 评论0 收藏0
细说 jQuery 事件篇（四） - 改变事件过程

摘要：事件对象是一种结构，它会在元素获得处理事件的机会时传递给调用的事件处理程序。事件对象的属性指的是事件目标，它将保存发生事件的目标元素。所以，接下来我们就要想办法改变事件过程来阻止这个行为。在《细说 jQuery 事件篇（三） - 事件传播》中提到了事件冒泡可能造成的弊端，当时举了 mouseout 的例子，对于 mouseout 这个特殊情况，我们可以用 hover 方法来解决，...

nifhlheimr 2019-08-19 14:53 评论0 收藏0
细说 jQuery Ajax操作篇（一） - 数据加载

摘要：同样将其绑定在按钮点击事件上查看结果为这里需要注意，如果文档内的格式错误，虽然不会报错，但是将无法执行回调函数。 Ajax 通俗来讲即不需要刷新页面即可从服务器或客户端上加载数据，当然这些数据的格式是多种多样的。加载 HTML 我们通常使用加载 HTML 的方法来加载 HTML 片段，并插入到指定位置，假设当前页面为： load showImg(http://segmen...

paulli3 2019-08-21 12:21 评论0 收藏0
细说 jQuery 事件篇（五） - 事件的移除和重绑定

摘要：一种做法是在事件处理程序中使用条件语句进行判断，另一种更彻底的做法就是直接移除该处理程序。事件重绑定我们添加一个按钮，当点击按钮后，所有的事件的处理程序又被重新绑定回来。如果我们需要移除已经注册的事件处理程序，使某些处理程序失效。一种做法是在事件处理程序中使用条件语句进行判断，另一种更彻底的做法就是直接移除该处理程序。移除处理程序假设有个 div 和 button，当我们点击...

boredream 2019-08-19 14:53 评论0 收藏0