`
wuzhizhemu
  • 浏览: 17085 次
社区版块
存档分类
最新评论

jquery的proxy方法的简单介绍

阅读更多
今天在代码中看到了这么一个方法$.proxy(funciton,context),然后就到jquery官网查询了一下它的用法,记载一下,加深记忆,方便将来使用查询。
下面是jquery官网的介绍:
jquery1.4版本增加的两个函数:
1)

jQuery.proxy( function, context )
function
Type: Function()
The function whose context will be changed.
context
Type: PlainObject
The object to which the context (this) of the function should be set.


2)

jQuery.proxy( context, name )
context
Type: PlainObject
The object to which the context of the function should be set.
name
Type: String
The name of the function whose context will be changed (should be a property of the context object).



上面两个函数的作用是一样的,第一个函数的两个参数分别是:function指的是要调用的函数,context传递的是function中要设定并执行用到的参数。第二个函数:第一个参数context是函数中要用到的参数,而第二个参数name是String类型并且指的是要执行的function的名称,所以跟第一个是 一样的,只是参数类型的不同。
个人认为还是第一个函数比较容易记忆,建议使用第一个参数。
然后举个例子:也是参照jquery官网的。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.proxy demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
  <p><button id="test">Test</button></p>
  <p id="log"></p>
 
<script>
var obj = {
  type: "John",
  test: function() {
    $( "#log" ).append( this.type );

    $( "#test" ).off( "click", obj.test );

  }
};
$( "#test" ).on( "click", jQuery.proxy( obj.test, obj ) );
</script>
 
</body>
</html>


在上面的代码中如果点击了test按钮后,在id="log"的p标签中就会append上john。这就是在onclick事件中我们用jquery.proxy()方法对其中的对象进行了替换,就是说实际上上面的代码的执行的实际内容是这样的:
$("#test").on("click",function(){
    $("#log").append(obj.type);
    $( "#test" ).off( "click", obj.test );
});


如果绑定事件是这样写的话

$("#test").on("click",obj.test);


那么执行的方式肯定是:
$("#test").on("click",function(){
    $("#log").append($("#test").type);
    $( "#test" ).off( "click", obj.test );
});



那么最终的结果肯定添加的就是button了。
因为第二种用法跟第一种就是变量的写法不同,这里就不再详细说明了,大家可以自己试试。
分享到:
评论

相关推荐

    jquery开发必备jquery开发包

    例如,jQuery UI是一个官方的插件集,包含了诸如拖放、排序、对话框和可自定义的主题等功能,使得构建用户友好的界面变得更加简单。另外,像jQuery Validation Plugin这样的第三方插件,可以轻松实现表单验证,确保...

    jQuery权威指南-源代码

    综观现在已经出版的中文类jQuery图书,不是简单的概念性介绍,就是缺乏真正的实践指导,而且版本相对陈旧。为了让所有还没有完全掌握jQuery技术的开发者能迅速步入jQuery的殿堂,本书诞生了,相信它不会让你失望。 ...

    jQuery_doc_1.2 完整说明文档, jquery 学习必备

    这份文档详细介绍了jQuery的核心概念、语法、方法、对象和函数,帮助开发者快速上手并提高工作效率。 一、jQuery基础 在jQuery中,选择器是核心功能之一,它们允许你高效地选取HTML元素。例如,"$()"函数是jQuery的...

    最新JQuery类库 -- JQuery1.4

    - 引入了新的API方法,如`$.proxy()`,用于设置事件处理函数的作用域,确保回调函数能正确访问上下文。 - `$.each()`方法的增强,允许在循环中中断迭代,提高代码控制的灵活性。 3. **插件支持**: - jQuery 1.4...

    jquery1.7中文参考手册

    《jQuery 1.7中文参考手册》是一本详细介绍jQuery库1.7版本的资源文档,主要涵盖该版本中各种函数、方法和API的使用。jQuery是JavaScript的一个库,它极大地简化了JavaScript编程,使得网页交互变得更加简单高效。该...

    JQuery权威指南源代码

    第一个简单的jQuery程序 jQuery事件的链式写法 控制jQuery对象 jQuery控制CSS样式 第2章 使用JavaScript实现隔行变色 使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 ...

    jquery Api Chm 文档

    jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。该库的核心特性包括选择器、DOM操作、事件处理、动画效果以及Ajax交互等。通过这些API,开发者可以快速地实现...

    jQuery在线问卷答题系统代码

    2. **DOM操作**:jQuery提供了一套强大的DOM(文档对象模型)操作方法,如`$(selector).html()`, `$(selector).append()`, `$(selector).attr()`, 使得添加、删除或修改问卷的元素变得简单。例如,当用户选择一个...

    jQuery帮助文档

    5. **动画效果(Animations)**:`fadeIn()`, `fadeOut()`, `slideToggle()`等方法使得创建平滑的动画效果变得简单。 **二、jQuery API详解** 1. **$(document).ready()**:页面加载完成时执行的函数,确保DOM已经...

    Jquery全集(1.3-1.7)

    - **链式操作**: jQuery对象返回的是一个集合,允许连续调用多个方法,如`$("#element").hide().fadeIn()` - **DOM操作**: `append()`用于在元素末尾添加内容,`prepend()`则在开头添加,`html()`、`text()`用于...

    jQuery 1.2.6API文档

    jQuery提供了一些实用的工具函数,如`$.each()`遍历数组或对象,`$.trim()`去除字符串首尾空格,`$.inArray()`检查元素是否在数组中,`$.extend()`合并对象,`$.proxy()`设置函数上下文。 总之,jQuery 1.2.6 API...

    jQuery实战中文版

    9. **函数封装**: jQuery提供了`$.extend()`, `$.proxy()`, `$.Deferred()`等工具函数,帮助开发者编写更灵活和可维护的代码。 10. **版本迭代**: jQuery不断进行优化和更新,从早期的1.x版本到更现代的3.x版本,...

    jquery教程及API文档

    - **比较简单的jQuery教程**: 这类教程通常适合初学者,以通俗易懂的方式介绍jQuery的主要功能,通过逐步教学,使学习者能快速上手。 学习jQuery不仅可以提高开发效率,还能提升网页的用户体验。无论你是前端新手...

    为jQuery添加自定义事件机制

    为了实现更复杂的事件机制,可以利用jQuery的`proxy`方法来改变事件处理函数的上下文(`this`关键字指向的对象)。同时,可以使用`off`方法移除已绑定的事件,以避免内存泄漏。 ```javascript var handler = ...

    jQuery 1.4.1 中文参考

    - `jQuery.extend(object)`:合并对象,扩展jQuery的静态属性或方法。 **多库共存** - `jQuery.noConflict()`:释放jQuery的$别名,以允许与其他库一起使用。 - `jQuery.noConflict(extreme)`:更彻底地释放jQuery...

    jQuery API 详解 中文版

    jQuery对事件处理进行了封装,使得绑定和解绑事件更加简单。$.event对象提供了事件相关的全局方法,如$.event.preventDefault()和$.event.stopPropagation()。$.bind()、$.live()(已被弃用)、$.delegate()和$.on()...

    jquery中文手册、jquery中文教程、javascript框架、jquery

    - **上下文和作用域**:理解`this`关键字在jQuery方法中的变化,以及如何使用`$.proxy()`或`.call()`、`.apply()`来改变函数执行上下文。 - **插件机制**:jQuery的可扩展性体现在其插件系统,了解如何编写和使用...

    JQuery_API 1.4.3通用版

    6. **链式操作**:jQuery的方法返回的是jQuery对象本身,因此可以连续调用多个方法,如`$("#element").addClass("highlight").css("color", "red")`。 7. **插件扩展**:jQuery的广泛使用催生了大量的第三方插件,...

    jQuery1.4.1中文参考(chm)

    - **新的API**:引入了一些新的方法,如`$.proxy()`用于设置事件处理函数的上下文,`$.unique()`用于去除数组中的重复元素。 - **错误修复**:修复了一些已知的bug,确保了库的稳定性和兼容性。 总的来说,jQuery ...

    jquery 106个 经典实例

    jQuery还包含很多实用工具函数,如`$.trim()`去除字符串首尾空白,`$.inArray()`检查元素是否在数组中,`$.extend()`合并对象,`$.proxy()`设置函数上下文。 **插件生态系统** jQuery拥有庞大的插件生态,例如,`...

Global site tag (gtag.js) - Google Analytics