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

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

<!DOCTYPE html>

<html>

<head>

<script src="jquery/jquery-1.11.1.min.js"></script>

</head>

<script>

$('#checkcash').click(function () {

        if ($('#checkcash').val() == '0') {

            $("#checkcash option[value='0']").remove();

        }

    });

    $("#alert").click(function(){

    alert("1123");

    })

</script>

<body>

 是否已提现 <select id="checkcash"   style="width: 181px">

                            <option selected="selected" value="0"></option>

                            <option value="1">是</option>

                            <option value="2">否</option>

                            </select>

                            &nbsp;

                            <input type='button' id='alert' value="anwo">

</body>

</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中的摆放位置的更多相关文章

  1. TextArea中定位光标位置

    原文:TextArea中定位光标位置 在项目中,遇到一个场景:希望能在TextArea中输入某条记录中的明细(明细较简单,没有附属信息,只用记录顺序和值即可,譬如用"+"号来作为明 ...

  2. Google自动广告，将广告代码放置在 HTML 中的什么位置?

    Google自动广告,将广告代码放置在 HTML 中的什么位置? 为自动广告生成广告代码后,您需要将此代码放置在要展示广告的每个网页中.您应将广告代码放置在网页的 <head> 标记(或正 ...

  3. 得到当前对象在不同大小的页面中的绝对位置，及冒泡cancelBubble

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Ladda 应用提交表单的时候显示loading载入中 包含不同位置，不同效果

    Ladda 应用提交表单的时候显示loading载入中 包含不同位置,不同效果 不同大小.位置,效果,进度条等 演示 XML/HTML Code <article class="exa ...

  5. 路由器桥接(WIFI无线中继)设置及摆放位置图解

    路由器桥接(WIFI无线中继)设置及摆放位置图解 WIFI实在好用,但它的波覆盖面小.穿透力很差.我们安装时要考虑波的衍射特点,装在衍射效果最佳的位置(居中,室外可绕,避开密封墙).确实无法兼顾的地方 ...

  6. script标签引入脚本的引入位置与效果

    用script标签引入脚本的引入位置大致有两种情况: 1,在head中引入: 2,在body末尾引入: 浏览器由上到下解析代码,正常情况下,先解析head中的代码,在解析body中的代码:放在head ...

  7. JS查找数组中出现的位置及个数

    查找某个值在数组中出现的位置 var attr = [1,4,5,3,2,7,6,9]; var zhao = 8; var sy = -1; for(var i=0;i<attr.length ...

  8. UAC在注册表中的对应位置

    UAC在注册表中的对应位置 HKEY_LOCAL_MACHINE/SOFTWARE/Microsoft/Windows/CurrentVersion/Policies/System 相关键值设置: U ...

  9. Java 类中各成分加载顺序 和 内存中的存放位置

    参加一个笔试,有一个关于类的静态代码块.构造代码块.构造函数的执行顺序的问题.不太清楚,网上百度了一下.在这里记录一下. 一.什么时候会加载类?使用到类中的内容时加载:有三种情况1.创建对象:new ...

随机推荐

  1. 如何使用RobotFramework编写好的测试用例

    如何使用Robot Framework编写优秀的测试用例 概述 命名 测试套件命名 测试用例命名 关键字命名 setup和teardown的命名 文档 测试套件文档 测试用例文档 用户关键字文档 测试 ...

  2. 吐血大奉献，打造cnblogs最新最火辣的css3模板（IE9以下请勿入内） -- 第一版

    一直自己都想给自己的博客打造一个独一无二的皮肤,但是一直没有强劲的动力去完成这件事情.后来凭借着工作上面的需求(涉及到css3),就把自己的博客当成一个最好的试验场地.从而产生了你现在所看到的这个模板 ...

  3. 简述 OAuth 2.0 的运作流程

    本文将以用户使用 github 登录网站留言为例,简述 OAuth 2.0 的运作流程. 假如我有一个网站,你是我网站上的访客,看了文章想留言表示「朕已阅」,留言时发现有这个网站的帐号才能够留言,此时 ...

  4. iOS开发系列--Swift进阶

    概述 上一篇文章<iOS开发系列--Swift语言>中对Swift的语法特点以及它和C.ObjC等其他语言的用法区别进行了介绍.当然,这只是Swift的入门基础,但是仅仅了解这些对于使用S ...

  5. php缓冲区详解

    什么是缓冲区(buffer)? 简单而言,缓冲区的作用就是,把输入或者输出的内容先放进内存,而不显示或者读取.至于为什么要有缓冲区,这是一个很广泛的问题,如果有兴趣,可以在网山找下资料. 其实缓冲区最 ...

  6. 我为NET狂群福利：逆天常用的一些谷歌浏览器插件

    逆天书库:http://www.cnblogs.com/dunitian/p/5734677.html 常用工具:http://www.cnblogs.com/dunitian/p/5640147.h ...

  7. Android浮层点击穿透问题

    最近做微信公众号开发的时候遇到一个问题,上线后发现此问题后检查代码没有发现问题,无奈只能回滚到上一个版本. 问题是这样的:页面一个选择的浮层,在浮层点击确定后,下面的页面会自动提交 在测试环境上无法重 ...

  8. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  9. .NET Core的文件系统[4]：由EmbeddedFileProvider构建的内嵌（资源）文件系统

    一个物理文件可以直接作为资源内嵌到编译生成的程序集中.借助于EmbeddedFileProvider,我们可以统一的编程方式来读取内嵌于某个程序集中的资源文件,不过在这之前我们必须知道如何将一个项目文 ...

  10. PPT转化成Image、PPTX、XPS、EMF

    最近工作经常用到演示文稿,接触到了一款不错的免费软件—Free Spire.Presentation.使用之后发现这款软件非常轻巧,功能还挺齐全.这款软件的转化功能也是非常不错的,平时遇到的各种转换难 ...