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

常用事件：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. php加速缓存Xcache的安装与配置

    安装环境:centos 6.5 32bit  php5.5.7 nginx1.6.0 [root@localhost opt]# wget http://xcache.lighttpd.net/pub ...

  2. linux下passwd命令设置修改用户密码

    1.passwd 简单说明: 我们已经学会如何添加用户了,所以我们还要学习设置或修改用户的密码:passwd命令的用法也很多,我们只选如下的几个参数加以说明:想了解更多,请参考man passwd或p ...

  3. [liu yanling]测试流程

    测试流程 1.制定测试计划 2.编辑测试用例 3.执行测试用例 4.发现并提交BUG 5.开发组修正BUG 6.对已修正BUG进行返测 7.修正完成的BUG将状态置为已关闭,未正确修正的BUG重新激活

  4. 免费的SqlServer优化辅助工具：SqlOptimize （原创）

    主要用于收集客户服务器的数据库运行情况,导出-导入到本地分析. 本工具不会修改你的数据和结构,只会读取相关数据. 1)工具软件下载 http://files.cnblogs.com/files/dud ...

  5. 浅谈PetShop之使用存储过程与PLSQL批量处理(附案例)

    1       大概思路 备注:黄色为影响参数 2       PetShop4的经典数据库连接代码回顾 PetShop4有3个函数,具体有: ExecuteReader:可以读一个表的记录,只能读不 ...

  6. 【原】Comparator和Comparable的联系与区别

    1.知识点了解 Comparator和Comparable都是用用来实现集合中元素的比较.排序的,所以,经常在集合外定义Comparator接口的方法和集合内实现Comparable接口的方法中实现排 ...

  7. bzoj 3926 [Zjoi2015]诸神眷顾的幻想乡（SAM）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3926   [题意]   给定一棵树,每个节点都有相应的颜色,且保证叶子数不超过20,问 ...

  8. 获取所有组合算法、获取全排列算法（java）

    转载声明:原文转自:http://www.cnblogs.com/xiezie/p/5574516.html 受到ACM1015的影响,个人感觉,有必要对统计学上的 全组合和全排列 进行一个简单的总结 ...

  9. HDOJ-ACM1005(JAVA)

    转载声明:原文转自http://www.cnblogs.com/xiezie/p/5502918.html JAVA语言实现: 拿到题目第一反应是简单地实现递归: import java.util.* ...

  10. CF402E Strictly Positive Matrix 传递闭包用强连通分量判断

    题目链接:http://codeforces.com/problemset/problem/402/E /**算法分析: 这道题考察了图论基本知识,就是传递闭包,可以构图用强联通分量来判断 */ #i ...