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. <二>面向对象分析之几个关键的概念

    一:建模        --->建模,是指通过对[客观事物]建立一种抽象的方法用以表征事物并获得对事物本身的理解.同时把这种理解概念化,将这些逻辑概念组织起来,构成一种对所观察对象的内部结构和工 ...

  2. Mybatis学习——一对一关联表查询

    1.SQL语句建表 CREATE TABLE teacher( t_id ) ); CREATE TABLE class( c_id ), teacher_id INT ); ALTER TABLE ...

  3. Oracle存储过程实现返回多个结果集 在构造函数方法中使用 dataset

    原文 Oracle存储过程实现返回多个结果集 在构造函数方法中使用 dataset DataSet相当你用的数据库: DataTable相当于你的表.一个 DataSet 可以包含多个 DataTab ...

  4. 基于Fragment实现Tab的切换，滑出侧边栏

    最近在学习Fragment(碎片)这是android3.0以后提出的概念,很多pad上面的设置部分都是通过Fragment来实现的,先看看具体的效果吧(图一)  (图二) (图三)第一章图片是初始时的 ...

  5. 【剑指offer 面试题22】栈的压入、弹出序列

    思路: 不停地压栈,直到栈头元素与弹出序列的首元素相等则出栈,同时弹出序列后移:若不相等则一直保持压栈,直到压入所有元素后弹出序列仍不为空,则说明无法匹配. C++: #include <ios ...

  6. jQuery常用的正则表达式

    [导读] 本文章提供了大量的jQuery正则表达式,有电话号码,密码,用户名,邮箱,哈能输入字符等,有需要的朋友可以参考一下. 代码如下复制代码 <!DOCTYPE html PUBLIC &q ...

  7. C#调用C++导出类（转）

    由于使用别人的Dll,导出的是一个实体类,在C#里封送很难,百度下,有个朋友回复一篇英文的,虽然不一定使用,但可以作为一个知识点,现把原文贴下: c#调用C++写的dll导出类,包含继承,重载等详细介 ...

  8. 去除下载电影和电视剧文件名中的多余字符[python实现]

    讨厌下载电影和电视剧文件名中的多余字符(如网址和广告字样),,搞得文件名好长,可以使用下面的Python代码,自行修改即可. #!\usr\bin\env python # -*- coding: u ...

  9. iOS Development Learning 13Nov

    关注了关东升老师在博客园的iOS开发博客. 在使用能力课堂观看智捷课堂的iOS8开发视频教程.观看到Part1 课时3 Xcode中的iOS工程模板

  10. 基于Hbase数据的Mapreduce程序环境开发

    一.实验目标 编写Mapreduce程序,以Hbase表数据为Map输入源,计算结果输出到HDFS或者Hbase表中. 在非CDH5的Hadoop集群环境中,将编写好的Mapreduce程序整个工程打 ...