jquery中$.proxy及wrap()的使用

简介: jquery中$.proxy及wrap()的使用

jquery中$.proxy

// 正常的this使用
$('#chenchuan').click(function () {
  // 这个this是我们所期望的,当前元素的this.
  $(this).addClass('aNewClass');
});


//并非所期望的this
$('#chenchuan').click(function () {
  setTimeout(function () {
    // 这个this指向的是settimeout函数内部,而非之前的html元素
    $(this).addClass('aNewClass');
  }, 1000);
});

这时候通常的一种做法是这样的:

$('#chenchuan').click(function () {
  var that = this;   //设置一个变量,指向这个需要的this
  setTimeout(function () {
    // 这个this指向的是settimeout函数内部,而非之前的html元素
    $(that).addClass('aNewClass');
  }, 1000);
});

但是,在使用了jquery框架的情况下, 有一种更好的方式,就是使用$.proxy函数。 jQuery.proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context )语境。

有两种语法:

jQuery.proxy(function, context)
/**function将要改变上下文语境的函数。
** context函数的上下文语境(`this`)会被设置成这个 object 对象。
**/
jQuery.proxy(context, name)
/**context函数的上下文语境会被设置成这个 object 对象。
**name将要改变上下文语境的函数名(这个函数必须是前一个参数 ‘context’ **对象的属性)
**/

上面的例子使用这种方式就可以修改成:

$('#chenchuan').click(function () {
  setTimeout($.proxy(function () {
    $(this).addClass('aNewClass');
  }, this), 1000);
});

jquery中wrap()方法

wrap(),就是包裹的意思,就是在所在器外层包裹一层东西。

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$(".inner").wrap(function () {
  return "<div class='" + $(this).text() + "'></div>";
});

结果如下

<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

类似的用法还有.wrapAll()、.wrapInner()、.unwrap()等等!

目录
相关文章
|
22天前
|
JavaScript Serverless
jquery attr()方法
jquery attr()方法
15 0
|
JavaScript
js 获取 iframe 里面的 document 以及 window
js 获取 iframe 里面的 document 以及 window
571 0
|
JavaScript 前端开发
js显示隐藏 display visibility以及jquery里的show hide的区别
js显示隐藏 display visibility以及jquery里的show hide的区别
144 0
js显示隐藏 display visibility以及jquery里的show hide的区别
|
JavaScript
JS中window的parent和opener对象
JS中window的parent和opener对象
152 0
|
Web App开发 前端开发 JavaScript