行为=事件+由该事件触发的动作

常用事件：onXxx

onLoad           打开网页事件

onUnLoad       关闭事件

onClick        　单击事件
 
onChange       改变事件

onMouseOver   鼠标悬浮事件

onMouseOut    鼠标移开事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>改变颜色</title>

<style>

#div1{width:200px; height:200px; background:red;}

.box{background:#F39;}

</style>

<script><!--JavaScript-->

function toColor(color){//带参数方法

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

    oDiv.style.background=color;

}

function toValue(name,value){//可选择改变哪一个属性

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

    oDiv.style[name]=value;//特别注意[]的使用，[]可以写属性值，也可以写参数名称

	}

function toGreen(){//无参数方法，只能实现一种功能

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

	oDiv.style.background='green';

	}

function setText(){

	var oTxt=document.getElementById('txt1');

	oTxt.value='显示在文本框中';//当调用此方法时，在文本框中显示。

	oTxt.title='显示成提示信息';//当鼠标移到文本框中，在鼠标上显示信息

	}

function setClass(){

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

	oDiv.className="box";

	}

</script>

</head>

<body>

<input type="button" value="变绿" onclick="toColor('green')"/><!--单击事件调用函数-->

<input type="button" value="变黄" onclick="toColor('yellow')"/>

<input type="button" value="变蓝" onclick="toColor('blue')"/>

<input type="button" value="变高" onclick="toValue('height','400px')"/>

<input type="button" value="变矮" onclick="toValue('height','150px')"/>

<input type="button" value="变宽" onclick="toValue('width','400px')"/>

<input type="button" value="变窄" onclick="toValue('width','150px')"/>

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

<div id="div1" >div1区域</div>

<input type="text" id="txt1" />

<input type="button" value="显示文字"  onclick="setText()"/>

</body>

</html>

选择框

css html javascript 完全分离

window.onLoad 页面加载完成后发生

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>选择框</title>

<script>

window.onload=function (){

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

	var oBtn2=document.getElementById('btn2');

	var oBtn3=document.getElementById('btn3');

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

	var aCh=oDiv.getElementsByTagName('input');

	oBtn1.onclick=function (){

		for(var i=0;i<aCh.length;i++){

		 aCh[i].checked=true;

		 }

		};

	oBtn2.onclick=function (){

		for(var i=0;i<aCh.length;i++){

		 aCh[i].checked=false;

		 }

		};

	oBtn3.onclick=function (){

		for(var i=0;i<aCh.length;i++){

			if(aCh[i].checked==true){

				aCh[i].checked=false;

				}else{

					aCh[i].checked=true;

					}

		 }

		};

	};

</script>

</head>

<body>

<input id="btn1" type="button" value="全选"/>

<input id="btn2" type="button" value="不选"/>

<input id="btn3" type="button" value="反选"/>

<div id="div1">

<input type="checkbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

</div>

</body>

</html>

js知识的更多相关文章

  1. 【Todo】React & Nodejs学习 &事件驱动，非阻塞IO & JS知识栈：Node为主，JQuery为辅，Bootstrap & React为辅辅，其他如Angular了解用途即可

    JS知识栈:Node为主,JQuery为辅,Bootstrap & React为辅辅,其他如Angular了解用途即可 今天在学习ReactJS和NodeJS,看到关于ReactJS的这篇文章 ...

  2. js知识梳理6:关于函数的要点梳理(2)(作用域链和闭包)

    写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...

  3. js知识梳理5：关于函数的要点梳理(1)

    写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...

  4. js知识梳理4.继承的模式探究

    写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...

  5. js知识梳理3：创建对象的模式探究

    写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...

  6. 移动端js知识总结

    1.如果使用jquery绑定touch事件的话,获取touchstart,touchmove的触点坐标用 e.originalEvent.targetTouches[0].pageX, 获取touch ...

  7. js知识体系的梳理一

    今天简单的总结了js的一些东西,梳理下整个体系,每一次的总结都会有不同的收获:js总结一一.[获取元素]: 1.通过ID: var oBtn=document.getElementById('btn1 ...

  8. 发发关于JavaScript的感慨，随手记几个js知识碎片

    最近一段时间写了很多JavaScript和jquery代码,越来越感觉js基础不牢固,写一句查半天,有时间肯定要系统的学一下. 不说了,先记一下最近学到的点东西,省的以后没时间系统学js还要再来查. ...

  9. 前端必会的js知识总结整理

    1.晨曦. 2.js是一门什么样的语言及特点?         js是一种基于对象和事件驱动的并具有相对安全性的客户端脚本语言.也是一种广泛用于web客户端开发的脚本语言,常用来给html网页添加动态 ...

  10. js知识简单归纳

    js简单的归纳 基本类型 number,string,boolean,null,undefined 组合类型 一种对象类型: object 数组 函数 对象 正则 关于函数 作用域 闭包 构造函数 原 ...

随机推荐

  1. Chrome已原生支持“Chrome To Mobile”

    完成PC和手机端Chrome的同gmail帐号绑定后,即可按如下操作进行: 已知在版本“19.0.1084.15”中,这个功能默认未开启,需要进入“chrome://flags/”进行手工启用(早几期 ...

  2. ADO.NET——获取output 和 return值

    程序代码 //存储过程 //Create PROCEDURE MYSQL // @a int, // @b int //AS // return @a + @b //GO SqlConnection ...

  3. [转]ASP.NET MVC 入门11、使用AJAX

    在ASP.NET MVC beta发布之前,M$就宣布支持开源的JS框架jQuery,然后ASP.NET MVC beta发布后,你建立一个ASP.NET MVC beta的项目后,你可以在项目的sc ...

  4. PL/SQL连接查询数据报错时Dynamic Performance Tables not accessible

    一.产生该提示原因plsql dev在用户运行过程中,要收集用户统计信息,但是由于你现在登录的用户没有访问v$session,v$sesstat and v$statname视图的权限,所以不能收集当 ...

  5. 【JS】Intermediate9:jQuery: Other Tricks

    1.DOMContentLoaded Run JavaScript only when the DOM is loaded and ready (but before stylesheets are ...

  6. 初来咋到先试试windows live writer

    据说这个工具用来写博客很好用的,先试试哦... 来说说具体使用方法吧:(摘抄自博客园) 下面首先讲用Windows Live Writer 2012发博客: 一.软件准备: 最新版的是Windows ...

  7. guslterFS

    Installing GlusterFS - a Quick Start Guide Purpose of this document This document is intended to giv ...

  8. linux进程,作业,守护进程,进程间同步

    ps axj命令查看系统中的进程.参数a表示不仅列当前用户的进程,也列出所有其他用户的进程,参数x表示不仅列有控制终端的进程,也列出所有无控制终端的进程,参数j表示列出与作业控制相关的信息: 凡是TP ...

  9. hdoj 1253 胜利大逃亡

    胜利大逃亡 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  10. java多态/重载方法——一个疑难代码引发的讨论

    直接上代码,看这个代码发现自己的基础有多差了.参考 http://www.cnblogs.com/lyp3314/archive/2013/01/26/2877205.html和http://hxra ...