浅谈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 相关文章推荐
基于jquery的Repeater实现代码
Jul 17 Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
vue 实现一个简单的全局调用弹窗案例
Sep 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
php bootstrap实现简单登录
2016/03/08 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
Yii框架安装简明教程
2020/05/15 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
ES6新特性一: let和const命令详解
2017/04/20 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
python获取list下标及其值的简单方法
2016/09/12 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
用python实现一个简单的验证码
2020/12/09 Python
自立自强的名人事例
2014/02/10 职场文书
应用数学专业求职信
2014/03/14 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
企业理念标语
2014/06/09 职场文书
活动总结范文
2014/08/30 职场文书
小学班级特色活动方案
2014/08/31 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书