zoukankan      html  css  js  c++  java
  • jQuery基础学习2——DOM和jQuery对象

    1 <body>
    2         <h3>例子</h3>
    3         <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    4         <ul>
    5             <li id="apple">苹果</li>
    6             <li>橘子</li>
    7             <li>菠萝</li>
    8         </ul>
    9     </body>


    可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点,这样得到的DOM元素就是DOM对象,DOM对象可以使用JavaScript中的方法,如下:

    1 var domObj = document.getElementsByTagName("h3")[0]; // 获得Dom对象
    2 
    3 var objHTML = domObj.innerHTML;  //  使用JavaScript中的属性——innerHTML

    jQuery对象就是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么可以使用jQuery里的方法。

    alert($('#apple').html());
    

     这段代码等同于:

    alert(document.getElementById('apple').innerHTML);
    

    1.在jQuery对象中无法使用DOM对象的任何方法,例如$('#id').innerHTML和$('#id').checked之类的写法都是错误的,可以用$('#id').html()和$('#id').attr("checked")之类的jQuery方法来代替。

    2.DOM对象也不能使用jQuery里的方法,例如document.getElementById('apple').html()也会报错,只能用document.getElementById('apple').innerHTML语句。

    3.用#id作为选择符取得的是jQuery对象而并非document.getElementById('id')所得到的DOM对象,两者并不等价。


     jQuery不能使用DOM中的方法,但如果jQuery对象所提供的方法不熟悉,或者jQuery没有封装想要的方法,不得不使用DOM对象的时候,有以下两种处理方法。

    jQuery提供了两种方法将jQuery对象转换为DOM对象,即[index]和get(index)。

    1. jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象,jQuery代码如下:
    var $cr = $("#cr");    //jQuery对象
    var cr =$cr[0];    //DOM对象
    alert(cr.checked)    //检测这个checkbox是否被选中
    
    1.  另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象,jQuery代码如下:
    1 var $cr = $("#cr");    //jQuery对象
    2 var cr =$cr.get(0);    //DOM对象
    3 alert(cr.checked)    //检测这个checkbox是否被选中

    对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了,方法为$(DOM对象),jQuery代码如下:

    1 var cr = document.getElementById("cr");    //DOM对象
    2 var $cr = $(cr);    //jQuery对象
    3 alert($cr.is(":checked"));    //jQuery方式判断

    is(":checked")是jQuery中的方法,判断jQuery对象是否被选中,返回boolean值。

  • 相关阅读:
    Tomcat 配置和springframework MVC配置简介
    Java监控工具、调优、调试辅助函数
    发布一个 Linux 下的 C++ 多线程库
    《程序中的日期与时间》第一章 日期计算
    《多线程服务器的适用场合》例释与答疑
    Muduo 网络编程示例之零:前言
    muduo 与 boost asio 吞吐量对比
    Muduo 网络编程示例之二:Boost.Asio 的聊天服务器
    计算机图书赠送
    muduo 与 libevent2 吞吐量对比
  • 原文地址:https://www.cnblogs.com/hushaojun/p/4779722.html
Copyright © 2011-2022 走看看