DOM对象和jQuery对象的区分

DOM对象是我们用传统的方法(javascript)获得的对象,jQuery对象就是用jQuery的类库选择器获得的对象。JQuery对象就是通过jQuery包装DOM对象后产生的对象。JQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法。

1. console.log($('p') instanceof jQuery);
2. console.log($('p'));

我们试着运行一下,结果如下:

结果

可以看到,jQuery对象实际上是一个数组,它是由全局对象jQuery构造出来的,由上方第一行代码可以看到。

相互转换

DOM对象转换为jQuery对象

var p = document.getElementById('demo');
console.log(p);
console.log($(p));

jQuery对象转换为DOM对象

jQuery对象[index]
没错,就是这么简单,使用下标去访问即可,代码验证。

console.log($('p')[0]);

输出结果:

jQuery的each方法

概述

每一个匹配的元素作为上下文来执行一个函数。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

注意

给each方法传入一个函数,则函数的环境绑定到每一个DOM对象,测试如下:

$('p').each(function(){
    console.log(this);
});

结果

可以看到,this自动绑定到每一个p元素上,这里的this是DOM对象,不能使用jQuery方法,如果需要转变为jQuery对象,那么就使用$(this)吧。

使用$(this)的结果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,506评论 0 44
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,415评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,212评论 0 1
  • 上海儿童骑单车身亡,责任……这种东西又冒出来了 美文共享,责任共当,铁锁一定要说道说道 封杀! 封杀! 这些胡编乱...
    54f70f613c7c阅读 213评论 0 0
  • 哎,无限循环的结。想想好难受。
    无药阅读 249评论 0 0