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


Posted in Javascript onNovember 29, 2016

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)子元素对象的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 #Javascript
JavaScript中return用法示例
Nov 29 #Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 #Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 #Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 #Javascript
JS 拦截全局ajax请求实例解析
Nov 29 #Javascript
JS正则替换掉小括号及内容的方法
Nov 29 #Javascript
You might like
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
jquery键盘事件介绍
2011/01/31 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
老生常谈Python基础之字符编码
2017/06/14 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
汉语专业应届生求职信
2013/10/01 职场文书
1亿有多大教学反思
2014/05/01 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
总经理检讨书
2014/09/15 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
java代码实现空间切割
2022/01/18 Java/Android