jQuery的HTML()与Load()的区别

巴扎黑

发布： 2018-05-15 16:51:24

原创

3136人浏览过

jQuery的HTML()与Load()的作用很相似，都是可以改变HTML的内容，当然也有一些明显的区别。

jQuery HTML 操作详解：

jquery 包含很多供改变和操作 html 的强大函数。

其中HTML()方法改变 HTML 内容

语法

$(selector).html(content)

登录后复制

类似html() 函数改变所匹配的 HTML 元素的内容（innerHTML）。

实例

$("p").html("html content");

jQuery Load 操作详解：

定义和用法

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	载入成功时执行的回调函数。

例子 1

与上面的实例类似，但是以 POST 形式发送附加参数并在成功时显示信息：

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("The last 25 entries in the feed have been loaded");
});

登录后复制

例子 2

加载文章侧边栏导航部分至一个无序列表：

HTML 代码：

<b>jQuery Links:</b>
<ul id="links"></ul>

登录后复制

jQuery 代码：

$("#links").load("/Main_Page #p-Getting-Started li");

登录后复制

例子3

<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="http://www.php.cn/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="http://www.php.cn/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>

登录后复制

以上就是jQuery的HTML()与Load()的区别的详细内容，更多请关注php中文网其它相关文章！