• JQuery中的DOM操作


    DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件。DOM解决了JavaScript和JScript之间的冲突,为此,可以轻松获取和操作网页中的数据、脚本和表现层对象。

    DOM操作分为:DOM Core、HTML-DOM和CSS-DOM

    (1)DOM Core

    不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页,也可以用来处理任何一种使用标记语言编写出来的文档,例如XML。

    document.getElementsByTagName("form"); //使用DOM Core来获取表单对象的方法

    element.getAttribute("src");//使用DOM  Core来获取某元素的src属性的方法

    (2)HTML-DOM

    在使用JavaScript和DOM为HTML文件编写脚本时,有许多专属于HTML-DOM的属性。HTML-DOM的出现设置比DOM Core还要早,它提供了一些更明显的记号来描述各种HTML元素的属性。

    document.forms  //HTML-DOM提供了一个forms对象

    element.src //HTML-DOM来获取某元素的src属性的方法

    获取某些对象、属性既可以用DOM core实现,也可以用HTML-DOM来使用。但是HTML-DOM只能用来处理Web文档。

    (3)CSS-DOM

    是针对css的操作。在JavaScript中,CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性,可以使网页呈现出各种不同的效果。

    element.style.color="red" //设置某元素style对象字体颜色

    JQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象的操作的特性,使开发人员能方便地操作DOM对象。

    (1)查找节点

    var $li=$("ul li:eq(1)");//获取<ul>里第2个<li>节点

    var li_txt=$li.text();//获取这个节点里面的内容

    var li_title=$li.attr("title");//获取这个节点属性title

    (2)创建节点

    var $li_1=$("<li title='香蕉'>香蕉</li>"); //创建第1个<li>元素

    $("ul").append($li_1); //添加到<ul>节点中,使之能在网页中显示

    (3)插入节点

    append()  

    向每个匹配的元素内部追加内容。$("p").append("<b>你好</b>");

    appendTo()

    将所有匹配的元素追加到指定的元素中,$(A).appendTo(B),将A追加到B中。

    prepend()

    向每个匹配的元素内部前置内容。

    prependTo()

    将所有匹配的元素前置到指定的元素中。$(A).prependTo(B),将A前置到B中

    after()

    在每个匹配的元素之后插入内容

    insertAfter()

    将所有匹配的元素插入到指定元素的后面。$(A).insertAfter(B),将A插入到B后面

    before()

    在每个匹配的元素之前插入内容

    insertBefore()

    将所有的元素插入到指定的元素的前面。$(A).insertBefore(B),将A插入到B前面

    (4)删除节点

    (5)复制节点

    (6)替换节点

    (7)包裹节点

    (8)属性操作

    (9)样式操作

    (10)设置和获取HTML、文本和值

    (11)遍历节点

    (12)CSS-DOM操作

  • 相关阅读:
    javascript 的继承
    js Cookie的操作
    不要再拖别人的控件1.输出几个小东西
    POJ2586Y2K Accounting Bug
    POJ3239Solution to the n Queens Puzzle
    POJ2109Power of Cryptography
    POJ1753Flip Game
    POJ2965The Pilots Brothers' refrigerator
    POJ1328Radar Installation
    POJ2255Tree Recovery
  • 原文地址:https://www.cnblogs.com/nana135/p/6352121.html
Copyright © 2020-2023  润新知