行为，样式，结构三者分离（javascript, css, html），不要在行间加行为，样式

样式优先级：*<标签<class<ID<行间

style与className，如果先给了style行间样式，再给className不会有效果

<title>无标题文档</title>

<style>

#div1{width:200px;height:200px;border:1px solid #000;}

.box{background:#F00;}

</style>

<script>

function toRed(){

    var oDiv=document.getElementById('div1');

    oDiv.className='box';

    }

function toGreen(){

    var oDiv=document.getElementById('div1');

    oDiv.style.background='green';

    }

</script>

</head>

<body>

<input type="button" value="变红" onclick="toRed()"/>

<input type="button" value="变绿" onclick="toGreen()"/>

<div id="div1">

</div>

</body>

匿名函数   window.onload,在页面加载完成之后发生（执行） 这是btn1已经加载进来了

<title>无标题文档</title>

<script>

window.onload=function (){

var oBtn=document.getElementById('btn1');

oBtn.onclick=function (){

    alert('a');

    };

};

</script>

</head>

<body>

<input id="btn1" type="button" value="按钮"/>

</body>

对比代码如下：

<title>无标题文档</title>

</head>

<body>

<input id="btn1" type="button" value="按钮"/>

<script>

var oBtn=document.getElementById('btn1');

oBtn.onclick=function (){

    alert('a');

    };

</script>

</body>

图片上的代码运行没有预期的效果

初探JavaScript魅力（二）的更多相关文章

  1. 初探JavaScript（二）——JS如何动态操控HTML

    除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...

  2. 【JavaScript从入门到精通】第四课初探JavaScript魅力-04

    第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...

  3. 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  4. 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  5. 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

  6. 01 - 初探JavaScript魅力

    网页特效原理 用JavaScript修改样式 编写JS的流程 布局:HTML+CSS 属性:确定要修改哪些属性 事件:确定用户做哪些操作(产品设计) 编写JS:在事件中,用JS来修改页面元素的样式 鼠 ...

  7. 初探JavaScript魅力（五）

    JS简易日历    innerHTML <title>无标题文档</title> <script> var neirong=['一','二','三','四','五' ...

  8. 初探Javascript魅力(1)

    转自:CSDN--http://blog.csdn.net/cherry_vicent/article/details/42120149 1.javascript是什么   根据用户的一些操作,然后来 ...

  9. 初探JavaScript魅力（四）

    选项卡 <title>无标题文档</title> <style> #div1 .active{background:#FF0;} #div1 div{width:2 ...

随机推荐

  1. CodeForces 697B Barnicle 模拟

    强行模拟 纪念一下…… #include<stdio.h> #include<iostream> #include<algorithm> #include<m ...

  2. amazeui tab 监听当前选项

    $('#contenttab').find('a').on('opened.tabs.amui', function(e) { if(e.target.pathname.indexOf("[ ...

  3. NOIP2011-普及组复赛模拟试题-第一题-NBA总冠军

    题目背景 Background 一年两度的期末考要到来了!!  题目描述 Description   又要到考试了,Ljw决定放松一下,就打开电视,看见了篮球赛,他立即想到了每年的NBA总冠军队伍.由 ...

  4. NOIP2011-普及组复赛-第一题-数字反转

    题目描述 Description 给定一个整数,请将该数各个位上数字反转得到一个新数.新数也应满足整数的常见形式,即除非给定的原数为零,否则反转后得到的新数的最高位数字不应为零(参见样例2).  输入 ...

  5. 数据结构 B树 B+树 B*树 LSM-树

    从B树.B+树.B*树谈到R 树 http://blog.csdn.net/v_JULY_v/article/details/6530142/ B-tree.B+tree和LSM-tree http: ...

  6. python 九九乘法表！小练习

    # 1*1 = 1 # 1*2 = 2 2*2 = 4 # 1*3 = 3 2*3 = 6 3*3 = 9 i = 1 j = 1 for j in range(1,10): for i in ran ...

  7. json处理三部曲之第一曲：利用json-lib-xxx.jar处理json

    json-lib-xxx.jar包必需5个依赖包(实测): ezmorph-xxx.jar commons-lang-xxx.jar commons-beanutils-xxx.jar commons ...

  8. Android获取网络数据进行GZIP解压

    说明:现在很多网站都会在回传数据的时候进行GZIP压缩,我们可以在请求头中申明支持GZIP压缩.可以减轻网络传输压力,Xutils中已经实现. 下面是一个DEMO,便于理解. private void ...

  9. hdu_3804_Query on a tree(树链剖分)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3804 题意:给你一棵树,然后给出树上边的价值,然后给出x,y,问从1到x的边上不超过y的最大值为多少 ...

  10. Git 开发新的功能分支

    软件开发中,总有无穷无尽的新的功能要不断的添加进来.添加一个新功能时,你肯定不希望因为一些实验性质的代码把主分支搞乱了, 所以每添加一个新功能,最好新建一个feature分支,在上面开发,完成后,合并 ...