思洋互动网站建设学前班

内容替换

内容替换操作使用了jQuery工具函数中的replaceWith()函数。这个函数用参数携带的内容来替换匹配元素的内容。

1．jQuery函数replaceWith()--替换元素内容

该函数将所有匹配的元素替换成指定的HTML或DOM元素。其语法形式如下：

 

1. replaceWith(content) 

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

HTML代码和CSS样式参考光盘内容。下面直接看一下JavaScript功能实现：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#update").click(function(){  
4. 4           $("#div1").children().replaceWith("<b>Paragraph. </b>");                //将元素内容替换为指定内容  
5. 5       });  
6. 6   });  
7. 7 </script> 

当单击按钮时，DIV原有内容被替换成粗体的Paragraph，效果如图3.20所示。

和replaceWith()实现效果类似，但操作不同的是relaceAll()函数。relaceWith()是由被替换的对象调用，替换内容为参数。而relaceAll()则是由替换内容调用，参数是被替换的匹配元素。

图3.20  DIV内容替换

2．jQuery函数replaceAll()--元素替换

该函数用匹配的元素替换掉所有selector匹配到的元素。其语法形式如下：

1. replaceAll(selector) 

 

可以将上面的代码修改如下：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#update").click(function(){  
4. 4           $("<b>Paragraph. </b>").replaceAll($("#div1").children());              //利用指定内容去替换匹配元素中的内容  
5. 5       });  
6. 6   });  
7. 7 </script> 

 

效果和图3.20一致。