• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 详谈jQuery中的this和$(this)

详谈jQuery中的this和$(this)

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jQuery,this,$(this)等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

网上有很多关于jQuery的this和$(this)的介绍,大多数只是理清了this和$(this)的指向,其实它是有应用场所的,不能一概而论在jQuery调用成员函数时,this就是指向dom对象。

$(this)指向jQuery对象是无可厚非的,但this就是指向dom对象,这个是因为jQuery做了特殊的处理。 

在创建dom的jQuery对象时,jQuery不仅仅为dom创建一个jQuery对象,而且还将dom存储在所创建对象的数组中。

elem = document.getElementById(match[2]); 
if (elem && elem.parentNode) { 
  this.length = 1; 
  this[0] = elem; 
} 
 
this.context = document; 
this.selector = selector; 
return this; 

 this[0] = elem这条语句就是实现对象数组。所以javascript是很有意思的语言,使用this访问时,可以访问它所指向的对象的成员函数,而其实this又是一个对象数组。其存放的是dom对象。

先看看 $("p").each() -- 循环

each: function( callback, args ) { 
        return jQuery.each( this, callback, args ); 
    } 

 看了each函数的调用大家应该明白,jQuery.each( this, callback, args );调用的是对象数组,而对象的数组存储的是dom对象,因此在callback函数中的this自然是dom对象了

再看看$("p").hide() -- 成员函数

hide: function() { 
        return showHide( this ); 
    }, 
 function showHide( elements, show ) {var elem, display, 
        values = [], 
        index = 0, 
        length = elements.length; 
    for ( ; index < length; index++ ) { 
        elem = elements[ index ]; 
        if ( !elem.style ) { 
            continue; 
        } 
        values[ index ] = jQuery._data( elem, "olddisplay" ); 
        if ( show ) { 
            // Reset the inline display of this element to learn if it is 
            // being hidden by cascaded rules or not 
            if ( !values[ index ] && elem.style.display === "none" ) { 
                elem.style.display = ""; 
            } 
            // Set elements which have been overridden with display: none 
            // in a stylesheet to whatever the default browser style is 
            // for such an element 
            if ( elem.style.display === "" && isHidden( elem ) ) { 
                values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) ); 
            } 
        } else { 
            display = curCSS( elem, "display" ); 
            if ( !values[ index ] && display !== "none" ) { 
                jQuery._data( elem, "olddisplay", display ); 
            } 
        } 
    } 
    // Set the display of most of the elements in a second loop 
    // to avoid the constant reflow 
    for ( index = 0; index < length; index++ ) { 
        elem = elements[ index ]; 
        if ( !elem.style ) { 
            continue; 
        } 
        if ( !show || elem.style.display === "none" || elem.style.display === "" ) { 
            elem.style.display = show ? values[ index ] || "" : "none"; 
        } 
    } 
    return elements; 
} 

 从上面的代码可以看出hide行数其实调用的是showHide,而传入的第一个参数this,并不是dom对象,而是jQuery对象数组,因此showHide函数通过循环此对象数组获取每一个dom对象。

最后看看$("p").bind() -- 事件

bind: function( types, data, fn ) { 
        return this.on( types, null, data, fn ); 
    }, 

on: function( types, selector, data, fn, /*INTERNAL*/ one ) { 
        // 此部分代码省略 
        return this.each( function() { 
            jQuery.event.add( this, types, fn, data, selector ); 
        }); 
    }, 

bind函数调用的是 on函数,而on函数又是通过 each函数实现了jQuery.event.add。因此 jQuery.event.add( this中的this也就是dom对象了。所以事件中的this也就是dom对象了。

以上就是个人对于jQuery中this与$(this)的理解了,如有什么纰漏,请联系我或者给我留言

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16jQuery实现悬浮在右上角的网页客服效果代码
  • 2017-08-16jQuery实现鼠标经过显示动画边框特效
  • 2017-08-16jQuery遍历json中多个map的方法
  • 2017-08-16jQuery获取css z-index在各种浏览器中的返回值
  • 2017-08-16JQuery的Validation插件中Remote验证的中文问题
  • 2017-08-16jqGrid翻页时数据选中丢失问题的解决办法
  • 2017-08-16jQuery自定义动画函数实例详解(附demo源码)
  • 2017-08-16jquery中one()方法的用法实例
  • 2017-08-16Android中资源文件(非代码部分)的使用概览
  • 2017-08-16cssQuery()的下载与使用方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 一样的table?不一样的table(可编辑状态table)
    • 快速解决jQuery与其他库冲突的方法介绍
    • jQuery中offsetParent()方法用法实例
    • jQuery如何获取同一个类标签的所有值(默认无法获取)
    • 基于Jquery实现焦点图淡出淡入效果
    • jquery定时滑出可最小化的底部提示层特效代码
    • jQuery链式操作如何实现以及为什么要用链式操作
    • jquery+css实现侧边导航栏效果
    • jQuery示例收集
    • 读jQuery之十四 (触发事件核心方法)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有