`
123003473
  • 浏览: 1061123 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

JQuery -- this 和 $(this) 的区别

阅读更多
起初以为this和$(this)就是一模子刻出来。但是我在阅读时,和coding时发现,总不是一回事。

What is "this"?
In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.


$("#textbox").hover(
      function() {
           this.title = "Test";
      },
      fucntion() {
          this.title = "OK”;
      }
);

这里的this其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了,Error--报了。

Error Code:
$("#textbox").hover(
       function() {
          $(this).title = "Test";
       },
       function() {
          $(this).title = "OK";
       }
);
这里的$(this)是一个JQuery对象,而jQuery对象沒有title 属性,因此这样写是错误的。

JQuery拥有attr()方法可以get/set DOM对象的属性,所以正确的写法应该是这样:

正确的代码:
$("#textbox").hover(
      function() {
         $(this).attr(’title’, ‘Test’);
      },
      function() {
         $(this).attr(’title’, ‘OK’);
      }
);
使用JQuery的好处是它包裝了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。

分享到:
评论

相关推荐

    jquery-ui-1.12.1.custom_jqueryui_

    在标题"jquery-ui-1.12.1.custom_jqueryui_"中,"custom"一词暗示了这是一个自定义版本,意味着开发者可能根据需求选择了特定的组件和主题,以优化项目中的性能和功能。 描述中的"jquery ui 1.12.1 for html"进一步...

    关于jQuery-Ui的引用文件

    jQuery UI 是一个基于 jQuery 库的开源用户界面库,提供了丰富的组件和交互效果,让网页开发人员可以快速构建功能丰富的、具有良好用户体验的交互式界面。它包含了多个模块,如对话框(Dialog)、日期选择器...

    jquery-1.7.1.min-vsdoc.js

    这里我们将聚焦于两个重要的文件:"jquery-1.7.1.min.js"和"jquery-1.7.1.min-vsdoc.js",它们是jQuery 1.7.1版本的两个关键组成部分。 首先,我们来谈谈"jquery-1.7.1.min.js"。这是jQuery的核心库文件,经过压缩...

    jquery-ui-1.10.1.custom.zip

    - **主题构建器**: jQuery UI 允许用户通过在线主题构建器创建和定制自己的主题,满足不同项目的设计需求。 - **模块化设计**: 每个组件都是独立的模块,可以根据项目需求选择性加载,降低页面加载时间。 - **...

    jQuery-UI和jsPlumb实现拖拽连接模型demo下载

    在IT领域,jQuery-UI和jsPlumb是两个非常有用的库,它们可以帮助开发者构建交互性强、功能丰富的Web应用。本文将深入探讨这两个库的核心概念、功能以及如何利用它们实现拖拽连接模型。 首先,jQuery-UI是jQuery的一...

    jquery-ui.min1.12.1.zip

    首先,我们需要理解jQuery和jQuery UI的区别。jQuery是一个轻量级的JavaScript库,简化了DOM操作、事件处理、动画效果和Ajax交互。而jQuery UI则是在jQuery基础上构建的一套完整的用户界面解决方案,它包含了多种可...

    jquery-3.1.1.min_javascript_jquery_

    2. **事件处理**:jQuery 的事件处理方式比原生 JavaScript 更加直观和简洁。例如,`$(selector).click(function() {...})` 可用于绑定点击事件,`$(document).ready(function() {...})` 可以在页面加载完成后执行...

    jquery-ui-1.8.22

    - **js**:这个目录包含了jQuery库和jQuery UI的JavaScript文件,如`jquery.js`和`jquery-ui.js`,是实现UI效果的关键。 - **css**:这里是样式表文件,如`jquery-ui.css`,包含了默认的主题样式,开发者可以根据...

    JQuery-UI实现slider滑块带刻度

    首先,要使用 jQuery UI 的 slider 功能,你需要在页面中引入 jQuery 和 jQuery UI 的库。通常,这可以通过在 HTML 文件的 `<head>` 标签内添加如下链接来完成: ```html <script src="https://code.jquery....

    jquery-easyui-EDT-1.4.2-build1.rar 包含中文文档

    jQuery EasyUI 官方API文档中文版 version 1.4.2 Build 1 作者:王锦阳 CSDN账号:richie696 EasyUI专题 http://download.csdn.net/album/detail/343 文档 EasyUI每个组件的属性,方法和事件。用户可以很容易地扩展...

    jquery-multi-check-selectbox.rar

    jQuery库以其轻量级、易用性和强大的DOM操作能力,成为了JavaScript开发者首选的库。本文将深入探讨如何在jQuery环境下实现一个具有全选功能的多选下拉框,这一功能是基于fSelect.js插件进行改造的。 首先,我们...

    jquery-ui文档.rar

    This page demonstrates the widgets you downloaded using the theme you selected in the download builder. We've included and linked to minified versions of jQuery, your personalized copy of jQuery UI ...

    jQuery-searchableSelect下拉框搜索插件

    在实际应用中,为了提高用户体验,可以结合其他前端框架(如Bootstrap)和响应式设计,确保`jQuery-searchableSelect` 在不同设备和屏幕尺寸下都能良好运行。同时,合理地缓存和异步加载选项数据,特别是在大数据量...

    jquery-formdata-master js上传插件源码,有需要的小伙伴可以下载

    // 导入jQuery和jQuery-formdata插件 <script src="path/to/jquery.min.js"> <script src="path/to/jquery.formdata.js"> // 使用jQuery-formdata插件进行文件上传 $('form').on('submit', function(e) { e....

    前端开源库-metal-jquery-adapter

    在前端开发中,jQuery以其易用性和广泛的社区支持,成为许多开发者首选的JavaScript库。然而,随着Web应用复杂性的增加,现代框架如React、Angular和Vue.js等应运而生,它们提供了更高级的功能和更好的性能。Metal....

    jQuery-formValidator表单验证

    jQuery-formValidator支持自定义错误提示样式和位置,只需在data-validation-engine属性中指定即可。如:"promptPosition=bottomLeft"表示将错误提示放在底部左端。 七、事件监听 插件提供了多种事件供开发者监听...

    jQuery---标签式导航菜单.

    jQuery 提供了一系列强大的API和插件,使得创建动态、交互性强的导航菜单变得非常简单。本篇文章将深入探讨如何使用jQuery实现一个效果酷炫的标签式导航菜单。 ### 1. jQuery基础 首先,我们需要了解jQuery库的...

    jQuery UI Multiselect (jQuery UI 多选框)

    首先,确保在项目中引入了jQuery和jQuery UI的核心库,然后引入jQuery UI Multiselect的CSS和JS文件。接下来,可以按照以下步骤创建和初始化多选框: ```html <!-- HTML结构 --> <option value="1">Option 1 ...

    前端开源库-is-jquery-obj

    jQuery对象与普通的JavaScript对象有所不同,它们是由$.fn(即jQuery.prototype)扩展而来,包含了丰富的DOM操作和实用方法。例如,你可以通过$()选择器创建一个jQuery对象,并对HTML元素进行操作。当你需要判断一个...

    jquery-ui-1.9m2.zip

    要使用 `jQuery UI`,首先需要在页面中引入 `jQuery` 和 `jQuery UI` 的 JavaScript 文件,以及相应的 CSS 文件以设置样式。例如: ```html <script src="https://code.jquery.com/jquery-1.x.min.js"></script> ...

Global site tag (gtag.js) - Google Analytics