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)
吧。