您的位置：首页 > Web前端 > JQuery

Jquery基础之DOM操作

2015-09-05 22:06 701 查看

一、jQuery对象与Dom对象的区别

　　一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的，开始的时候不理解，现在此案知道，原来jQuery获得的对象并不和我们平时使用getElementById获得的对象是一样的对象。所以一些新手就很迷惑，为什么${”#Element”}不能直接innerHTML，这就是原因所在，解决方式请看下文。

jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。

如：

$(document.getElementById("msg"))

则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：

$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]

这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：

$("#msg").html();

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innerHTML;

jQuery查找对象是按照标准的dom层级关系来查找的

如table中无论你是否有tbody，在查找子对象的时候都要按照table-->tbody-->tr的层级关系来查找

关于this

<inputname="testThis"type="text"onchange="textThis(this)"/>

functiontextThis(obj)
{
//在引用自己用的this是dom对象
alert($(obj).val());
}

该this为dom对象

innerHTML和outerHTML

innerHTML设置或获取对象起始和结束标签内的HTML

outerHTML设置或获取对象及其内容的HTML形式

二、jQuery的DOM操作

　　Dom是DocumentObjectModel的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOMCore(核心)、HTM-DOM和CSS-DOM。

　　每一个网页都可以用DOM表示出来，每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵DOM树，代码：

　　

ViewCode

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"
<title>DOMDemo</title>
</head>
<body>
<ptitle="选择你最喜欢的水果.">你最喜欢的水果是？</p>
<ul>
<lititle="苹果">苹果</li>
<lititle="橘子">橘子</li>
<lititle="菠萝">菠萝</li>
</ul>
</body>
</html>

　构建出的DOM树如下：

　　

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

　　一、查--查找DOM节点

　　　　查找节点非常容易，使用选择器就能轻松完成各种查找工作。例：查找元素节点p返回p内的文本内容$("p").text();例：查找元素节点p的属性返回属性名称对应的属性值$("p").attr("title"),返回p的属性title的值。

　　二、建--新建DOM节点

　　　　1、创建元素节点

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

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

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

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

　　　　　　添加后页面中只能看到<li>元素默认的"·",由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。

　　　　　　PS:append()方法是添加DOM节点方法详见增--添加DOM节点。

　　　　2、创建文本节点

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

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

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

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

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

　　　　3、创建属性节点

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

　　　　　　$li3=$("<lititle='榴莲'>榴莲</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("<lititle='香蕉'>香蕉</li>");

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

　　　　2、appendTo()方法

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

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

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

　　　　3、prepend()方法

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

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

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

　　　　4、prependTo()方法

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

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

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

　　　　5、after()方法

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

　　　　　　$("p").after("新加段新加段新加段新加段新加段");

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

　　　　6、insertAfter()方法

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

　　　　　　$("insertAfter操作").insertAfter("span");

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

　　　　7、before()方法

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

　　　　　　$("p").before("下面是个段落");

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

　　　　8、insertBefore()方法

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

　　　　　　$("<ahref='#'>锚</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();例：

　　　　　　$("ulli:eq(0)").empty();

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

　　五、改--修改DOM节点操作

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

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

　　　　　　　复制节点方法能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为。方法如下:$(element).clone(true);例：

　　　　　　　　$("ulli: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元素。

　　　　　　　　$("<h3>替换strong</h3>").repalceAll("strong");该例使用h3元素替换所有的strong元素。

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

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

　　　　　　　wrap()方法如下：$(dstelement).wrap(tag);例：

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

　　　　　　　wrapAll()方法如下：$(dstelement).wrapAll(tag);例：

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

　　　　　　　　wrapInner()方法如下：$(dstelement).wrapInner(tag);例：

　　　　　　　　$("strong").wrapInner("");该示例使用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()则把属性值

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

　　　　　　$("p").attr("class","another").结果是<pclass='another'>元素样式</>

　　　　　　$("p").addClass("class","another")结果是<pclass='class1another'>元素样式

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

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

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

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

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

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

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

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

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

　　　　　　val()方法获得或设置某个元素的值，如果元素值是多选则以数组形式返回，方法如下：$(selector).val();例:文本元素

<inputtype="text"id="userName"value="请输入用户名"/>

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

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

　　　　　　val()方法的不仅能操作input，最重要的一个用途用于select【下拉列表框】、checkbox【多选框】、radio【单选框】。例：在下拉框下的多选赋值应用<selectid="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()

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

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

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

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

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

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

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

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

$("#DIV")返回的不是元素本身，返回的是一个数组，要取得该元素必须得$("#DIV")[0],才能取得该元素。

jQuery操作DOM元素

　　HTMLDOM常见操作:
　　查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点.

查找节点

　　关于节点的查找,是利用选择器完成的.
　　在上一篇jQuery选择器中已经介绍过了:/article/4672103.html

插入节点

　　首先看一个例子,用原生的JavaScript如何创建并添加元素:

<!DOCTYPEhtml>
<html>
<head>
<script>

varaddItems=function(){
varnumber=parseInt(document.getElementById("number").value);
vardiv1=document.getElementById("div1");

div1.innerHTML="";//cleardivbeforeappend

for(vari=0;i<number;++i){
varinput=document.createElement("input");
input.setAttribute("type","text");
varbr=document.createElement("br")
div1.appendChild(input);
div1.appendChild(br);
}
}

</script>
</head>
<body>
<inputtype="text"id="number"/>
<inputtype="button"id="btn"value="Click"onclick="addItems();"/>
<divid="div1">
</div>
</body>
</html>

　　jQuery插入元素的方法:
　　append():向每个匹配的元素内部追加内容.
　　appendTo():将所有匹配的元素追加到指定的元素中,即$(A).appendTo(B),是将A追加到B中.
　　prepend():向每个匹配的元素内部前置内容.
　　prependTo():将所有匹配的元素前置到指定的元素中,即$(A).prependTo(B),是将A前置到B中.

　　前面几个方法都是插入子元素,后面的这几个方法是插入兄弟元素.
　　after():在每个匹配的元素之后插入内容.
　　insertAfter():将所有匹配的元素插入到指定元素的后面.
　　before():在每个匹配的元素之前插入内容.
　　insertBefore():将所有匹配的元素插入到指定元素的前面.

　　jQuery支持方法链式的调用,即append()等方法返回的仍然是这个jQuery对象,后面可以继续调用append()方法.

　　下面我们将开始的那个例子用jQuery实现:

<!DOCTYPEhtml>
<html>
<head>
<scriptsrc="/jquery/jquery-1.11.1.min.js">
</script>
<script>

varaddItems=function(){
varnumber=parseInt($("#number").val());
vardiv1=$("#div1");

div1.html("");//cleardivbeforeappend

varstring="";
for(vari=0;i<number;++i){
string+="<inputtype='text'/><br/>"
}
div1.append(string);
}

</script>
</head>
<body>
<inputtype="text"id="number"/>
<inputtype="button"id="btn"value="Click"onclick="addItems();"/>
<divid="div1">
</div>
</body>
</html>

　　插入已有节点->移动节点
　　除了可以插入新建的节点之外,还可以选择已有节点,插入到别的地方,以完成节点的移动操作.
　　注意这里是移动操作,即原来的节点会改变位置:

<!DOCTYPEhtml>
<html>
<head>
<scriptsrc="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){

$("ulli:eq(0)").appendTo("ul");

});
</script>
</head>
<body>
<ul>
<lititle="li1">1</li>
<lititle="li2">2</li>
<lititle="li3">3</li>
<lititle="li4">4</li>
<lititle="li5">5</li>
</ul>
</body>
</html>

　　运行结果为:

删除节点

　　jQuery中删除节点的方法:
　　remove():移除所有匹配的元素.
　　empty():删除匹配的元素集合中所有内容,包括子节点.注意,元素本身没有被删除.

　　关于remove()方法,有几点需要说明一下:
　　1.remove()方法的返回值:
　　remove()方法会返回被删除节点的jQuery对象.可以把这个对象插入到其他的地方.
　　所以也可以用这种方法来移动节点:

<!DOCTYPEhtml>
<html>
<head>
<scriptsrc="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){

$("ulli:eq(0)").appendTo("ul");//movelimethod1

//movemethod2:
varremoveLi=$("ulli:eq(0)").remove();//deleteli
removeLi.appendTo($("ul"));//addremovedli

});
</script>
</head>
<body>
<ul>
<lititle="li1">1</li>
<lititle="li2">2</li>
<lititle="li3">3</li>
<lititle="li4">4</li>
<lititle="li5">5</li>
</ul>
</body>
</html>

运行结果为:

注意直接写标签名(例如:appendTo(“ul”))和取jQuery对象(例如:appendTo($(“ul")))的结果一样.

　　2.remove()方法的参数:
　　remove()方法默认情况下会删除选择器选中的所有元素.
　　比如下面的代码将删除所有<ul>下的<li>:

//removeallli
$("ulli").remove();

　　remove()方法还可以接收参数,设置一些筛选条件,指定到底要删除其中的哪些节点.
　　比如除了指定title的,其他全部移除:

//removesome
$("ulli").remove("li[title!='li2']");

　　empty()方法:删除匹配元素集合中的所有子节点,清空内容.但是元素本身还存在.
　　比如:

//emptychildren
$("ul").empty();

会删除<ul>中的所有子节点.

　　而:

//emptycontent
$("ulli:eq(3)").empty();

　　会得到这样的效果:

复制节点

jQuery中复制节点的方法:
　　clone():创建匹配元素集合的副本.
　　clone()方法返回被复制的节点.
　　看一个例子,每次点击<li>都复制同样的元素并添加在<ul>末尾:

<!DOCTYPEhtml>
<html>
<head>
<scriptsrc="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("ul>li").click(function(){
$(this).clone().appendTo("ul");
});
});
</script>
</head>
<body>
<ul>
<lititle="li1">1</li>
<lititle="li2">2</li>
<lititle="li3">3</li>
<lititle="li4">4</li>
<lititle="li5">5</li>
</ul>
</body>
</html>

注意,clone出来的<li>对象就没有click事件了,即点击复制添加出来的<li>,不会再添加新的<li>.

　　jQuery考虑到有时候会有需要clone所有的事件,所以clone方法可以带一个参数.
　　clone(true):复制节点,包括所有的事件处理.
　　clone(false):复制节点,但不包括事件处理.不带参数时默认是这种情况.

替换节点

　　jQuery中替换节点的方法:
　　replaceAll():用指定的HTML内容或元素替换被选元素.
　　语法:$(content).replaceAll(selector).
　　replaceWith():用新内容替换所匹配到的元素.
　　语法:$(selector).replaceWith(content).

　　其中的content可以是HTML代码,可以是新元素,也可以是已经存在的元素.

　　关于用已有元素替换:
　　w3school的相关文档(http://www.w3school.com.cn/jquery/manipulation_replaceall.asp)中说:
　　"已经存在的元素不会被移动,只会被复制."这种说法是不正确的.

　　实际做了实验之后,发现用已有元素替换,原来的元素是会被移除的:

<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
alert("clickevent");
$("#button1").replaceAll($("div"));

});
});
</script>
<style>
div{height:20px;background-color:yellow}
</style>
</head>
<body>
<p>
Thisisparagraph:
<divid="div1">Thisisadiv1</div>
<divid="div2">Thisisadiv2</div>
<p>
Thisisbuttonarea:
<br><buttonid="button1"class="btn1">Button1</button>

</body>
</html>

　　页面初始状态:

　　点击按钮之后:

　　点击新得到的两个Button1,是可以弹出alert的,说明替换节点的时候连同节点事件一起放到了新的地方.

　　查看官方文档:
　　replaceAll():http://api.jquery.com/replaceAll/
　　replaceWith():http://api.jquery.com/replaceWith/
　　可以看到使用已有节点是不会复制该节点的,而是会移动该节点到新的地方.

包裹节点

　　包裹节点,意思是把匹配的元素用指定的内容或者元素包裹起来,即增加一个父元素.
　　方法有:
　　wrap():把匹配的元素用指定的内容或元素包裹起来.
　　wrapAll():把所有匹配的元素用指定的内容或元素包裹起来,这里会将所有匹配的元素移动到一起,合成一组,只包裹一个parent.
　　wrapInner():将每一个匹配元素的内容用指定的内容或元素包裹起来.

　　例子代码:

<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("#div1").wrap("<ahref='www.google.com'>GoogleWrapdiv1</a>");
});
$("#button2").click(function(){
$("div").wrapAll("<ahref='www.baidu.com'>BaiduWrapalldiv</a>");
});
$("#button3").click(function(){
$("div").wrapInner("<ahref='www.sogou.com'>SogouWrapinnerdiv</a>");
});
});
</script>
<style>
div{height:20px;background-color:yellow}
</style>
</head>
<body>
div1:<br/><divid="div1">Thisisadiv1</div>
div2:<br/><divid="div2">Thisisadiv2</div>
div3:<br/><divid="div3">Thisisadiv3</div>
Thisisbuttonarea:
<br/><buttonid="button1">Wrap</button>
<br/><buttonid="button2">WrapAll</button>
<br/><buttonid="button3">WrapInner</button>
</body>
</html>

　

　　页面初始状态:

　　按第一个按钮,wrap特定的一个div:

　　
　　在按了第一个按钮之后,按第二个按钮,wrapAll将所有的div包裹进一个group:

　　按了第一个按钮和第二个按钮之后,按第三个按钮,wrapInner,在每一个div内部添加一层嵌套:

参考资料

　　圣思园张龙老师JavaWeb视频教程72
　　jQueryAPIDocument:http://api.jquery.com/

　　w3schooljQuery参考手册:
　　文档操作:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp
　　属性操作:http://www.w3school.com.cn/jquery/jquery_ref_attributes.asp
　　CSS操作:http://www.w3school.com.cn/jquery/jquery_ref_css.asp
　　w3school文档中有些地方说的不太对,建议细节部分还是看官方API文档.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Jquery基础之DOM操作

一、查--查找DOM节点

二、建--新建DOM节点

1、创建元素节点

2、创建文本节点

3、创建属性节点

三、增--添加DOM节点

1、append()方法

2、appendTo()方法

3、prepend()方法

4、prependTo()方法

5、after()方法

6、insertAfter()方法

7、before()方法

8、insertBefore()方法

四、删--删除DOM节点操作

1、remove()方法

2、empty()方法。

五、改--修改DOM节点操作

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

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

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

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

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

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

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

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

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

jQuery操作DOM元素

查找节点

插入节点

删除节点

复制节点

替换节点

包裹节点

相关杂项知识

参考资料

　　一、查--查找DOM节点

　　二、建--新建DOM节点

　　　　1、创建元素节点

　　　　2、创建文本节点

　　　　3、创建属性节点

　　　三、增--添加DOM节点

　　　　1、append()方法

　　　　2、appendTo()方法

　　　　3、prepend()方法

　　　　4、prependTo()方法

　　　　5、after()方法

　　　　6、insertAfter()方法

　　　　7、before()方法

　　　　8、insertBefore()方法

　　四、删--删除DOM节点操作

　　　　1、remove()方法

　　　　2、empty()方法。

　　五、改--修改DOM节点操作

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

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

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

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

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

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

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

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

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