JavaScript DOM对象和JQuery对象相互转换

简介:

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);





本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5360806.html,如需转载请自行联系原作者

目录
打赏
0
0
0
0
56
分享
相关文章
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
108 0
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
513 62
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
53 1
JavaScript中对象的数据拷贝
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
100 14
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。

热门文章

最新文章