第一篇博客，完全是写项目的时候做的笔记。
方法一：load()方法
用法：
$('选择器').load(url, [data], [callback]);
参数：
url: 需要导入文件的地址，可以是html，也可以是动态的脚本文件
data：参数（可选）
callback：回调，一般写回掉方法
被加载html文件部分代码 a.html：
<html>
<body>
<div id="container"></div>
</body>
</html>目标html文件 test.html:
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
</head>
<body>
<p>我是html文件</p>
</body>
</html>$('#container').load("test.html",function(respone){
$('#container').html(respone);
});这样子就可以实现将一个test.html文件加载到a.html文件中的id为container的div中。
但是这里出现的问题是：应为是将一整个html文件都加载到另一个html文件中去，所以就会出现在id为container的div中，也包含test.html文件中的<head>标签的所有内容，所以就会重复导入一些不必要的元素标签。这就可能会导致加入进container的时候布局会乱。所以用这种方法加载静态html文件并不是很好。
方法二：append()方法
用法：
$('选择器').append(字符串);
参数：
字符串：字符串内容是可以是html代码，如“<p>例子</p>”
被加载html文件部分代码 a.html：
<html>
<body>
<div id="container"></div>
</body>
</html>jQurey代码：
let testHtml = `<p id="test">我是append进来的</p>`
$('#container').append(testHtml);好了，现在container就已经添加进了一个p标签，但是我想给p标签添加点击事件的时候，我却添加不了。例如：
$('#test').click(function(){
//这样子添加点击监听的时候，我并不能获取到test这个id的元素
});我百度了一下原因，是因为，我动态添加html标签的时候，新添加的节点不再dom树上。
添加监听解决方法：on()方法
用法：
$(父级选择器).on(even, childSelector, data, function);
参数：
even：必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector：可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data：可选。规定传递到函数的额外数据。
function：可选。规定当事件发生时运行的函数。
代码：
$('#container').on('click','p',function(){
//处理相关逻辑
});
扫一扫
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
