初探JavaScript魅力(二)

行为,样式,结构三者分离(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>

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

时间: 2024-10-07 21:36:23

初探JavaScript魅力(二)的相关文章

初探JavaScript(二)——JS如何动态操控HTML

除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次接触JS,没有必要花费过多时间去钻死胡同,先混个脸熟,以后再来拜访也未尝不可嘛.就这样,踉踉跄跄.囫囵吞枣似的已经过五关斩六将,到达第十一章. 书中有几个章节并没有从语法.技术等层面介绍JavaScript,而是站在一个全局的角度,立足编程原则和习惯道破了我们该如何看待和使用这门语言,主要有以下几点: Jav

01 - 初探JavaScript魅力

网页特效原理 用JavaScript修改样式 编写JS的流程 布局:HTML+CSS 属性:确定要修改哪些属性 事件:确定用户做哪些操作(产品设计) 编写JS:在事件中,用JS来修改页面元素的样式 鼠标移入移出效果 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:

初探JavaScript魅力(五)

JS简易日历    innerHTML <title>无标题文档</title> <script> var neirong=['一','二','三','四','五','六','七','八','九','十','十一','十二',]; window.onload=function(){ var tab=document.getElementById('tab'); var ul=tab.getElementsByTagName('ul')[0]; var li=ul.get

初探JavaScript魅力(四)

选项卡 <title>无标题文档</title> <style> #div1 .active{background:#FF0;} #div1 div{width:200px; height:200px; background:#666; border:1px solid #999; display:none;} </style> <script> window.onload=function (){ var oDiv=document.getEl

初探JavaScript魅力(三)

复选框的全选.反选和不选 <title>无标题文档</title> <style> body{background:#666;} </style> <script> window.onload=function (){ var oBtn1=document.getElementById('btn1'); var oBtn2=document.getElementById('btn2'); var oBtn3=document.getElement

L2-初探JavaScript魅力(1)

getElementById 在JavaScript中,不得不说的是查找元素,然后再进行对其操作.getElementById(Id)是我们第一个js兼容问题,也是常用的方法.在火狐浏览器下直接使用ID是会存在问题的,要解决这个问题,就需要引入document.getElementById(Id).document.getElementById在任何浏览器下均可使用. 案例:网页换肤 html <!DOCTYPE html><html lang="en"><

Head first javascript(二)

three basic data types text number boolean 变量 var var_name; 用'='初始化变量 var var_name = ini_value; const (不是所有浏览器都支持const) const const_name = ini_value; nan: not a number 使用一些未初始化的变量进行计算的时候会产生nan,如: const unknown; total = (1 + 2) * unknown; 这里total在计算的时

初探JavaScript(一)——也谈元素节点、属性节点、文本节点

Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本<Javascript Dom编程艺术>,开始慢慢走近JS,与它套近乎,今天是第三天了,从目前来看,比较好相处.就此动笔,是一个回忆复习的过程,权当是自己的一份读书笔记. JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,已经被广泛用于Web应用开发,常用来为网

Ext JS学习第三天 我们所熟悉的javascript(二)

•javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类型,创建函数一共有三种方式.每种方式他们都会有区别,分别为: –function语句形式 –函数直接量形式 –构造函数形式 •函数中的arguments对象 –argument的作用一:接受函数的实际参数 –argument的作用二:用于做递归操作 栗子代码 1 //Function 函数 2 //