在 jQuery 库中, 可以通过本身自带的方法获取页面 DOM 元素的对象叫做 jQuery 对象.
jQuery 对象就是用 jQuery 的类库选择器获得的对象. jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象.
jQuery 对象是 jQuery 独有的, 其可以使用 jQuery 里的方法, 但是不能使用 DOM 的方法.
例如: $("#img").attr("src","test.jpg"); 这里的 $("#img") 就是 jQuery 对象.
DOM 对象就是 JavaScript 固有的一些对象操作. DOM 对象能使用 JavaScript 固有的方法, 但是不能使用 jQuery 里的方法. 例如: document.getElementById("img").src = "test.jpg"; 这里的 document.getElementById("img") 就是 DOM 对象.
$("#img").attr("src","test.jpg"); 和 document.getElementById("img").src = "test.jpg"; 是等价的, 是正确的, 但是 $("#img").src = "test.jpg" ; 或者 document.getElementById("img").attr("src","test.jpg"); 都是错误的.
再说一个例子, 就是 this, 在写 jQuery 时经常这样写: this.attr("src","test.jpg"); 可是就是出错, 其实 this 是 DOM 对象, 而. attr("src","test.jpg") 是 jQuery 方法, 所以出错了. 要解决这个问题就要将 DOM 对象转换成 jQuery 对象, 例如 $(this).attr("src","test.jpg");
DOM 对象转成 jQuery 对象
对于已经是一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来, 就可以获得一个 jQuery 对象了,$(DOM 对象) 注: var 是定义变量
如:
- var v = document.getElementById("v"); //DOM 对象
- var $v = $(v); //jQuery 对象
转换后, 就可以任意使用 jQuery 的方法.
jQuery 对象转成 DOM 对象
两种转换方式讲一个 jQuery 对象转换成 DOM 对象: [index] 和 .get(index);
(1) jQuery 对象是一个数据对象, 可以通过 [index] 的方法, 来得到相应的 DOM 对象.
如:
- var $v = $("#v"); //jQuery 对象
- var v = $v[0]; //DOM 对象
- alert(v.checked); // 检测这个 checkbox 是否被选中
(2) jQuery 本身提供, 通过. get(index) 方法得到相应的 DOM 对象
如:
- var $v = $("#v"); //jQuery 对象
- var v = $v.get(0); //DOM 对象 ( $v.get()[0] 也可以 )
- alert(v.checked); // 检测这个 checkbox 是否被选中
通过以上方法, 可以任意的相互转换 jQuery 对象和 DOM 对象, 需要再强调的是: DOM 对象才能使用 DOM 中的方法, jQuery 对象是不可以使用 DOM 中的方法.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/16681.html