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

常用事件：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. Codeigniter夸应用调用model

    Thinkphp里面的model都是可以跨应用调用,ci本身没有实现这个方法.可是稍微修改下,比Thinkphp用起来更容易调用.找到Loader.php文件的地址/system/core/Loade ...

  2. easyui datagrid隔行变色

    属性striped设置为true,即striped:true. 如果想更改颜色,可以更改easyui.css中的.datagrid-row-alt样式.

  3. 从修复 testerhome(rubychina)网站的一个 bug 学习 ruby&rails on ruby

    前言 testerhome: http://testerhome.com/topics/1480 对于一个差点脱离前沿技术人,想要学习ruby,就意味着要放弃熟悉的操作系统windows,熟悉的ide ...

  4. FZU 2122 又见LKity

    直接模拟或者KMP #include <iostream> #include <string.h> #include <stdio.h> #include < ...

  5. Codeforces Round #311 (Div. 2) D - Vitaly and Cycle(二分图染色应用)

    http://www.cnblogs.com/wenruo/p/4959509.html 给一个图(不一定是连通图,无重边和自环),求练成一个长度为奇数的环最小需要加几条边,和加最少边的方案数. 很容 ...

  6. Scala的安装（本地）

    前言 Scala版本的选法: 目前,Kafka库和JDBC并不支持Scala2.11的编译,以及结合大多数人的使用请来看.      scala2.10.*为主,在这,scala2.10.4版本,强烈 ...

  7. rcp（插件开发）The type XXX cannot be resolved. It is indirectly referenced from required .class files解决办法

    如果你在使用插件开发时遇到这个问题: The type org.eclipse.core.resources.IFile cannot be resolved. It is indirectly re ...

  8. Oracle数据库启动流程

    1.oracle也可以通过命令的方式启动, (1)oracle启动流程-windows下 1) lsnrctl start (启动监听) 2)oradim -startup -sid 数据库实例名 2 ...

  9. easyui datagrid用formtater的问题

    当value是一个字符串是直接使用value会提示value没有定义,这时需要转换下value,用""+value来替换就可以了.

  10. opencv数据结构-MAT结构详解

    1.定义 OpenCV中的C结构体有 CvMat 和 CvMatND,但后续的应用中指出 CvMat 和 CvMatND 弃用了,在C++封装中用 Mat 代替,另外旧版还有一个 IplImage,同 ...