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. ruby函数回调的实现方法

    以前一直困惑ruby不像python,c可以将函数随意传递,然后在需要的时候才去执行.其实本质原因是ruby的函数不是对象. 通过查阅资料发现可以使用如下方法: def func(a, b) puts ...

  2. 为SQL表添加全文索引范例

    --范例: --为HR_Job中的JobTitle,JobDes创建全文索引 execute sp_fulltext_catalog 'boli188', 'create' --创建全文目录,boli ...

  3. 【Android】以SimpleAdapter做适配器的ListView和GridView

    SimpleAdapter介绍 SimpleAdapter是一个简单的适配器,可以将静态数据映射到XML文件中定义好的视图. 构造函数 public SimpleAdapter (Context co ...

  4. CSS快速制作图片轮播的焦点

    来源:http://www.ido321.com/858.html 效果图: 演示地址:http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/ 代 ...

  5. mybatis系列-12-多对多查询

    12.1     需求 查询用户及用户购买商品信息. 12.2     sql语句 查询主表是:用户表 关联表:由于用户和商品没有直接关联,通过订单和订单明细进行关联,所以关联表: orders.or ...

  6. The First Pig Task

                         The First Pig Program 环境: Hadoop-1.1.2 pig-0.11.1 linux系统为CentOS6.4 jdk1.6 在伪分布 ...

  7. SQL Server 执行计划

    当一个查询被提交时,发生了什么? 向SQL Server提交一个查询时,sever上的许多进程会在这个查询上开始工作. 这些进程的目标就是管理这个系统,使得这个查询可以选择,插入,更新,删除数据. 每 ...

  8. 第二百六十九天 how can I 坚持

    什么是明事理,搞不懂啊,好烦. 有点像我妈. 为什么突然就想买房了呢,为什么?年龄到了,考虑的东西就不一样了. 哎,不要想太多,睡觉.

  9. 查看Linux里某文件的前面/后面几行中的某一行

    如,我想看/etc/profile文件的前5行里的第5行. 则,   head -5 /etc/profile  |  tail -1  管道|啊,很简单,就是把左边命令的结果,作为右边的输入. 如, ...

  10. 用一个例子学习CSS的伪类元素

    CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通 ...