• 注册
    • 查看作者
    • 利用jQuery写Tampermonkey脚本第二章

      第二章 DOM对象和jQuery对象

      2.1 DOM对象和jQuery对象简介

      刚开始学习jQuery时候,有些人会搞不清楚哪些是jQuery对象,哪些是DOM对象。阅读本篇文章,你就可以了解他们两个之间的关系了。

      2.1.1 DOM对象

      DOM(Document Object Model,文档对象模型),每一份DOM都可以表示成一棵树。下面我们通过代码详细说明。网页代码如下:

      <html>
      <body>
      <h4>数字列表:</h4>
      <ol>
       <li>苹果</li>
       <li>香蕉</li>
       <li>柠檬</li>
       <li>桔子</li>
      </ol>  
      </body>
      </html>

      点击查看运行效果

      可以把上面的HTML结构描述为一颗DOM树,如下图:

      在这颗DOM树中,<h4>、<ol>以及<ol>中的4个</li>子节点都是DOM元素节点。可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点。想这样得到的DOM元素就是DOM对象。DOM对象可以使用Javascript中的方法如:

      var domObj = document.gerElementById("htmlid");  //获取DOM对象
      var objHTML = domObj.innerHTML;  //使用JavaScript中的属性——innerHTML

      2.1.2 jQuery对象

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

      jQuery对象是其独有的。如果一个对象是jQUery对象,那么就可以使用jQuery方法。例如上文提到的两个JavaScript方法,在jQuery中可以写成:

      $("#htmlid").html();  //  .html()就是jQuery里的方法

       

      注意:DOM对象和jQuery对象的方法互相并不通用,你可以把他们两个理解成两种语言进行编程,以免混淆。

      辽宁省·葫芦岛市
    • 14
    • 7
    • 0
    • 388
    • 0
      听话用雪碧初级会员
      向大神看齐
    • 0
      嚓茶威武初级会员
      胖胖好厉害~
    • 0
      认真用柚子初级会员
      论坛里的大神越来越多了,前排支持下
    • 0
      夏天迷路初级会员
      收藏学习
    • 0
      吾爱油猴中级会员VIP3超级管理员
      向大佬学习 [s-58]
    • 0
      无心迎过客初级会员
      谢谢楼主分享~
    • 1
      在下沧海初级会员VIP1
      对不住大家了,今天喝的有点多,这周日之前,我会再次编辑此文章。以便能让大家尽快学会利用jQuery编写Tampermonkey脚本。
      也请大家关注我,能更快查看我的新文章。
    • 单栏布局 侧栏位置: