• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> jQuery >> jQuery对象和DOM对象的区别 -创新互联

jQuery对象和DOM对象的区别 -创新互联

• 作者：创新互联 文章来源：前端开发部 点击数： 更新时间：2010-12-18
• jQuery对象和DOM对象的区别往往在初学的时候被忽视或者混淆，从而导致了不必要的错误，下面简单介绍一下它们之间的区别。
  DOM对象的获取:
  在一般意义上的javascript开发中，经常使用document.getElementById()方法或者document.getElementsByTagName()方法来获取对象，此时获得对象就是DOM对象。例如:
  下面代码可以获取id为mydiv的div元素的高度。
  [HTML] 纯文本查看 复制代码运行代码
  var mydiv;
  mydiv=document.getElementById("mydiv");
  alert(mydiv.style.height)
  jQuery对象的获取:
  可以认为jQuery对象是对DOM对象的一种包装，使之能够使用jQuery更为丰富的DOM操作。
  在这里要特别说明一点，DOM对象不能够使用jQuery的方法，同样jQuery对象也不能够使用DOM对象的方法。
  一般通过$(selector)获得jQuery对象。
  注意：$(selector)是jQuery(selector)的简写。
  上面获取div高度的代码也可以用下面的代码实现。
  在下面的代码中mydiv就是一个jQuery对象，而上面的代码中它却是个DOM对象。
  [HTML] 纯文本查看 复制代码运行代码
  $(document).ready(function(){
  var mydiv;
  mydiv=$("#mydiv");
  alert(mydiv.height());
  })
  DOM对象与jQuery对象的转换：
  一.DOM对象转换成jQuery对象：
  如果我们已经获得了一个DOM对象，例如：
  [HTML] 纯文本查看 复制代码运行代码
  var mydiv=document.getElementById("mydiv");
  那么我们可以用以下方式转换成jQuery对象：
  [HTML] 纯文本查看 复制代码运行代码
  var mydiv=document.getElementById("mydiv");
  var jQueryObject=$(mydiv);
  二.jQuery对象转换成DOM对象。
  jQuery对象其实是一个集合，集合中的元素都是DOM元素，所以我们从集合中获取的每一个元素都是DOM元素。例如：
  方法一:
  [HTML] 纯文本查看 复制代码运行代码
  var mydiv;
  mydiv=$(".mydiv");
  var domObject=mydiv.get(0);
  方法二:
  [HTML] 纯文本查看 复制代码运行代码
  var mydiv;
  mydiv=$(".mydiv");
  var domObject=mydiv[0];
  方法三:
  下面代码中的this也是DOM元素。
  [HTML] 纯文本查看 复制代码运行代码
  var mydiv;
  mydiv=$(".mydiv");
  var domObject=mydiv[0];
  $(".mydiv").each(function() { alert(this) })
• jQuery的文档就绪方法 -创新互联 :上一篇
  jQuery获取复选框被选中的个数及值 :下一篇