浅谈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 相关文章推荐
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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和ACCESS写聊天室(五)
2006/10/09 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
python操作MongoDB基础知识
2013/11/01 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
Python插件机制实现详解
2020/05/04 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
人力资源管理求职信
2014/08/07 职场文书
教师批评与自我批评
2014/10/15 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
幼师小班个人总结
2015/02/12 职场文书
起诉书范文
2015/05/20 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
Python中tqdm的使用和例子
2022/09/23 Python