最近再用bootstrap垒前端,今天解决了一个困扰了许久的问题
起因是因为要加一个时间选择的控件,直接用datetimepicker,这东西都是官方提供的,所以奉行拿来主义,直接去官网下载,按照说明一步一步的贴就行了,结果总是不能正常使用,这个东西只显示,点击输入框有反馈,告诉你不能输入(正确),就是按钮无反应。
既然出了问题就要去解决,解决问题什么的最爽了(鬼信)
起初以为是引入的文件位置不对,但是经过一番检查,发现引入的文件每一个都可以通过点击路径去打开,说明文件引入是正确的
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet" >
<link href="css/bootstrapValidator.min.css" rel="stylesheet" >
<link href="css/city-picker.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/search.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet" >
<script type="text/javascript" src="./js/jquery-1.12.4.js" charset="UTF-8"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="./js/city-picker.data.js"></script>
<script type="text/javascript" src="./js/city-picker.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
那接下来就是检查js了,因为用的都是基础的东西,所以把每一个参数都按照人家的要求去检查,发现没有什么问题,也没有报错,但就是不执行
$('.form_datetime').datetimepicker({
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
那么问题来了,为什么不执行js语句呢?浏览器的控制台也没有报错。。。看了好久,然后发现了一个问题
别人用的js都是写在body里面的,然鹅,我写的都在head里。。于是我试着把js块放在了body里面,发现错误解决,所有模块正常使用
至此,问题解决
那么问题来了,为啥呢?
原因:
因为文档还没加载,就读了js,js就不起作用了想在head里用的话,用window.onload = function(){//这里包裹你的代码}
js可以分为外部的和内部的,外部的js一般放到head内。内部的js也叫本页面的JS脚本,内部的js一般放到body内,这样做的目的有很多:
1.不阻塞页面的加载(事实上js会被缓存)。
2.可以直接在js里操作dom,这时候dom是准备好的,即保证js运行时dom是存在的。
3.建议的方式是放在页面底部,监听window.onload 或 readystate 来触发js。
4.延伸:
head内的js会阻塞页面的传输和页面的渲染。head 内的 JavaScript 需要执行结束才开始渲染 body,所以尽量不要将 JS 文件放在 head 内。可以选择在 document 完成时,或者特定区块后引入和执行 JavaScript。head 内的 JavaScript 需要执行结束才开始渲染 body,所以尽量不要将 JS 文件放在 head 内。可以选择在 document 完成时,或者特定区块后引入和执行 JavaScript。所以在head内的js一般要先执行完后,才开始渲染body页面。为了避免head引入的js脚本阻塞流浪器中主解析引擎对dom的解析工作,对dom的渲染,一般原则是,样式在前面,dom文档,脚本在最后面。遵循先解析再渲染再执行script这个顺序。
也就是说一般head里面只放引入js,需要在本页面的内部js触发用的一般放在body里面的最后。
最后看下垃圾效果:
好嘞,去改样子去了