Nearth===>WEB前端--第5课/JQuery/JQuery对象和DOM对象互转问题

原创

西南第一深情李登门 2022-11-04 11:08:43 ©著作权

文章标签 dom对象 jquery对象 jquery 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者西南第一深情李登门的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nearth</title>
    <!-- 使用JQuery,首先要引入JQuery框架包 -->
    <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <!-- //DOM操作按钮，修改背景颜色 -->
    <script >
      /* window.onload=function(){
        var btn=document.getElementById("btn");
        btn.onclick()=function(){
          this.style.backgroundColor="red";
        }
      } */
      /* //DOM对象转JQuery对象,只需要把DOM对象放在$(dom对象)-->JQuery对象 */
      /* var btn=document.getElementById("btn");
      $(btn).click(function(){
        $(this).css("backgroundColor","red");
      }) */
      /* //把JQuery对象转DOM对象的两种方式:
      1,$(btn).get(0);----DOM对象
      2,$(btn)[0];----DOM对象 */
      /* var btn=document.getElementById("btn");
      var obj=$(btn).get(0);
      obj.onclick=function(){
        this.style.backgroundColor="Green";
      } */
      /* var btn=document.getElementById("btn");
      var obj=$(btn)[0];
      obj.onclick=function(){
        this.style.backgroundColor="yellow";
      }; */
      $(function(){
        //$("#btn");---->jQuery对象
        /* $("#btn").click(function(){
          $(this).css("backgroundColor","yellow");
        }) */
        /* $("#btn").onclick=function(){
          this.style.backgroundColor="red";
        } */
        $("#btn").get(0).onclick=function(){
          this.style.backgroundColor="red";
        }
      })
      //DOM对象和JQuery对象可以互转
      //DOM对象转JQuery对象
      //$(DOM的对象)-->JQuery对象
      //jQuery对象--->DOM对象
      //1,$("#btn")[0]---DOM对象
      //2,$("#btn").get(0)---DOM对象
    </script>
    
  </head>
  <body>
    <h1>JQuery对象和DOM对象互转问题</h1>
    <hr >
    <input type="button" name="" id="btn" value="点击我,有惊喜·····" />
  </body>
</html>