js知识

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

常用事件：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知识的更多相关文章

【Todo】React & Nodejs学习 &事件驱动，非阻塞IO & JS知识栈：Node为主，JQuery为辅，Bootstrap & React为辅辅，其他如Angular了解用途即可
JS知识栈:Node为主,JQuery为辅,Bootstrap & React为辅辅,其他如Angular了解用途即可今天在学习ReactJS和NodeJS,看到关于ReactJS的这篇文章 ...
js知识梳理6:关于函数的要点梳理(2)(作用域链和闭包)
写在前面注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...
js知识梳理5：关于函数的要点梳理(1)
写在前面注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...
js知识梳理4.继承的模式探究
写在前面注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...
js知识梳理3：创建对象的模式探究
写在前面注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...
移动端js知识总结
1.如果使用jquery绑定touch事件的话,获取touchstart,touchmove的触点坐标用 e.originalEvent.targetTouches[0].pageX, 获取touch ...
js知识体系的梳理一
今天简单的总结了js的一些东西,梳理下整个体系,每一次的总结都会有不同的收获:js总结一一.[获取元素]: 1.通过ID: var oBtn=document.getElementById('btn1 ...
发发关于JavaScript的感慨，随手记几个js知识碎片
最近一段时间写了很多JavaScript和jquery代码,越来越感觉js基础不牢固,写一句查半天,有时间肯定要系统的学一下. 不说了,先记一下最近学到的点东西,省的以后没时间系统学js还要再来查. ...
前端必会的js知识总结整理
1.晨曦. 2.js是一门什么样的语言及特点? js是一种基于对象和事件驱动的并具有相对安全性的客户端脚本语言.也是一种广泛用于web客户端开发的脚本语言,常用来给html网页添加动态 ...
js知识简单归纳
js简单的归纳基本类型 number,string,boolean,null,undefined 组合类型一种对象类型: object 数组函数对象正则关于函数作用域闭包构造函数原 ...

随机推荐

关于ListView的 addHeaderView(...) 方法
在代码中使用 listView .addHeaderView(...) 方法可以在ListView组件上方添加上其他组件,并且连结在一起像是一个新组件.如果多次使用 .addHeaderView(.. ...
【转】Compile FFmpeg on CentOS 6.x
This guide is based on a minimal CentOS installation and will install FFmpeg with several external e ...
FP树（附）
Apriori算法和FPTree算法都是数据挖掘中的关联规则挖掘算法,处理的都是最简单的单层单维布尔关联规则. 转自http://blog.csdn.net/sealyao/article/detai ...
如何从Windows Phone 生成PDF文档
我需要从我的Windows Phone应用程序生成PDF. 遗憾的是没有标准的免费的PDF生成库在Windows Phone上运行. 我不得不自己生成PDF,通过直接写入到文件格式. 这竟然是真的很容 ...
Esper系列(五)Order by、Limit、构建事件流、Updating an Insert Stream
Order by 与SQL语法类似类似,默认为升序排列; 注意: 如果order by的子句中出现了聚合函数,那么该聚合函数必须出现在select的子句中. 出现在select中的expression ...
Docker系列(一)安装
操作系统版本:Centos7 Docker版本:1.8 设置安装源 1 cat > /etc/yum.repos.d/docker.repo << -EOF 2 [dockerr ...
HW2.13
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
ADODB.Connection 错误 '800a0e7a' 未找到提供程序该程序可能未正确安装
今天调程序的时候发现的,错误提示如下: ADODB.Connection 错误 '800a0e7a' 未找到提供程序.该程序可能未正确安装. /conn.asp,行 6 因为系统是64位的win7或w ...
phpstorm映射远程项目
项目要设置为default,否则自动更新会失败:type要选正确 development path和web path都要设置 options选项中选ctrl+s自动保存,且下方没告警
android游戏物理引擎开发——粒子系统（三）
生病了,医院躺了几天,动了个小手术,动手术之后的几天在医院看了几本<大众软件>,又想到自己必须得买台台式机了,这破笔记本实在用不下去了,然后开始喜欢看些硬件的东西,等我熟悉了以后,写几个硬 ...

js知识

js知识的更多相关文章

随机推荐

热门专题