将JS代码从HTML移动到HEAD部分的源代码
Move JS code from HTML to source in HEAD section
我有一个问题,如果你不介意的话,我希望你能指导我解决。。。在我的HTML源代码中,到处都有一些css代码。所以我决定把它放在一个名为principal.css的文件中,并在的标题部分做以下操作
<link href="css/principal.css" rel="stylesheet" type="text/css" />
这真是太棒了!我的想法是对HTML中的javascript代码做同样的处理,但它没有起作用。这就是其中之一:
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.addClass("output")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value);
});
有什么特别的方法吗?我的目标是让页面的代码量最少,我留下了良好的缩进、文档化和干净。问候,我将在等待您的答复!请原谅我的英语。。。
您需要将其包装在$(document).ready(…)中
此外,它还有不寻常的压痕。这样格式化可能会更好:
$(document).ready(function() {
$("[data-slider]").each(function () {
var input = $(this);
$("<span>").addClass("output").insertAfter($(this));
}).bind("slider:ready slider:changed", function (event, data) {
$(this).nextAll(".output:first").html(data.value);
});
});
我个人不喜欢把这么多这样的命令连在一起。它可能效率稍高,但它使调试和修复问题变得更加困难。我个人会把.each()和.bind()分解成单独的语句。但我想这是一个偏好的问题。
.ready()文档
$(document).ready(function(){
// your code here
});
或
.load()文档
$(window).on('load', function(){
// your code here
});
将js
代码放在一个单独的.js
文件中。类似于CSS也被放置在一个单独的文件中,然后将其链接到您的html文件。
就像这样,在你的html文件中:
<script src="somejsfile.js"></script>
是的,您必须将js代码封装在document.ready函数中,这样它才能在加载完documents元素后执行。
例如:
$(document).ready(function() {
// Your JS code here
});
这是因为浏览器HTML
解释器从TOP to BOTTOM
读取代码,所以如果您不设置document.ready
,JavaScript
将在任何document elements are loaded
之前运行。
标题:
<head>
<link href="css/principal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="myscript.js"></script>
</head>
myscript.js
$(function() {
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.addClass("output")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value);
});
});
如果您计划将js代码放在一个单独的文件中,我想添加这一点,这是一个好主意。您应该意识到,您将不必使用。。。
<script>
//js code
</script>
脚本标记在一个单独的js文件中。
- 活动选项卡's源代码-获取变量s值
- Rails资产管道-只向head添加jquery
- 无法更改源代码的网站的自动填充功能
- 是否可以 document.getElementsByTagName('head')[0] ever 返回 null
- 如何使用javascript编辑页面源代码
- HEAD中LINK和STYLE元素的求值顺序
- 在不更改HTML源代码的情况下,在管理员TinyMCE编辑器中突出显示文本
- 在Node.js中,我在哪里可以看到JavaScript方法的源代码,例如hasOwnProperty
- Is there a wrapper/grouping element usable in <head>?
- 有没有任何方法可以将javascript对象从源代码传递到系统/浏览器剪贴板
- 当源代码可用时,如何正确保护密码
- 用PHP读取另一个网站的源代码,并将其作为字符串提供给JavaScript
- 如何在HTML源代码中提取javascript变量
- 可以't识别验证消息的源代码
- Ember.js+传单+rails(使用Javascript MVC创建rails应用程序并打开源代码映射)
- 如何在internjs中打印createpage中的HTML源代码
- Node.js和Mongodb安全+源代码加密选项
- CKeditor不会在源代码模式下更新文本区域
- 源代码未完全执行.(JS)
- 将JS代码从HTML移动到HEAD部分的源代码