JQUERY基础之jQueryreplaceWith

JQUERY的替换方法：replaceWith(content|fn)

返回值:jQueryreplaceWith(content|fn)

概述

将所有匹配的元素替换成指定的HTML或DOM元素。

 

参数

contentString, Element, jQuery, FunctionV1.2

用于将匹配元素替换掉的内容。如果这里传递一个函数进来的话，函数返回值必须是HTML字符串。

fnFunctionV1.4

返回THML字符串，用来替换的内容。

示例

描述:

把所有的段落标记替换成加粗的标记。

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").replaceWith("<b>Paragraph. </b>");

结果:

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

描述:

用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换。

HTML 代码:

<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

jQuery 代码:

$('.third').replaceWith($('.first'));

结果:

<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>

现在有一个HTML结构，要再一个IMG上实现跟A标签的CSS属性HOVER一样的鼠标经过效果。

IMG按钮，作用和A锚点一样，用REL弹出含有指定ID内容的窗口：

<div class="anniu_bg"><img src="style/btn2.jpg" width="86" height="85" rel="#mies1" onmouseover="mbtn1();"/></div>

编写2个函数，实现鼠标经过更改IMG的内容：

function mbtn2()
{
        $('.anniu_bg img').replaceWith('<img src="style/btn2.jpg" width="86" height="85" rel="#mies1" onmouseover="mbtn1();"/>');    
    
    }
    
    function mbtn1()
{
    $('.anniu_bg img').replaceWith('<img src="style/btn1.jpg" width="86" height="85" rel="#mies1" />');    
    document.onmouseout = mbtn2;
}
   

实现将IMG btn2.jpg在鼠标经过时替换成btn1.jpg