浅谈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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
php join函数应用
2011/05/04 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
Python退火算法在高次方程的应用
2018/07/26 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
Python如何获取文件指定行的内容
2020/05/27 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
网络技术支持面试题
2013/04/22 面试题
国贸专业个人求职信分享
2013/12/04 职场文书
教师网络培训感言
2014/03/09 职场文书
运动会宣传口号
2014/06/09 职场文书
党课培训心得体会
2014/09/02 职场文书
超市开店计划书
2014/09/15 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
java executor包参数处理功能 
2022/02/15 Java/Android
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL