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

  • 相关阅读:
    洛谷 P2807 三角形计数
    洛谷 P1727 计算π
    洛谷 P1595 信封问题
    洛谷 P3131 [USACO16JAN]子共七Subsequences Summing to Sevens
    3.1、spark集群运行应用
    移动端自适应
    【Flex布局】
    【pm2】
    【安全】
    【Bower】
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/5360806.html
Copyright © 2011-2022 走看看