JQuery 中的 DOM 操作

Posted on Word count in article: 3.8k Reading time ≈ 14 mins.

　JQuery 中的 DOM 操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的 DOM 操作将围绕上面的 DOM 树进行学习 JQueryDOM 操作。

一、查–查找 DOM 节点

查找节点非常容易，使用选择器就能轻松完成各种查找工作。

例：查找元素节点 p 返回 p 内的文本内容

$("p").text();

例：查找元素节点 p 的属性返回属性名称对应的属性值

$("p").attr("title")//返回p的属性title的值。

1、jQuery 选择器：$(‘#text’)

最基本的选择器，简化了 js 的 getElementById\byClassNames，querySelectorAll () 等方法。允许使用 css 选择器来对 DOM 元素进行选择。

2、子元素

$(“.parent”).children();//所有子元素的集合1

3、parent()、parents()、closest()

parent () 用于查找一级父元素，parents () 查找所有父元素的集合，closest () 查找最近的父元素
例如：

<div>
    <ul>
        <li id=“a”></li>
    </ul>
</div>
var test = $(“#a”);
test.parent();//ul
test.parents();//ul,div..一直到html
test.closest(“div”)//div12345678910

4、find()

同 js 的 [某元素].getElementById ()，在某元素里面找元素

5、nextAll()、prevAll()

Ps:javaScript 的对应方法 

firstChild(),lastChild,parent()….

二、建–新建 DOM 节点

1、创建元素节点

创建元素节点并且把节点作为

    元素的子节点添加到 DOM 节点树上。先创建元素点，创建元素节点使用 Jquery 的工厂函数 ()来完成，格式如下：(html), 该方法会根据传入的 html 字符串返回一个 DOM 对象，并将 DOM 对象包装成一个 JQuery 对象后返回。创建一个元素节点 JQuery 代码如下：

    $li1=$("<li></li>")

    代码返回 $li1 就是一个由 DOM 对象包装成的 JQuery 对象。把新建节点添加到 DOM 树中 JQuery 代码如下：

    $("ul").append($li1);

    添加后页面中只能看到

  • 元素默认的”・”, 由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。
    PS:append () 方法是添加 DOM 节点方法详见增–添加 DOM 节点。

    2、创建文本节点

    使用 JQuery 的工厂函数 $() 同样能够创建文本节点，创建文本节点的 JQuery 代码如下：

    $li2=$("<li>苹果</li>");

    代码返回 $li2 就是一个由 DOM 对象包装成 JQuery 对象，把新建的文本节点添加到 DOM 树中 JQuery 代码如下：

    $("ul").append($li2);

    添加后页面中能看到”・苹果”，右键查看页面源码发现新加的文本节点没有 title 属性。下面方法创建带属性的节点。

    3、创建属性节点

    创建属性节点同元素节点、文本节点一样使用 JQuery 的工厂函数完成。创建属性节点的 JQuery 代码如下：

    $li3=$("<li title='榴莲'>榴莲</li>");　

    代码返回 $li3 也是一个由 DOM 对象包装成 JQuery 对象，把新建的属性节点添加到 DOM 树中 JQuery 代码如下：

    $("ul").append($li3);

    添加后页面中能看到”・榴莲”，右键查看页面源码发现新加的属性节点有 title=’榴莲’属性。

    三、增–添加 DOM 节点

    动态新建元素不添加到文档中没有实际意义，将新建的节点插入到文档中有多个方法，如下：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。

    1、append () 方法

    append () 方法向匹配的元素内部追加内容，方法如下：

    $("target").append(element);

    例：

    $("ul").append("<li title='香蕉'>香蕉</li>");

    该方法查找 ul 元素，然后向 ul 中添加新建的 li 元素。

    2、appendTo () 方法

    appendTo () 方法将所有匹配的元素追加到指定的元素中，该方法是 append () 方法的颠倒 [操作主题的颠倒并非操作结果] 操作。方法如下：

    $(element).appendTo(target);

    例： 

    $("<li title='荔枝'>荔枝<li>").appendTo("ul");

    该方法新建元素 li，然后把 li 添加到查找到的 ul 元素中。

    3、prepend () 方法

    prepend () 方法将每匹配的元素内部前置要添加的元素，方法如下：$(target).prepend (element); 例：

    $("ul").prepend("<li title='芒果'>芒果</li>")

    该方法将查找元素 ul 然后将新建的 li 元素作为 ul 子节点，且作为 ul 的第一个子节点插入到 ul 中。

    4、prependTo () 方法

    　prependTo () 方法将元素添加到每一个匹配的元素内部前置，方法如下：$(element).prependTo (); 例：

    $("<li title='西瓜’>西瓜</li>").prependTo("ul");

    该方法将新建的元素 li 插入到查找到的 ul 元素中作为 ul 的第一个子节元素。

    5、after () 方法

    after () 方法向匹配的元素后面添加元素，新添加的元素做为目标元素后的紧邻的兄弟元素。方法如下：

    $(target).after(element);

    例:

    $("p").after("<span>新加段新加段新加段新加段新加段</span>");

    方法将查找节点 p，然后把新建的元素添加到 span 节点后面做为 p 的兄弟节点。

    6、insertAfter () 方法

    insertAfter () 方法将新建的元素插入到查找到的目标元素后，做为目标元素的兄弟节点。方法如下：

    $(element).insertAfter(target);

    例:

    $("<p>insertAfter操作</p>").insertAfter("span");

    方法将新建的 p 元素添加到查找到目标元素 span 后面，做为目标元素后面的第一个兄弟节点。

    7、before () 方法

    before () 方法在每一个匹配的元素之前插入，做为匹配元素的前一个兄弟节点。方法如下:

    $(target).before(element);

    例：

    $("p").before("<span>下面是个段落</span>");

    before 方法查找每个元素 p，将新建的 span 元素插入到元素 p 之前做为 p 的前一个兄弟节点。

    8、insertBefore () 方法

    insertBefore () 方法将新建元素添加到目标元素前，做为目标元素的前一个兄弟节点，方法如下:

    $(element).insertBefore(target);

    例:

    $("<a href='#'>锚</a>").insertBefore("ul");

    insertBefore () 新建 a 元素，将新建的 a 元素添加到元素 ul 前，做为 ul 的前一个兄弟节点。

    增加元素的方法前四个是添加到元素内部，后四个是添加到元素外部的操作，有这些方法可以完成任何形式的元素添加。

    四、删–删除 DOM 节点操作

    如果想要删除文档中的某个元素 JQuery 提供了两种删除节点的方法：remove () 和 empty ();

    1、remove () 方法

    remove () 方法删除所有匹配的元素，传入的参数用于筛选元素，该方法能删除元素中的所有子节点，当匹配的节点及后代被删除后，该方法返回值是指向被删除节点的引用，因此可以使用该引用，再使用这些被删除的元素。方法如下：

    $(element).remove();

    例:

    span=("span").remove();
    $span.insertAfter("ul");

    该示例中先删除所有的 span 元素，把删除后的元素使用 $span 接收，把删除后的元素添加到 ul 后面做为 ul 的兄弟节点。该操作相当于将所有的 span 元素以及后代元素移到 ul 后面。

    2、empty () 方法。

    empty () 方法严格来讲并不是删除元素，该方法只是清空节点，它能清空元素中的所有子节点。方法如下:

    $(element).empty();

    例：

    $("ul li:eq(0)").empty();

    该示例使用 empty 方法清空 ul 中第一个 li 的文本值。只能下 li 标签默认符号”・“。

    五、改–修改 DOM 节点操作

    　修改文档中的元素节点可以使用多种方法：复制节点、替换节点、包裹节点。

    1、复制节点 $(element).clone ()

    　复制节点方法能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为。方法如下:

    $(element).clone(true);

    例：

    $("ul li:eq(0)").clone(true);

    　该方法复制 ul 的第一个 li 元素，true 参数决定复制元素时也复制元素行为，当不复制行为时没有参数。

    2、替换节点 (element).repalcewith()、(element).repalceAll ()

    　替换节点方法能够替换某个节点，有两种形式形式实现：replaceWith () 和 replaceAll (). 使用 replaceWith 方法使用后面的元素替换前面的元素，replaceAll 方法使用前面的元素替换后面的元素，方法如下：(oldelement).replaceWith(newelement);(newelement).repalceAll (oldelement); 例：　$(“p”).replaceWith (“我要留下 “); 该方法使用 strong 元素替换 p 元素。

    　　$(“

    替换 strong

    “).repalceAll (“strong”); 该例使用 h3 元素替换所有的 strong 元素。

    3、包裹节点 (element).wrap()、(element).wrapAll ()、$(element).wrapInner ()

    　包裹节点方法使用其他标记包裹目标元素从而改变元素的显示形式等，并且该操作不会破坏原始文档的词义。包裹节点有三种实现形式：wrap ();wrapAll ();wrapInner ();

    　wrap () 方法如下：

    $(dstelement).wrap(tag);

    例：

    　$("p").wrap("<b></b>");//该示例方法使用b标签包裹所有的p元素每个元素都使用b标签包裹。

    　wrapAll () 方法如下：

    $(dstelement).wrapAll(tag);

    例：

    　$("p").wrapAll("<b></b>");//访示例方法使用b标签包裹所有的p元素，所有的p元素标签用一个b标签包裹。

    　　wrapInner () 方法如下：

    $(dstelement).wrapInner(tag);

    例：

    　$("strong").wrapInner("<b></b>");//该示例使用b标签包裹每个一strong元素的子元素。

    Dom 元素的其他操作：属性操作、样式操作、设置和获取 HTML, 文本和值、遍历节点操作、Css-Dom 操作。

    1、属性操作 attr () 和 removeAttr ()

    attr () 方法能够获取元素属性，也能能够设置元素属性。方法如下，当 attr (para1) 方法有个参数时候用于获得当前元素的 para1 的属性值，当 attr (para1,attrValue) 有两个参数时候设置当前元素的属性名为 para1 的属性值为 attrValue; 例：

    $("p").attr("title");//该示例用于获得p元素的title属性值。
    $("p").attr("title","//你最喜欢的水果");该示例设置p元素的title属性值为"你最喜欢的水果";

    如果一次设置多个属性值可以使用 “名 / 值” 对形式，例：

    $("p").attr({"title":"你最喜欢的水果","name":"水果"})//。该示例一次设置两个属性值。

    removeAttr () 方法用于删除特定的属性，方法是在参数中指定属性名。例：

    $("p").removeAttr("name");//该方法就是移除p元素的name属性。

    2、样式操作 addClass ()、removeClass ()、toggleClass () 和 hasClass ()

    添加样式 addClass () 方法，使用该方法对目标元素添加相应的样式，方法如下：

    $(element).addClass();

    例：

    $("p").addClass("ul");//该示例设置元素p的样式为ul。

    移除样式 removeClass () 方法，使用该方法移除目标元素的指定样式，方法如下：

    $(element).removeClass();

    例：

    $("p").removeClass("ul");//该救命去除掉p元素的ul类样式。

    切换样式 toggleClass () 方法，使用该方法切换目标元素的样式，方法如下：

    $(element).toggleClass();

    例：

    $("p").toggleClass("ul");//该方法来回切换【添加删除实现切换】元素p的样式ul.

    判断元素是否使用了样式 (element).hasClass(),方法如下：(element).hasClass (class); 例：

    alert($("p").hasClass("ul"));//打印出p元素是否有ul样式。

    PS:addClass () 和 attr () 方法设置样式的不同，attr 方法把元素的属性名对应的属性值设为方法中的参数值，addClass () 则把属性值

    添加到属性名对应的属性值中。例：已有元素

    元素样式

    , 使用 attr () 和 addClass () 分别添加新样式。

    3、设置和获取 HTML【html ()】, 文本【text ()】和值【val ()】

    html () 方法获得或设置某个元素的 html 元素。方法如下:$(selector).html (); 例:

     $("p").html();该示例获得元素p的html内容。

    $("p").html("<strong>添加html内容</strong>");该示例设置p的html内容为”<strong>添加html内容</strong>“;

    PS：该方法可以用于XHTML文档，不能用于XML文档。

    text()方法获得或设置某个元素的文本值。方法如下:$(selecotr).text();例：

    $("p").text();该示例获得元素p的text文本内容。

    $("p").text("重新设置的文本内容");该示例设置元素p的text文本为"重新设置的文本内容";

    PS:该方法对html和XML文档都适用。

    val()方法获得或设置某个元素的值，如果元素值是多选则以数组形式返回，方法如下：$(selector).val();例:文本元素 
    <input type="text" id="userName" value="请输入用户名" />
    $("#userName").val();获得input元素的值。
    $("#userName").val('响马');设置input元素的值为'响马'。
    val()方法的不仅能操作input，最重要的一个用途用于select【下拉列表框】、checkbox【多选框】、radio【单选框】。例：在下拉框下的多选赋值应用<select id="fruits" multiple="multiple"><option>苹果</option><option>香蕉</option><option>西瓜</option></select>
    $("#fruits").val(['苹果','香蕉']);该示例使select中苹果和香蕉两项被选中。

    4、遍历节点操作 children ()、next ()、prev ()、siblings () 和 closest ()

    children () 方法用于取得匹配元素的子元素集合，只匹配子元素不考虑任何后代元素。方法如下：$(selector).children (); 例：

    　("("body").children().length;//该示例获得body元素的子元素个数；

    next () 方法用于匹配元素的下一个兄弟节点，方法如下:$(selector).next (); 例：

    　$("p").next().html();//该示例获得p元素的下一个兄弟节点的html内容。

    prev () 方法用于匹配元素的上一个兄弟节点，方法如下：$(selector).prev (); 例：

    　$("ul").prev().text();//该示例获得ul元素的上一个兄弟节点的文本内容。

    siblings 方法 () 用于匹配目标元素的所有兄弟元素，方法如下：$(selector).siblings (); 例：

    $("p").slibings();//示例获得p元素的所有兄弟节点元素。

    closest () 方法 () 用来取得最近的匹配元素，首先检查当前元素是否匹配如果匹配则直接返回，否则继续向上查找父元素中符合条件的元素返回，如果没有匹配的元素则返回空 JQuery 对象。

    5、CSS-Dom 操作 css ()、offset ()、position ()、scrollTop () 和 scrollLeft ()

    css () 方法用于获取、设置元素的一个或多个属性。方法如下：$(selector).css (); 例：

    $("p").css("color","red");//该示例用于设置元素的颜色属性为红色;
       $("p").css("color")//该示例用于获得元素的color样式值;
    　$("p").css({"font-size":"30px","backgroundColor","#888888"});//该示例用于设置元素的多个样式。

    offset () 方法用于获取元素相对当前窗体的偏移量，其返回对象包括两个属性：top 和 left。方法如下：$(selector).offset ()

    　var offset= $("p").offset(); var left=offset.left;var top=offset.top;//该示例用于获得元素p的偏移量。

    PS:offset () 只对可见元素有效。

    position () 方法用于获取元素于最近的个 position 样式属性设置为 relative 或者 absolute 的祖交节点的相对偏移量。方法如下：$(selector).position (); 例：

    　var postion = $("p").positon();var left=positon.left;var top=positon.top;//该示例用于获得元素p的位置。

    scrollTop () 和 scrollLeft () 方法用于获取元素的滚动条距顶端的距离和距左侧的距离。方法如下：(selector).scrollTop ();(selector).scrollLeft (); 例：

    var scrollTop=("p").scrollTop();var scrollLeft=("p").scrollLeft();//该示例用于获得元素的滚动条的位置。

    也可以添加参数将元素滚动到指定的位置。例：

    　("textarea").scrollTop(300);("textarea").scrollLeft(300);