zoukankan      html  css  js  c++  java
  • jquery接触初级----jquery 对象和Dom对象

    1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8 </head>
     9 <body>
    10     <h3>例子</h3>
    11     <p title="你最喜欢吃的水果">你最喜欢吃的水果?</p>
    12     <ul>
    13         <li class="attive">梨子</li>
    14         <li>苹果</li>
    15         <li>草莓</li>
    16         <li>香蕉</li>
    17     </ul>
    18 </body>
    19 </html>

    运行结果和DOM结构如下:

                       

    在这棵DOM树中,h3,p,ul 以及ul下的4个li 子节点,都是DOM的元素节点,可以通过js中的getElementsByTagName或者getElementById来获取元素节点,像这样得到的DOm元素就是DOM对象;dom对象js获取实例:

    var domObj = document.getElementById('Id');                                // 获取DOM对象

    var ObjHTML = domObj.innerHTML;                                               // 使用JS中的属性----innerHTML;

    2. jquery 对象

    jquery 对象就是通过jQuery 包装DOM对象后产生的对象。

    jquery对象是jQuery 独有。如果一个对象是jquery对象,就可以使用jquery里的方法;例如:

    $("#name1").html();            // 获取ID为name 的元素里的 html代码;

    等同于js里的:document.getElementById("name").innerHTML;

    备注:jquery 对象不能使用DOM对象的任何方法;DOM对象也不能使用jquery里的方法。

    3. jquery对象与DOM对象的转换:

    3.1 jquery 对象转换为DOM对象:通过[index]和get(index);

    3.1.1 jquery 代码:

    var $cr = $("#cr");                   // 获取jquery对象 $cr

    var  cr  = $cr[0] ;                     // 转化为DOM对象 cr

    alert( cr.checked );                // 弹出cr对象的checked 属性值

    3.1.2 jquery 代码:

    var $cr = $("#cr");                   // 获取jquery对象 $cr

    var  cr  = $cr.get(0) ;                     // 转化为DOM对象 cr

    alert( cr.checked );                // 弹出cr对象的checked 属性值

    3.2  DOM对象转化为jquery对象:用 $() 把DOM对象包裹起来,就可以了 

    3.1.2 jquery 代码:

    var cr = document.getElementById("id_name") ;                   // 获取Id名字为id_name的DOM对象;

    var  $cr  = $( cr ) ;                     // 将DOM对象转化为jquery 对象

    alert( $cr.attr("checked") );                // 弹出jquery对象$cr的checked 属性值

    http://www.cnblogs.com/huanying2015 博客随笔大多数文章均属原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利
  • 相关阅读:
    The jQuery UI CSS Framework(中文说明)
    锁定表头和固定列(Fixed table head and columns)
    html5学习二(canvas)
    浅析深究什么是SOA
    页面加载完毕后执行js函数的方法
    Spring AOP详解(转)
    db2move详解
    DB2 命令总汇
    Ubuntu下Apache的配置
    maven打包的一些问题
  • 原文地址:https://www.cnblogs.com/huanying2015/p/8185794.html
Copyright © 2011-2022 走看看