1、分析源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JavaScript DOM对象和JQuery对象相互转换</title>

<script type="text/javascript" src="jquery-1.11.2.js"></script>

<script type="text/javascript">

      /**

	   * JavaScript DOM对象转换成JQuery对象

	   */

      function javaScriptToJquery()

	  {

		  //DOM对象

		  var divObject = document.getElementById("div_body");

		  //jQuery对象

		  var $divObject = $(divObject);

		  alert("JavaScript DOM对象转换成JQuery对象："+divObject);

	  }

	  /**

	   * JQuery对象转换成JavaScript DOM对象

	   */

	  function jqueryToJavaScript()

	  {

		  //jQuery对象

		  var $divObject = $("#div_body");

		  //DOM对象

		  var divObject = $divObject[0];

		  //DOM对象

		  var divObject1 = $divObject.get(0);

		  alert("JQuery对象转换成JavaScript DOM对象方法一："+divObject+"\n"+"JQuery对象转换成JavaScript DOM对象方法二："+divObject1);

	  }

</script>

</head>

<body>

   <div id="div_body">HTML</div>

   <input type="button" id="btn1" value="JavaScript DOM对象转换成JQuery对象" onclick="javaScriptToJquery()"/>

   <input type="button" id="btn2" value="JQuery对象转换成JavaScript DOM对象" onclick="jqueryToJavaScript()"/>

</body>

</html>

2、执行结果

（1）初始化

（2）点击”JavaScript DOM对象转换成JQuery对象“button

（3）点击”JQuery对象转换成JavaScript DOM对象“button

3、分析说明

（1）JavaScript DOM对象转换成JQuery对象

//DOM对象

       var divObject = document.getElementById("div_body");

       //jQuery对象

      var $divObject = $(divObject);

（2）JQuery对象转换成JavaScript DOM对象

方法一：

//jQuery对象

     var $divObject = $("#div_body");

     //DOM对象

     var divObject = $divObject[0];

方法二：

//jQuery对象

     var $divObject = $("#div_body");

     //DOM对象

     var divObject1 = $divObject.get(0);

JavaScript DOM对象和JQuery对象相互转换的更多相关文章

  1. JavaScript 对象、DOM对象、jquery对象的区别、转换详解

    一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...

  2. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  3. 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

  4. jquery中 dom对象与jQuery对象相互转换

    var jq = $(dom对象);//额 再补充点吧好记. $是jquery的别名.这一句等价于 var jq = jQuery(dom对象); 反之. dom对象 = jq[0]; //不写那么长 ...

  5. （四）DOM对象和jQuery对象

    学习jQuery,需要搞清楚DOM对象和jQuery对象的关系与区别,因为两者的方法并不共用,如果搞不清楚对象类型就会导致调用错误的方法. DOM(Document Object Model)称为文档 ...

  6. DOM对象与jquery对象的互相转换

    一開始总是对DOM对象和jQuery对象搞不清楚.如今对此做一下总结: DOM 对象:文档对象模型.每一份DOM都能够看作一棵树.像ul,li ol  dl  p  h1  等等都是DOM元素节点.能 ...

  7. 关于DOM对象与JQuery对象的那些事

    这个问题源自上一次的工作室讨论班,主题是"jQuery选择器的使用",在讨论班的结尾,我留了一个思考题:  jQuery获取到的对象和直接调用原生Javascript方法获得的对象 ...

  8. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  9. DOM对象与jquery对象有什么不同

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

随机推荐

  1. (转)c & c++内存分配

    一.预备知识—程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于 数据结构中的栈. ...

  2. LeetCode: Maximum Product Subarray && Maximum Subarray &子序列相关

    Maximum Product Subarray Title: Find the contiguous subarray within an array (containing at least on ...

  3. 深入浅出 iOS 之生命周期

    转:http://blog.csdn.net/kesalin/article/details/6691766 iOS应用程序的生命周期相比 Android 应用程序的生命周期来说,没那么简明易懂,但是 ...

  4. Filezilla中文字符文件看不到或显示乱码的解决办法

    Filezilla确实是跨平台的好软件,可之前我就在ubuntu下郁闷为什么看坛子FTP里竟然是空的.最近换MAC版的FZ结果还是这样就奇怪了. 后来想Filezilla应该是支持字符集转换的,所以在 ...

  5. virtualbox虚拟机中mysql远程连接登陆报2003错误的解决方法

    最近在virtualbox中安装了Ubuntu 14,配置了一个mysql server,设置的桥接网络模式.在其他电脑连接的时候,总是报2003错误.开始以为是localhost没有置换为%,运行u ...

  6. C++实现网格水印之调试笔记（五）—— 提取出错

    在实现提取水印的过程中,遇到了一些问题 首先还是根据论文中的思路来梳理一下整个提取流程 读入两个模型,一个原始模型ori_mesh, 一个水印模型wm_mesh. 将两个模型对齐(即放在同一个坐标系下 ...

  7. Tkinter教程之Event篇(3)

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1823550 '''Tkinter教程之Event篇(3)''''''11.两个事件同时绑定到一 ...

  8. [HIve - LanguageManual] Join Optimization (不懂)

    Join Optimization Join Optimization Improvements to the Hive Optimizer Star Join Optimization Star S ...

  9. Jquery类级别与对象级别插件开发

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  10. hibernate hbm2ddl auto 不能创建表的问题

    http://fuckgis.blog.sohu.com/148751122.html ________________________________________________________ ...