jQuery 包含很多供改变和操作 HTML 的强大函数。
$(selector).html(content)
类似html() 函数改变所匹配的 HTML 元素的内容(innerHTML)。
$("p").html("html content");
load() 方法载入远程 HTML 文件代码并插入至 DOM 中。
Jquery 的Load()方法它跟html()的区别在于,它是载入远程HTML文件后,还能执行其中的Javascrpt脚本。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。
jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。
请查看下面的示例。
load(url,[data],[callback])
参数 | 描述 |
---|---|
url | 待载入的 HTML 网页网址。 |
data | 发送至服务器的 key/value 数据。在 jQuery 1.3 中也可以接受一个字符串了。 |
callback | 载入成功时执行的回调函数。 |
与上面的实例类似,但是以 POST 形式发送附加参数并在成功时显示信息:
$("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });
加载文章侧边栏导航部分至一个无序列表:
HTML 代码:
<b>jQuery Links:</b> <ul id="links"></ul>
jQuery 代码:
$("#links").load("/Main_Page #p-Getting-Started li");
<p><span style="color: #000000;">1)主页面<br><br><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery-1.4.4.min.js"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/<a href="//m.sbmmt.com/wiki/48.html" target="_blank">javascript</a>"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #000000;"><br><br> $(<a href="//m.sbmmt.com/code/658.html" target="_blank">document</a>).ready(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">() {<br><br> $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#target</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).load(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">target.html</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">() {<br><br><br> });<br><br> });<br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="target"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br>2) 子页面<br><br><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery-1.4.4.min.js"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #000000;"><br><br> alert(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">hello world!I am target</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);<br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br>above is script</span></p>
Atas ialah kandungan terperinci jQuery的HTML()与Load()的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!