zoukankan      html  css  js  c++  java
  • jquery对象和DOM对象的相互转换详解

    jquery对象和DOM对象的相互转换

    在讨论jquery对象和DOM对象的相互转换之前,先约定好定义变量的风格如果获取的是jquery对象,那么在变量前面加上$,例如

    var $varible = jquery对象;

    如果获取的是DOM对象,则定义如下:

    var varible = DOM对象;

    1.jquery对象转成DOM对象:

    jquery对象不能使用DOM中的方法,但如果对jquery对象所提供的方法不熟悉,或者没有jquery想封装的方法,不得不使用DOM对象,即【index】和get[index].

    (1)jquery对象是一个数组对象,可以通过【index】的方法得到相应的DOM对象。

    jquery的代码如下

    <body>
      <p>my</p>
      <p>my</p>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
      var $cr = $("p");  //jquery对象
      var cr = $cr[1];  //dom对象
      var ct = $cr.get(0)  //第二种转换为DOM对象的方式
      cr.innerHTML = "you"  //检测是否转换成功,可以用DOM方法 输出结果为第二个my改成了you
      ct.innerHTML = 'fuck'  //输出结果第一个my改成了fuck
    </script>
    </body>
    

      

    (2).DOM对象转换为jquery对象:

    对于一个DOM对象,只需要用$()把DOM对象给包装起来,就可以获得一个jquery对象了,方式为$(DOM对象)。

    jquery代码如下:

    <body>
      <p>my</p>
      <p>my</p>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
      var cr = document.getElementsByTagName("p") //DOM对象
      var $cr = $(cr);   //jquery对象
      $cr.eq(0).("fuck"); //检测是否转换成功,可以用jquery方法 输出结果为第二个my改成了fuck
      $cr.eq(1).html("you"); //输出结果为my改成you
    </script>
    </body>
    

      

    转换后,可以任意使用jquery方法。

    通过以上方法,可以任意的相互转换jquery对象和DOM对象网页特效

    最后再次强调,DOM对象才能使用DOM方法,jquery对象不能使用DOM中的方法,但jquery对象提供了一套更加完善的工具用于操作DOM。

     感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 相关阅读:
    Powershell数据处理
    Powershell About Active Directory Group Membership of a domain user
    Powershell About Active Directory Server
    Oracle Schema Objects——Tables——TableStorage
    Oracle Schema Objects——Tables——TableType
    English Grammar
    Oracle Database Documentation
    Oracle Schema Objects——Tables——Oracle Data Types
    Oracle Schema Objects——Tables——Overview of Tables
    What is Grammar?
  • 原文地址:https://www.cnblogs.com/good10000/p/6020816.html
Copyright © 2011-2022 走看看