zoukankan      html  css  js  c++  java
  • 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+"
    "+"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);

  • 相关阅读:
    Keras & Theano 输出中间层结果
    keras & tensorflow 列出可用GPU 和 切换CPU & GPU
    Visualizing CNN Layer in Keras
    [python]使用django快速生成自己的博客小站,含详细部署方法
    [JetBrains注册] 利用教育邮箱注册JetBrains产品(pycharm、idea等)的方法
    【python】pycharm常用配置快速入门。
    一道笔试题来理顺Java中的值传递和引用传递
    集群扩容的常规解决:一致性hash算法
    [面经]春季跳槽面筋总结 [2018年3月17]
    TestNG的简单使用
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/5360806.html
Copyright © 2011-2022 走看看