【JS学习笔记】提取行间事件
行间提取事件第一种方法:
function 名字()
{
...
}
oBtn.onclick=名字;
第二种方法:
oBtn.onclick=function ()
{
...
}
其实在JS当中,大部分的函数都是没有名字的,直接使用第二种方法。
window.onload 当页面加载完成后发生,它也是一个函数。
为元素添加事件
事件和其他属性一样,可以用JS添加。
window.onload的意义。
行为、样式、结构三者分离。
数组document.getElementByTagName('');
循环语句
while(条件){
语句
}
<!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>
var i=0;//1.初始化
while(i<5){//2.条件
alert(i);//3.语句
//i=i+1;//4.自增
i++;
}
</script>
</head>
<body>
</body>
</html>
for循环
for(初始化;条件;自增)
{
语句;
}
<!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>
div{
width:200px;
height:200px;
float:left;
border:1px solid black;
margin:10px;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div');
//alert(oDiv.length);
for(var i=0;i<4;i++)
{
oDiv[i].style.background='red';
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
全选、不选、反选
<!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>
</div>
</body>
</html>
【JS学习笔记】提取行间事件的更多相关文章
- Js学习笔记一(鼠标事件.....)
1.encodeURI与decodeURI()转化url为有效的url(能被识别) Url="http://news.baidu.com/p.php?id='测试'&姓名=hkui& ...
- js学习笔记27----键盘事件
键盘事件主要有2个: onkeydown : 键盘按下时触发,如果按下不抬起,那么会连续触发. onkeyup : 键盘弹起时触发 不是所有元素都能接收键盘事件,只有能够响应用户输入的元素,换 ...
- js学习笔记24----焦点事件
事件: onfous : 元素获取焦点时触发事件 onblur : 元素失去焦点时触发事件 方法: obj.focus(); 可指定元素设置焦点 obj.blur(); 取消指定元素的焦点 obj.s ...
- [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 【转】Backbone.js学习笔记(二)细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- 系列文章--Node.js学习笔记系列
Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...
随机推荐
- SQL点滴1—SET QUOTED_IDENTIFIER OFF语句的作用
原文:SQL点滴1-SET QUOTED_IDENTIFIER OFF语句的作用 先看下面几个sql语句 代码 SELECT * FROM [USER] WHERE a= 'netasp' ...
- Android--扫描二维码
http://www.cnblogs.com/keyindex/archive/2011/06/08/2074900.html
- IIS下配置php5.5
首先添加IIS. 控制面板-〉程序-〉打开或关闭Windows功能 1. 勾选"Internet 信息服务" 2. 勾选"IIS 管理控制台" Internet ...
- ef左联三张表案例
users:用户表 Orderss:订单表 U_O:用户和订单的中间表 OrdersEntities1 oe = new OrdersEntities1(); var resul ...
- 一般处理程序装配数据到html页的原理
相应html页面并保存状态输出原理:(有状态请求)请求页面提交给后台,获取值进行处理之后再根据name标记读取原html文件文字将值替换再一并返回给页面:(在response时替换)比如原模板< ...
- Idea安装GO语言插件
https://github.com/go-lang-plugin-org/go-lang-idea-plugin 安装方法写的很清楚,网上也很多我就不细写了,只是有一个问题,下载插件下不下来,懒得找 ...
- c#拷贝
话谈c#拷贝 c#中类型分为值类型和引用类型,值类型对象赋值是本身就是赋的自身的一个副本,而引用类型赋值时则赋的是指向堆上的内存,假如我们不想赋这个地址而想将对象赋过去要怎么做呢?首先要知道拷贝分为浅 ...
- 浅谈DevExpress<六>:为chart创建动态数据源
今天搞点稍微复杂些的东西,在列表中点击不同的行时,图表中显示和其数据关联的图,效果如下:
- Day2:T1搜索 T2最小生成树
T1:广搜+判断矩形 注:如何判断搜的是否为矩形: 在广搜的时候,记录下边界的坐标,然后枚举一遍过去,如果搜到"."就是牛群,否则就是房间 瞥了一眼ccy的做法,据说是floodf ...
- facebook .net sdk 应用
浅谈 facebook .net sdk 应用 今天看了一篇非常好的文章,就放在这里与大家分享一下,顺便也给自己留一份.这段时间一直在学习MVC,另外如果大家有什么好的建议或者学习的地方,也请告知 ...