行间提取事件第一种方法：

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学习笔记】提取行间事件的更多相关文章

  1. Js学习笔记一(鼠标事件.....)

    1.encodeURI与decodeURI()转化url为有效的url(能被识别) Url="http://news.baidu.com/p.php?id='测试'&姓名=hkui& ...

  2. js学习笔记27----键盘事件

    键盘事件主要有2个: onkeydown : 键盘按下时触发,如果按下不抬起,那么会连续触发.   onkeyup : 键盘弹起时触发   不是所有元素都能接收键盘事件,只有能够响应用户输入的元素,换 ...

  3. js学习笔记24----焦点事件

    事件: onfous : 元素获取焦点时触发事件 onblur : 元素失去焦点时触发事件 方法: obj.focus(); 可指定元素设置焦点 obj.blur(); 取消指定元素的焦点 obj.s ...

  4. [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  5. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  6. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  7. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  8. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  9. 【转】Backbone.js学习笔记（二）细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  10. 系列文章--Node.js学习笔记系列

    Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...

随机推荐

  1. 设计与实现的简单和经常使用的权限系统(五岁以下儿童):不维护节点的深度level，手工计算level，树形结构

     以这种方式.和第三的类似介绍.所不同的是.深度未在数据库中存储节点level,添加和更改时间,护.而是,在程序中,实时去计算的. 至于后面的,依照level升序排序,再迭代全部的节点构造树,与第三篇 ...

  2. 负载均衡DNS和反向代理优缺点

    负载均衡 (Load Balancing) 建立在现有网络结构之上,它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽.增加吞吐量.加强网络数据处理能力.提高网络的灵活性和可用性. 负载均衡(又 ...

  3. js获取非行间样式或定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  4. 如何优雅的研究 RGSS3 （七） 加入LOGO屏幕

    对于游戏 LOGO 屏幕. 首先设计 LOGO Scene类.我们知道,现场类 Scene_Base 子类. 让我们回顾一下现场的作品. 首先运行开始处理.其次是开始治疗.然后停止更新屏幕,最后,治疗 ...

  5. CQRS架构

    CQRS架构 命令查询的责任分离Command Query Responsibility Segregation (简称CQRS)模式是一种架构体系模式,能够使改变模型的状态的命令和模型状态的查询实现 ...

  6. 应用CSS的page-break-after属性 实现WEB页面强制分页打印

    虽然dedecms.com向大家介绍了很多CSS属性的相关知识,但有些非常冷门的属性还是有所欠缺.在B/S程序中,对打印页面的控制,CSS相对比较弱,例如: 自动分页, 就基本没啥实际用途.我们通常需 ...

  7. maven 启蒙

    Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具.为了替代ANT的Apache开源项目.现在的项目越来越大.ANT已经不适用了. 1.部署m ...

  8. 重温HTML的基础

    新年新气象,新的一年要有自己的学习计划与工作计划.希望大家能够共享. 经过一段时间,我想重新复习与学习一下HTML的基础,我呢打算整理一下W3C里面的知识,也许对某些人没有任何作用,但是对我来说这是我 ...

  9. sqlite3结合ios开发

    简介:         SQLite是遵守ACID的关系数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp创建的公有领域项目. 不像常见的客户端/服务器结构范例,SQLite引 ...

  10. 使用TotoriseSVN的分支/标签功能

    使用TotoriseSVN的分支/标签功能 http://blog.sina.com.cn/s/blog_5383588c0100o1oo.html 原来在新建一个项目文件夹后,再把Trunk.Bra ...