1、点击按钮连续弹窗5次

<div class="noe">
<div class="noe1" onClick="n()">循环5次弹窗</div>
</div> function n(){
var i= 0;
while(i<=5){
i++;
alert("这是第"+i+"次弹出");
}
}

2、批量修改样式(用for,固定元素个数)

<div class="noe">
<div class="noe1" onClick="n()">循环5次弹窗</div>
</div>
<div class="noe">
<div class="noe1" onClick="nn()">批量修改样式</div>
<div class="nn"></div>
<div class="nn"></div>
<div class="nn"></div>
</div> function nn(){
var nn = document.getElementsByClassName("nn"); //找到nn集合
for(var i = 0;i<=nn.length;i++){ //在循环里挨个拿出设置样式
nn[i].style.backgroundColor= 'yellow';
}
}

 3、鼠标经过变换内容

<div class="zai">
<div class="jj">提交后在这里显示:</div>
</div>
<div class="zai1" onMouseOver="z(this)">栏目1</div>
<div class="zai1" onMouseOver="z(this)">栏目2</div>
<div class="zai1" onMouseOver="z(this)">栏目3</div>
<div class="zai1" onMouseOver="z(this)">栏目4</div>
<div class="za" ></div> function z(z){
var za = document.getElementsByClassName("za")[];
za.innerHTML=""; //等于每次循环把值都清空一次
for(var i = ;i<=;i++){
za.innerHTML += z.innerHTML+"的内容<br>"; }
}

4、全选、不选、反选

 <div class="noe">
<input type="checkbox" name="" value="" id="" class="x">
<input type="checkbox" name="" value="" id="" class="x">
<input type="checkbox" name="" value="" id="" class="x">
<input type="checkbox" name="" value="" id="" class="x">
<input type="checkbox" name="" value="" id="" class="x">
<br>
<input type="button" name="" value="全选" id="" onClick="o()" class="e">
<input type="button" name="" value="反选" id="" class="e" onClick="ee()">
<input type="button" name="" value="不选" id="" onClick="op()" class="e">
</div> for(var i = 0;i<x.length;i++){
if(x[i].checked ){ //设置反选
x[i].checked = false;
}else{
x[i].checked = true;
}
}
}
function o(){ //正选
var x = document.getElementsByClassName("x");
for(var i = 0;i<=x.length;i++){
x[i].checked = 'checked';
}
}
function op(){ //不选
var x = document.getElementsByClassName("x");
for(var i = 0;i<=x.length;i++){
x[i].checked = false;
}
}

5、

<div class="zai">
<input type="text" name="" id="inn" value="">
<div class="zai1" onClick="ti()">提交</div>
</div>

<div class="zai">
<div id="ti1">提交后显示在这里:</div>
</div>

function ti(){
//找到input的集合,再找到ti1的集合,ti1这个div的innerHTML = 汉字+inn.value的值
var inn = document.getElementById("inn");
var ti1 = document.getElementById("ti1");
ti1.innerHTML = '提交后在这里显示:'+inn.value; }

6、

<div class="zai">
<input type="text" name="" id="" value="" class="innn">
<div id="p" >+</div>
<input type="text" name="" id="" value="" class="innn">
<div class="zai1" onClick="jia()">提交</div>
</div>
<div class="zai">
<div class="j">提交后在这里显示:</div>
</div> function jia(){
var inn1 = document.getElementsByClassName("innn")[0];
var inn2 = document.getElementsByClassName("innn")[1];
var j = document.getElementsByClassName("j")[0];
j.innerHTML = '提交后在这里显示'+inn1.value+inn2.value; }

  

  

JS事件练习题的更多相关文章

  1. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  2. 什么是JS事件冒泡?

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  3. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

  4. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  5. js 事件大全

    Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...

  6. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  7. JS事件

    JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的 ...

  8. 原生js事件和jquery事件的执行顺序问题

    场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...

  9. 特殊js事件

    1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQ ...

随机推荐

  1. 【Linux】 linux中的进程信息相关的一些内容

    _ linux进程信息 ■ top top命令用于动态地查看系统的进程和其他一些资源的信息.开启top的时候可以加上-t <sec>来设置top更新的频率高低.进入top界面之后,可以输入 ...

  2. Java多线程:乐观锁、悲观锁、自旋锁

    悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁.传统的关系型数据 ...

  3. java性能调优---------------------JVM调优方案

    JVM的调优的主要过程有: 1.确定堆内存大小(-Xmx.-Xms) 2.合理分配新生代和老年代(-XX:NewRatio.-Xmn.-XX:SurvivorRatio) 3.确定永久区大小(-XX: ...

  4. (转)关于 awk 的 pattern(模式)

    本文转自chinaunix http://bbs.chinaunix.net/thread-4246512-1-1.html   作者reyleon 我们知道, awk程序由一系列 pattern 以 ...

  5. css3控制div上下跳动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. SSDB安装配置 ERROR! autoconf required! install autoconf first

    SSDB简介 SSDB是一个C/C++语言开发的高性能开源NoSQL数据库服务器,支持Key-value, Keyhashmap, Key-zset(sorted set) 等数据结构,十分适合存储数 ...

  7. 云计算之路-阿里云上-容器难容:容器服务故障以及自建 docker swarm 集群故障

    3月21日,由于使用阿里云服务器自建 docker swarm 集群的不稳定,我们将自建 docker swarm 集群上的所有应用切换阿里云容器服务 swarm 版(非swarm mode). 3月 ...

  8. 【R语言系列】作图入门示例一

    假设有如下数据,我们使用plot函数作图 月龄 体重 月龄 体重  1 4.4 9 7.3 3 5.3 3 6.0 5 7.2 9 10.4 2 5.2 12 10.2 11 8.5 3 6.1 R语 ...

  9. 20162308 实验一《Java开发环境的熟悉》实验报告

    a 20162308 实验一<Java开发环境的熟悉>实验报告 实验内容 使用JDK编译.运行简单的Java程序. 使用IDEA 编辑.编译.运行.调试Java程序. 实验要求 没有Lin ...

  10. 冲刺NO.9

    Alpha冲刺第九天 站立式会议 项目进展 项目已完成模块的模块测试工作开始进行.如学生基本信息模块和学生信用信息模块. 问题困难 框架的掌握存在一定的问题,导致项目的执行速度变慢.其他课程的作业占据 ...