• Jquery与Dom对象相互转化


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

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

    1. var   $variable    =   jQuery 对象 ;

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

    1. var  variable     =   DOM对象;

    本书中的例子均会以这种方式呈现,以方便读者阅读。

    1. jQuery对象转成DOM对象

    前面说了,jQuery对象不能使用DOM中的方法,但如果对jQuery对象所提供的方法不熟悉,或者jQuery没有封装想要的方法,这时不得不使用DOM对象的时候,该怎么办呢?

    jQuery提供两种方式来将一个jQuery对象转换成DOM对象:[ index ]和get( index )。

    (1) jQuery对象是一个数组对象,可以通过 [index] 的方式,来得到相应的 DOM 对象。

    jQuery代码如下:

    1. var   $cr    =    $("#cr");      // jQuery对象
    2. var  cr     =    $cr[0];        // DOM对象
    3. alert(cr.checked)              //检测这个checkbox是否被选中了

    (2) 另一种方式是jQuery本身提供的,通过get(index) 方法,来得到相应的 DOM 对象。

    jQuery代码如下:

    1. var $cr    =     $("#cr");        // jQuery对象
    2. var cr     =     $cr.get(0);      // DOM对象
    3. alert(cr.checked)             //检测这个checkbox是否被选中了

    2. DOM对象转成jQuery对象

    对于已经是一个DOM对象的,只需要用$( ) 把 DOM对象包装起来,就可以获得一个如假包换的jQuery对象了。方式为 $( DOM对象)。

    jQuery代码如下:

    1. var cr   =  document.getElementById("cr");     //DOM对象
    2. var $cr   =   $(cr);                            // jQuery 对象

    转换后,就可以任意使用jQuery中的方法了。

    通过以上提供的方法,我们可以任意的相互转换 jQuery对象和DOM对象。

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

    注:我们所用的jQuery对象都是通过$()函数制造出来的,$()函数就是一个jQuery对象的制造工厂。

    实例研究

    下面举个简单的例子,来加深对jQuery对象和DOM对象的理解。

    大家应该都玩过论坛,有的论坛注册的时候,用户必须先要同意论坛的规章制度,才可以进行下一步操作,效果如图1-15所示。

    (点击查看大图)图1-15 某论坛注册截图

    这个是某论坛的注册页面,用户必须选中页面下方的"同意并接受注册协议",否则不能注册。

    做个简单的例子,来实现这个功能。新建一个空白的页面,然后添加如下HTML代码:

    1. <input type="checkbox" id="cr"/><label for="cr">
      我已经阅读了上面制度.</label>

    HTML代码初始效果如图1-16所示:

    图1-16 初始化状态

    然后编写JavaScript部分。前面说过了,没有特殊声明,jQuery库是默认导入的。

    我们可以通过$("#cr")获取到复选框元素,然后通过判断复选框是否被选中,来执行下一步操作。

    首先,用DOM方式来判断复选框是否被选中,代码如下:

    1. $(document).ready(function(){            //等待dom元素加载完毕.
    2.           var $cr = $("#cr");              //jQuery对象
    3.       var cr = $cr[0];        //DOM对象,或者 $cr.get(0)
    4.       $cr.click(function(){
    5.            if(cr.checked){        //DOM方式判断
    6.               alert("感谢你的支持!你可以继续操作!");
    7.            }
    8.       })
    9. })

    实现上述代码后,选中"我已经阅读了上面制度",效果如图1-17所示。

    图1-17 选中选项后的效果图


    换一种方式,我们使用jQuery中的方法来判断选项是否被选中,代码如下:

    1. $(document).ready(function(){                  //等待dom元素加载完毕.
    2.           var $cr = $("#cr");                   //jQuery对象
    3.          $cr.click(function(){
    4.                if($cr.is(":checked")){         //jQuery方式判断
    5.                   alert("感谢你的支持!你可以继续操作!");
    6.                }
    7.          })
    8. })

    上面的例子简单的演示了DOM对象和jQuery对象的不同,但最终效果都一样。

    From:

    http://hi.baidu.com/jiang_yy_jiang/blog/item/27ab17c41974c7c738db49e4.html

  • 相关阅读:
    51单片机数码管字符H自右向左移动
    51单片机点亮双向流水灯
    React 动态增减表单项
    React--Tree 点击节点收缩
    Redis 操作异常
    Linxu 后台运行
    vert.x学习(四),使用模板解析器ClassLoaderTemplateResolver
    vert.x学习(三),Web开发之Thymeleaf模板的使用
    vert.x学习(二),使用Router来定义用户访问路径
    vert.x学习(一),开篇之hello world
  • 原文地址:https://www.cnblogs.com/CodingPerfectWorld/p/1897581.html
Copyright © 2020-2023  润新知