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. android和ios流媒体库推荐

    1基本信息编辑 Vitamio是一款 Android 与 iOS 平台上的全能多媒体开发框架,全面支持硬件解码与 GPU 渲染.从2011年8月上线到2014年1月,Vitamio 凭借其简洁易用的 ...

  2. 《C++ Primer 4th》读书笔记 第6章-语句

    原创文章,转载请注明出处: http://www.cnblogs.com/DayByDay/p/3912407.html

  3. android view的setVisibility方法值的意思

    android view的setVisibility方法值的意思 有三个值 visibility  One of VISIBLE, INVISIBLE, or GONE. 常量值为0,意思是可见的 常 ...

  4. 2.Linq实用性技巧篇

    在论坛上经常会看到别人问,linq怎么实现递归,如何求笛卡尔积等问题..都可以用linq快速方便的解决..下面我就来个总的归纳 1.)递归 我们经常会遇到一个情况,就是想获取当前节点下的所有子节点.比 ...

  5. [Everyday Mathematics]20150106

    (1). 设 $f\in C[0,T]$, $g$ 是 $T$-周期函数, 试证: $$\bex \vlm{n}\int_0^T f(x)g(nx)\rd x=\frac{1}{T}\int_0^T ...

  6. Calling C++ code from C# z

    http://blogs.msdn.com/b/borisj/archive/2006/09/28/769708.aspx I apologize for the long delay for thi ...

  7. Delphi 操作word 表格

    var wordApp, WordDoc, WrdSelection, wrdtable: variant; strAdd: string; wdPar,wdRange:OleVariant; iCo ...

  8. HDU 1025-Constructing Roads In JGShining's Kingdom（最长不降子序列，线段树优化）

    分析: 最长不降子序列,n很大o(n^2)肯定超,想到了小明序列那个题用线段树维护前面的最大值即可 该题也可用二分搜索来做. 注意问题输出时的坑,路复数后加s #include <map> ...

  9. char[]数组与char *指针的区别

    char[]数组与char *指针的区别 问题描述 虽然很久之前有看过关于char指针和char数组的区别,但是当时没有系统的整理,到现在频繁遇到,在string,char[], char *中迷失了 ...

  10. sqlServer 取每组的前几条数据

    首先的建表语句: ) DROP TABLE [test] CREATE TABLE [test] ( [id] [, ) NOT NULL , [name] [nvarchar] () NULL , ...