• 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 博客随笔大多数文章均属原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利
  • 相关阅读:
    python的多进程
    sqlalchemy的缓存和刷新
    uuid
    区块链的理解
    列表推导式,两个for循环的例子
    Fiddler 抓包工具总结
    python---webbrowser模块的使用,用非系统默认浏览器打开
    使用jmeter做web接口测试
    selenium2中关于Python的常用函数
    Selenium2+Python自动化学习笔记(第1天)
  • 原文地址:https://www.cnblogs.com/huanying2015/p/8185794.html
Copyright © 2020-2023  润新知