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. 【JSP】弹出带输入框可 确认密码 对话框

    <body> <input type="submit" value="删除历史全部订单" onclick="deleteall()& ...

  2. java web 学习十四（JSP原理）

    一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...

  3. Long Dominoes(ZOJ 2563状压dp)

    题意:n*m方格用1*3的方格填充(不能重叠)求有多少种填充方法 分析:先想状态,但想来想去就是觉得不能覆盖所有情况,隔了一天,看看题解,原来要用三进制 0 表示横着放或竖放的最后一行,1表示竖放的中 ...

  4. HTTP协议学习笔记-2

    HTTP报文 HTTP报文分为请求报文和响应报文(requeset and response) 请求报文的格式: <method>  <request -URL> <ve ...

  5. Myeclipse8.5 svn插件安装两种方式

    第一种方式:(亲测成功)第一步:准备插件包:site-1.6.18.zip解压该包里面有features和plugins文件夹,删除该包里面的xml结尾的文件. 第二:我的Myeclipse8.5安装 ...

  6. Watermarking 3D Polygonal Meshes in the Mesh Spectral Domain

    这周看了一篇Ryutarou Ohbuchi网格水印的论文,论文中提出在网格的频率域中加入水印.对于网格而言,没有如图像中的DCT等转换到频率域的变换,因此用什么量来模拟传统频率域中的系数,是很关键的 ...

  7. MFC DLL 资源模块句柄切换[转]

    以前写MFC的DLL的时候,总会在自动生成的代码框架里看到提示,需要在每一个输出的函数开始添加上 AFX_MANAGE_STATE(AfxGetStaticModuleState()).一直不明白这样 ...

  8. 微信公众平台开发 ACCESS TOKEN

    获取access token 返回 access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token.正常情况下access_token有效期为7200秒,重复获取将 ...

  9. Maven管理多模块项目

    首先,我们要明确的多模块项目的含义,它是指一个应用中包含多个module.一般来说,一个应用单独部署成服务,只是打包的时候,maven会把各个module组合在一起.各模块一般单独打成jar放到lib ...

  10. How to interact with the Chef Server using the Chef Server API using Shell script

    !/usr/bin/env bash   _chef_dir () { # Helper function: # Recursive function that searches for chef c ...