1、JQuery 改变p中的文本值
<html> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").html("Update text"); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click here</button> </body> </html>
2、JQuery 添加p中的文本值
<html> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").append(" Append text"); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">请点击这里</button> </body> </html>
3、after() 函数在所有匹配的元素之后插入 HTML 内容
<html> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").after(" Add content."); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click here</button> </body> </html>
4、jQuery HTML 操作
函数 | 描述 |
---|---|
$(selector).html(content) | 改变被选元素的(内部)HTML |
$(selector).append(content) | 向被选元素的(内部)HTML 追加内容 |
$(selector).prepend(content) | 向被选元素的(内部)HTML “预置”(Prepend)内容 |
$(selector).after(content) | 在被选元素之后添加 HTML |
$(selector).before(content) | 在被选元素之前添加 HTML |