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 数组 函数 对象 正则 关于函数 作用域 闭包 构造函数 原 ...
随机推荐
- codeigniter实现ajax分页
<?php /** *417 add 主要是实现ajax分页 **/ class MY_Pagination extends CI_Pagination{ public function __c ...
- Java问题汇集(1)
1.javax.el.PropertyNotFoundException: Property 'Price' not found on type pet.petshop.dto.WareDto 简答: ...
- 找出Java进程中大量消耗CPU
原文:https://github.com/oldratlee/useful-shells useful-shells 把平时有用的手动操作做成脚本,这样可以便捷的使用. show-busy-java ...
- sql server 修改表的默认值， 需要先删除约束条件
---------增加是否发布订单 if not exists(select 1 from syscolumns where name='iIsRelease' and id=OBJECT_ID('M ...
- [Stephen]关于Ext.net fileupload 的兼容性解决问题
在firefox下,利用fileupload上传图片后,通过后端将image 的src路径进行更新,刷新前段界面显示没有问题. 但是在以IE为内核的360中,这种上传后的更新导致一个命名为Action ...
- insertion Sort List (链表的插入排序) leecode java
逻辑简单,代码难写,基础不劳,leecode写注释不能出现中文,太麻烦,我写了大量注释,链表问题最重要的就是你那个指针式干啥的 提交地址https://oj.leetcode.com/problems ...
- 常用oracle查询总结
--查询表空间使用情况 SELECT UPPER(F.TABLESPACE_NAME) "表空间名", D.TOT_GROOTTE_MB "表空间大小(M)", ...
- 算法导论学习-binary search tree
1. 概念: Binary-search tree(BST)是一颗二叉树,每个树上的节点都有<=1个父亲节点,ROOT节点没有父亲节点.同时每个树上的节点都有[0,2]个孩子节点(left ch ...
- POJ2429 - GCD & LCM Inverse(Miller–Rabin+Pollard's rho)
题目大意 给定两个数a,b的GCD和LCM,要求你求出a+b最小的a,b 题解 GCD(a,b)=G GCD(a/G,b/G)=1 LCM(a/G,b/G)=a/G*b/G=a*b/G^2=L/G 这 ...
- Redis学习资料汇总（荐）
Redis学习手册系列: http://www.cnblogs.com/stephen-liu74/category/354125.html Redis详解:sorted sets数据类型及操作-IT ...