JS-JS代码插入位置
一、HTML 页面的 <head> 部分中
由于 HTML
文档是由浏览器从上到下依次载入的,将 JavaScript 代码放置于<head></head>
标签之间,可以确保在需要使用脚本之前,它已经被载入了。
二、HTML 页面的 <body>
部分中
设想如下一种情况:我们有一段 JavaScript 代码需要操作 HTML 元素。但由于 HTML
文档是由浏览器从上到下依次载入的,为避免 JavaScript 代码操作 HTML 元素时,HTML 元素还未载入而报错(对象不存在),因此需要将这段代码写到
HTML 元素后面。
注意:
HTML 中的脚本必须位于 <script> 与
</script> 标签之间。
三、脚本保存到外部文件中
在使用了外部引用 JavaScript 代码之后,其好处显而易见:
公共的
JavaScript 代码可以被复用于其他 HTML 文档,也利于 JavaScript 代码的统一维护
HTML
文档更小,利于搜索引擎收录
可以压缩、加密单个 JavaScript 文件
浏览器可以缓存 JavaScript
文件,减少宽带使用(当多个页面同时使用一个 JavaScript
文件的时候,通常只需下载一次)
注意:
如需使用外部文件,在 <script> 标签的 "src"
属性中设置该 .js 文件:
<script src="myScript.js"></script>
外部脚本不能包含
<script> 标签。
将 JavaScript 代码形成为外部文件,也会增加服务器的 HTTP
请求负担,在超高并发请求的环境下,这并不是一个好的策略。另外 在引用外部 js 文件时,需注意文件的正确路径。
JS-JS代码插入位置的更多相关文章
- 基于面向对象的图片轮播(js原生代码)
无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
- 网络问卷调查js实现代码
昨天一个同行妹纸写了一个网络问卷调查的效果,但是有bug,于是就来问我该如何解决这个bug.经过我的分析,bug主要还是出在复选框的那部分,经过修改,bug问题解决,现在贴出如下代码,仅供大家参考: ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验
转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
- SpringMVC学习系列-后记 结合SpringMVC和Hibernate-validator,根据后台验证规则自动生成前台的js验证代码
在SpringMVC学习系列(6) 之 数据验证中我们已经学习了如何结合Hibernate-validator进行后台的数据合法性验证,但是通常来说后台验证只是第二道保险,为了更好的用户体验会现在前端 ...
- 响应式js幻灯片代码一枚
网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...
- ASP.Net MVC4中封装CSS和js冗余代码(不让其大篇的显示在前台上)
(1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用. 由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...
- 使用正则表达式匹配JS函数代码
使用正则表达式匹配JS函数代码 String someFunction="init"; Pattern regex = Pattern.compile("function ...
- JS倒计时 代码
JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...
随机推荐
- App里面如何正确显示用户头像
1.说明,一般用户头像在上传的时候都会处理为正方形,如果没有处理该怎么正确显示用户头像呢?解决方案:用css强制 在线地址移动端:戳这里 <div class="main-meimg& ...
- eclipse显示代码行数
最近做的手机APP正在进行最后一部分了,在一个类中估计要写上千行代码,来回的拉动滚动条太麻烦了,于是发现为什么我得eclipse不显示代码行数呢 其他C什么的编译器都显示的. 于是百度了一下,一下子 ...
- Android RecycleView 自定义Item的使用
自定义布局的RecycleView需要自己实现Adapter,ViewHolder和布局: 自定义Adapter继承RecycleView.Adapter,重写getItemCount(),onBin ...
- Java:匿名类,匿名内部类
本文内容: 内部类 匿名类 首发日期 :2018-03-25 内部类: 在一个类中定义另一个类,这样定义的类称为内部类.[包含内部类的类可以称为内部类的外部类] 如果想要通过一个类来使用另一个类,可以 ...
- Redis系列(二):Redis的数据类型及命令操作
原文链接(转载请注明出处):Redis系列(二):Redis的数据类型及命令操作 Redis 中常用命令 Redis 官方的文档是英文版的,当然网上也有大量的中文翻译版,例如:Redis 命令参考.这 ...
- maven管理项目的特点
Maven介绍 我们在开发项目的过程中,会使用一些开源框架.第三方的工具等等,这些都是以jar包的方式被项目所引用,并且有些jar包还会依赖其他的jar包,我们同样需要添加到项目中,所有这些相关的ja ...
- 07-OpenLDAP密码审计
OpenLDAP密码审计 阅读视图 密码审计的作用 操作实践 1. 密码审计的作用 开启密码审计的功能主要用于记录OpenLDAP用户修改密码,以及密码审计. 2. 操作实践 开启密码审计模块并配置密 ...
- MSSQL清理所有用户数据库日志(SQLSERVER2008)
USE [master]; SET NOCOUNT ON; )=''; )=''; DECLARE @clearSql VARCHAR(MAX)=''; ; ,),TMP_WHILE_FLAG, T. ...
- JQuery实战中遇到的两个小问题$(document).ready() 、bind函数的参数传递问题
一.$(document).ready() 与 window.onload的区别 1.执行时间 window.onload 必须等到页面内所有元素(包括图片 css js等)加载完毕后才会执行. $( ...
- myeclipce项目导入eclipse中报错
1 找到新建页面所在的工程名字,然后左键选中,右键弹出功能菜单,选择Build Path,进入配置路径. 2 在java build path 页面的下选择Libraries栏目(默认选择),点击右侧 ...