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

常用事件：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. Azure Backup 入门

    Viswanath Tata 云 + Enterprise项目经理 Azure Backup是一款允许客户将数据备份到 Azure的强大工具.请参阅这篇文章,快速了解 Azure Backup.我 ...

  2. c# process 输入输出

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. 惊人事实 z

  4. 数据结构：二级指针与Stack的数组实现

    [简介] Stack,栈结构,即传统的LIFO,后进先出,常用的实现方法有数组法和链表法两种.如果看过我上一篇文章<数据结构:二级指针与不含表头的单链表>,一定会看到其中的关键在于,利用v ...

  5. We're Hiring A Software Tester

    测试人员的基本修养: 代码编写,不可或缺 乔布斯说:Design is not just what it looks like and feel like,design is how it works ...

  6. Mathtype常用快捷键

    1. 打开/关闭MathType窗口 alt+ctrl+q:插入inline公式 可在word中设置快捷键,直接调用公式编辑器,工具--〉自定义--〉键盘,选择 插入--insertequation ...

  7. LittleTools之批量替换工具

    身为程序员,有很多事情都可以交给机器来做,这样可以提高工作效率. 在此先写个批量替换工具,用来将某些对象统一替换为另一对象. 比方说场景中摆了一堆树,位置.比例.旋转都已经调好了,但是对树的样式不太满 ...

  8. [九度OJ]1008.最短路径问题

    原题链接:http://ac.jobdu.com/problem.php?pid=1008 题目描述: 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离 ...

  9. 关于Eclispse连接Mysql的Jdbc

    1.在Eclipse中新建Java工程 2.引入JDBC库(在bulid path 的extenrnal里) 3. 1)导入sql包(import java.sql.*) 2)加载(注册)mysql ...

  10. Ant执行一个含有main方法的class文件

    目前需要使用ant来执行一个含有main方法的class文件,并且需要通过命令来行传两个参数(start和end)到main方法. <target name="gsp" de ...