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

目录
相关文章
|
3月前
|
JavaScript
jQuery parentsUntil() 方法
jQuery parentsUntil() 方法
34 10
|
3月前
|
JavaScript
jQuery parents() 方法
jQuery parents() 方法
62 7
|
4月前
|
JavaScript 前端开发
Bootstrap‘s JavaScript requires jQuery
文章讨论了网页开发中因jQuery库未正确引入或顺序不当导致的三个常见错误,并指出解决这些问题需要确保jQuery在其他依赖它的脚本之前加载。
|
JavaScript 前端开发
|
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)集成时,你的应用程序就可以全屏显示:没有浏览器的地址栏、工具栏以及状态栏。
1613 0
|
JavaScript Perl 前端开发
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.13 技巧:将footer的位置保持固定
在1.1之前的jQuery Mobile版本,滚动页面时,footer会暂时消失,停止滚动后又会显现。在引进1.1版本之后,header和footer停留在页面的顶部和底部。然而,如果header和footer可以保持在同一个位置而只是内容区域在滚动,那将会更加优美。
1485 0

热门文章

最新文章