第一篇博客,完全是写项目的时候做的笔记。
方法一: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>
jQuery代码 a.js:
$('#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(){
//处理相关逻辑
});
on方法只能处理那些需要事件的元素上,还有一种情况是:我需要获取到动态添加的html,但是添加事件。这个问题还没有解决,等我解决了这个问题再写一篇。