zoukankan      html  css  js  c++  java
  • 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的代码如下

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

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

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

    jquery代码如下:

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

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

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

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

  • 相关阅读:
    布局重用 include merge ViewStub
    AS 常用插件 MD
    AS 2.0新功能 Instant Run
    AS .ignore插件 忽略文件
    AS Gradle构建工具与Android plugin插件【大全】
    如何开通www国际域名个人网站
    倒计时实现方案总结 Timer Handler
    AS 进行单元测试
    RxJava 设计理念 观察者模式 Observable lambdas MD
    retrofit okhttp RxJava bk Gson Lambda 综合示例【配置】
  • 原文地址:https://www.cnblogs.com/Ziksang/p/5201886.html
Copyright © 2011-2022 走看看