• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 浅谈script在html中的摆放位置

浅谈script在html中的摆放位置

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含script,html等相关知识,佚名 希望在学习及工作中可以帮助到您

以前一直觉得script在html中的任何位置都可以,今天做一个需求的时候才更正了自己的错误思想啊--script的位置也不是随便放的。

首先是想实现一个select标签,有是和无两个option,但是在初始化的时候要求select标签默认选择空值,所以我在点击的时候加了一个方法让他把空值删掉:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="jquery/jquery-1.11.1.min.js"></script>  
  5. </head>  
  6. <script>  
  7. $('#checkcash').click(function () {   
  8.         if ($('#checkcash').val() == '0') {   
  9.             $("#checkcash option[value='0']").remove();   
  10.         }   
  11.     });   
  12.     $("#alert").click(function(){   
  13.     alert("1123");   
  14.     })   
  15. </script>  
  16. <body>  
  17.  是否已提现 <select id="checkcash"   style="width: 181px">  
  18.                             <option selected="selected" value="0"></option>  
  19.                             <option value="1">是</option>  
  20.                             <option value="2">否</option>  
  21.                             </select>  
  22.                                 
  23.                             <input type='button' id='alert' value="anwo">  
  24. </body>  
  25.   
  26.   
  27. </html>  

但是这样并不能达到想要的效果,起初以为是jquery语法错误还一直在网上查,改,但是都不管用,后来突然想到是不是应该把script放到后面,试了一下,结果果真ok了,这才恍然大悟,原来不是这样的。

后来查了一下原因是因为,html文件是自上而下的执行方式,但引入的css和javascript的顺序有所不同,css引入执行加载时,程序仍然往下执行,而执行到<script>脚本是则中断线程,待该script脚本执行结束之后程序才继续往下执行。所以,一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面的效果的实现,是需要预先动态的加载一些js脚本,所以这些脚本应该放在<body>之前。其次,不能将需要访问dom元素的js放在body之前,因为此时还没有开始生成dom,所以在body之前的访问dom元素的js会出错,或者无效。就是因为这个,在dom没生成好时我就给它添加了方法,才导致这样。

真的应该多学习很多地方以为所以然了,却没深究。以后还要加油!

 ps:其实还有另外一种方法,那就是用jquery的初始化页面方法,把上面给标签添加的点击事件加入到$(function(){})中也是可以的,原理和上面是一样的,这个方法是等页面加载好了才执行,所以不管放在哪都可以了!

以上这篇浅谈script在html中的摆放位置就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持微课江湖。

您可能想查找下面的文章:

  • 浅谈script在html中的摆放位置
  • 详解a href=#与 a href=javascript:void(0) 的区别
  • HTML元素 noscript使用介绍
  • 在html中添加script脚本的2种方法和注意事项
  • Table相关整理及Javascript操作table,tr,td
  • 如何正确地在XHTML文档中使用JavaScript和CSS
  • html marquee
  • html中如何使用JavaScript
  • img标签 onerror事件

相关文章

  • 2017-08-05关于超链接的一些问题
  • 2017-08-05在html中添加script脚本的2种方法和注意事项
  • 2017-08-21动态加载html后,点击获取焦点
  • 2017-08-05hr 水平线样式示例代码
  • 2017-08-05html标签全称和功能介绍
  • 2017-08-05Form表单标签的Enctype属性的作用及应用示例介绍
  • 2017-08-05HTML 隐藏滚动条和去除滚动条的方法
  • 2017-08-05Firefox下英文字母不换行的解决方案
  • 2017-08-05用图片作为label,for属性IE下不起作用
  • 2017-08-0510个未被充分利用或被误解的HTML标签

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • input中id和name属性的区别示例介绍
    • 顶部固定div可设置半透明效果
    • 改变HTML下拉框SELECT选项的多种方法
    • 定义span的最小高度没有效果的解决方法
    • 关于IE8兼容:X-UA-Compatible属性的解释
    • HTML教程:收集的常用的HTML标签(6)
    • html文件的中文乱码问题与在浏览器中的显示问题
    • 纯HTML标签你熟悉多少?
    • xhtml的块级标记小结
    • 用HTML和CSS打造属于自己的暖男“大白”

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有