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()等等!

目录
相关文章
|
9月前
|
JavaScript 前端开发 容器
js flex和faloat的区别
js flex和faloat的区别
|
JavaScript
JS中window的parent和opener对象
JS中window的parent和opener对象
155 0
|
Web App开发 前端开发 JavaScript
|
JavaScript 前端开发 移动开发
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.15 技巧:优化header和footer以便全屏查看
jQuery Mobile提供了一个叫做“全屏模式”的功能。它表示,在默认情况下header和footer是覆盖在content上面的,当点击了content区时,header和footer会消失。如果你在手机上安装了Web应用程序(应用程序间有书签图标)或者当你将自己的Web应用程序与原生的Web应用程序框架(比如Phonegap)集成时,你的应用程序就可以全屏显示:没有浏览器的地址栏、工具栏以及状态栏。
1584 0