• 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)的区别及获取$(this)子元素对象的方法

浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法

作者: 字体:[增加 减小] 来源:互联网

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

1.JQuery this和$(this)的区别

相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢?

首先来看看JQuery中的  $()  这个符号,实际上这个符号在JQuery中相当于JQuery(),即$(this)=jquery();也就是说,这样可以返回一个jquery对象。那么,当你在网页中alert($('#id'));时,会弹出一个[object Object ],这个object对象,也就是jquery对象了。

那么,我们再回过头来说$(this),这个this是什么呢?假设我们有如下的代码:

 $("#desktop a img").each(function(index){

      alert($(this));

      alert(this);

 }

那么,这时候可以看出来:

 alert($(this));  弹出的结果是[object Object ]

 alert(this);   弹出来的是[object HTMLImageElement]

也就是说,后者返回的是一个html对象(本例中是遍历HTML的img对象,所以为HTMLImageElement)。

很多人在使用jquery的时候,经常this.attr('src');   这时会报错“对象不支持此属性或方法”,这又是为什么呢?其实看明白上面的例子,就知道错在哪里了:很简单,this操作的是HTML对象,那么,HTML对象中怎么会有val()方法了,所以,在使用中,我们不能直接用this来直接调用jquery的方法或者属性。

2.获取$(this)子节点对象的方法:find(element)

明白了$(this)和this的区别,再来看看这个例子:(假设,我的页面中a标签包含img,并含有src属性),当我在遍历的时候,想取到$(this)下img中src的地址

$("#desktop a ").each(function(index){

  var imgurl=$(this).find('img').attr('src');

  alert(imgurl);

 }

其中 .find(element) 是返回一个用于匹配元素的DOM元素,这样就可以取到想要的src地址了。

以上这篇浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

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

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

相关文章

  • jQuery 如何给Carousel插件添加新的功能
  • jQuery中extend函数的实现原理详解
  • jquery select多选框的左右移动 具体实现代码
  • jquery 简单的图片展示效果
  • jquery 实时监听输入框值变化的完美方法(必看)
  • 仿当当网淘宝网等主流电子商务网站商品分类导航菜单
  • jQuery网页版打砖块小游戏源码分享
  • JQuery小知识
  • jquery 表单进行客户端验证demo
  • jquery幻灯片插件bxslider样式改进实例

文章分类

  • 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从头学起第一讲
    • dreamweaver 8实现Jquery自动提示
    • BootStrap按钮标签及基本样式
    • 利用jquery正则表达式在页面验证url网址输入是否正确
    • jquery横向纵向鼠标滚轮全屏切换
    • jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
    • 关于query Javascript CSS Selector engine
    • JQuery 操作Javascript对象和数组的工具函数小结
    • jquery动态加载js/css文件方法(自写小函数)

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

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