jquery中封装函数传递当前元素的方法示例

在jQuery中，封装函数传递当前元素是非常常见的需求，通常是为了在函数内部操作当前元素进行数据处理、样式修改、事件绑定等操作。下面是两条示例说明：

示例一

1. 定义封装函数

封装一个函数，函数名为 doSomething，该函数将要对传入的参数进行处理，并且需要同时操作当前元素，实现代码如下：

// 函数定义
function doSomething(selector) {
  // 传递了选择器参数，查找对应元素
  var $elem = $(selector);

  // 对传入的参数进行处理...
  // ...

  // 操作当前元素
  $elem.css('color', 'red');
}

// 调用
doSomething('#my-element');

2. 调用函数

调用封装的函数 doSomething，并传入参数 "#my-element"，实现方法如下：

<div id="my-element">Hello World!</div>

// 调用函数
doSomething('#my-element');

调用后，该函数会查找页面中的 #my-element 元素，对传入的参数进行处理，并将操作元素的文本颜色修改为红色。

示例二

1. 定义封装函数

封装一个函数，函数名为 onHover，该函数将在当前元素上绑定鼠标悬停事件，并且需要同时在事件处理函数内部操作当前元素，实现代码如下：

// 函数定义
function onHover(selector) {
  // 传递了选择器参数，查找对应元素
  var $elem = $(selector);

  // 在元素上绑定鼠标悬停事件
  $elem.hover(function() {
    // 鼠标进入事件处理函数
    $(this).css('background-color', '#eee');
  }, function() {
    // 鼠标离开事件处理函数
    $(this).css('background-color', '#fff');
  });
}

// 调用
onHover('#my-element');

2. 调用函数

调用封装的函数 onHover，并传入参数 "#my-element"，实现方法如下：

<div id="my-element">Hover me!</div>

// 调用函数
onHover('#my-element');

调用后，该函数会查找页面中的 #my-element 元素，为其绑定鼠标进入和离开事件，并在事件处理函数内部操作当前元素的背景颜色，实现鼠标悬停时的背景高亮效果。