Jquery基础教程之DOM操作(3)

       替换节点方法能够替换某个节点,有两种形式形式实现:replaceWith()和replaceAll().使用replaceWith方法使用后面的元素替换前面的元素,replaceAll方法使用前面的元素替换后面的元素,

方法如下:

$(oldelement).replaceWith(newelement);$(newelement).repalceAll(oldelement);

例:             

$("p").replaceWith("<strong>我要留下</strong>");

该方法使用strong元素替换p元素。        

$("<h3>替换strong</h3>").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()则把属性值

添加到属性名对应的属性值中。例:已有元素<p>元素样式</p>,使用attr()和addClass()分别添加新样式。      

$("p").attr("class","another").

结果是<p>元素样式</>      

$("p").addClass("class","another")

结果是<p>元素样式</p>

    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" value="请输入用户名" />

      $("#userName").val();获得input元素的值。

      $("#userName").val('响马');设置input元素的值为'响马'。

      val()方法的不仅能操作input,最重要的一个用途用于select【下拉列表框】、checkbox【多选框】、radio【单选框】。

例:在下拉框下的多选赋值应用

<select 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元素的所有兄弟节点元素。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wggxsw.html