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 数组 函数 对象 正则 关于函数 作用域 闭包 构造函数 原 ...
随机推荐
- ubuntu操作系统下载
原文网址:http://www.cyberciti.biz/linux-news/download-ubuntu-14-4-cd-dvd-iso-images/ Download of the day ...
- c#中字符串截取使用的方法
AndyZhang welcome to java world c#中字符串截取使用的方法 String substring(int beginIndex) String substring(int ...
- selenium2.0的初步封装(java版本)
我们都知道, 在本地创建java项目后,引入selenium-java-2.35.0.jar selenium-support-2.35.0.jar junit-4.8.1.jar等等jar包之后 ...
- LittleTools之网格输出为模型
我经常要在Unity中生成一些网格,但是这些网格需要交给美工修改,所以又要将网格输出为模型.于是就有了下面的代码: using UnityEngine; using UnityEditor; usin ...
- 怎样从官网下载Spring的jar包
第一种,简单粗暴直接http://repo.springsource.org/libs-release-local/org/springframework/spring/3.2.4.RELEASE/s ...
- shell脚本应用(4)--常用命令
正则表达式 符号 用法 句号. 匹配任何单个字符 [shell用的是?] 符号^ 跟行首匹配 符号$ 跟行尾匹配 星号* 匹配0或若干个紧靠在星号前的字符[shell是0或若干跟字符] []结构 匹 ...
- ubuntu下git安装及连接github
1.安装 sudo apt-get install git git-core git-gui git-doc git-svn git-cvs gitweb gitk git-email git-dae ...
- Zookeeper集群安装详解
Zookeeper的角色 Zookeeper集群搭建 要求:服务器集群规模不小于3个节点,各服务器之间系统时间要保持一致! 安装步骤 1.在h1节点解压,目录改名. tar –zxvf zooke ...
- HW2.21
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- POJ2478 - Farey Sequence(法雷级数&&欧拉函数)
题目大意 直接看原文吧.... The Farey Sequence Fn for any integer n with n >= 2 is the set of irreducible rat ...