初探js特效魅力04

我们在进入到公司里面工作的时候，做一个同一个项目，经常是大家分工合作，当我们写css时，一般不写在行间，因为这样会被误操作，也就是被乱删了都不知道，这样的后果是很难检查的 ，因为一个项目做下来，到最后，代码一大把，看着都头疼，

接下来就是教大家如何提取行间样式并作为函数调用，如下

<!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>js特效</title>
<!-- <link id="link1" rel="stylesheet" type="text/css" href="css1.css" />-->
<script>
 window.onload=function(){
  var oDiv=document.getElementById("btn1");  
  oDiv.onclick=function(){
   alert('a'); 
  }
 }
 </script>
</head>

</style>
<body>
    <input type="button" value="按钮" id="btn1"/> 
</body>
</html>

向上面一样，样式和js我们一般不写在标签里面，通常写在head里面，但是大家要记住，js是一行行执行的，像我们这个方法，一定要在前面加上window.onload，意思就是页面加载完执行这个方法，如果没有window.onload,页面就会报错，因为它找不到按钮的id。

利用for循环、getElementsByTagName的方法让复选框全选、反选、不选功能

<!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>js特效</title>
<!-- <link id="link1" rel="stylesheet" type="text/css" href="css1.css" />-->

<script>
 window.onload=function(){
  var btn1=document.getElementById("btn1");
  var btn2=document.getElementById("btn2");
  var btn3=document.getElementById("btn3");
  var oDiv=document.getElementById("div1");
  var ach=oDiv.getElementsByTagName("input");
  btn1.onclick=function(){
   for(var i=0;i<ach.length;i++){
    ach[i].checked=true;
   }
  }
  btn2.onclick=function(){
   for(var i=0;i<ach.length;i++){
    ach[i].checked=false;
   } 
  }
  btn3.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>

</style>
<body>
 <input type="button" value="全选" id="btn1"/><br />
    <input type="button" value="不选" id="btn2"/><br />
    <input type="button" value="反选" id="btn3"/><br />
    <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特效魅力05

<一>初探js特效魅力之全选不选反选04的更多相关文章

  1. <一>初探js特效魅力之选项卡05

    初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  2. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  3. js实现checkbox的全选和全不选功能

    html代码: <form name="form1" method="post" action="manage.php?act=sub" ...

  4. JS中表格的全选和删除要注意的问题

    在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...

  5. asp.net中Repeater结合js实现checkbox的全选/全不选

    前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...

  6. 原生JS实现购物车全选多选按钮功能

    对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...

  7. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  8. JS的魅力

    一.初探JavaScript魅力 基本知识: JavaScript是什么 网页特效原理 -JavaScript就是修改样式 编写JS流程 - 布局:HTML + CSS - 属性:确定修改哪些属性 - ...

  9. js特效 15个小demo

    js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...

随机推荐

  1. JavaScript - 测试 jQuery

    测试 JavaScript 框架库 - jQuery 引用 jQuery 如需测试 JavaScript 库,您需要在网页中引用它. 为了引用某个库,请使用 <script> 标签,其 s ...

  2. spring data jpa Specification 例子

    /** * 封装查询条件 * * @param baseQueryDTO * @return */ private Specification<ActivityBase> getSpeci ...

  3. NOIP2012 借教室 Splay初探

    终于把区间操作的Splay搞明白了…… Splay的大致框架是这样的: [代码中的Zig-Zig和Zig-Zag操作其实是可以优化的,实际只需要3次passDown和3次update] templat ...

  4. 【BZOJ2281】【博弈论+DP】 [Sdoi2011]黑白棋

    Description 黑白棋(game) [问题描述] 小A和小B又想到了一个新的游戏. 这个游戏是在一个1*n的棋盘上进行的,棋盘上有k个棋子,一半是黑色,一半是白色. 最左边是白色棋子,最右边是 ...

  5. 【BZOJ1861】【splay】Book 书架

    Description 小 T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书的时候,每次取出一本书,看完后放回书柜然后再拿 ...

  6. php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)

    网上有很多php文件上传的类,文件上传处理是php的一个特色(至少手册上是将此作为php特点来展示的,个人认为php在数组方面的优异功能更有特 色),学php的人都知道文件上传怎么做,但很多人在编程中 ...

  7. python 装饰器、生成器、迭代器

    # 装饰器'''由高阶函数(把一个函数名当作实参传递给另一个函数,返回值中包含函数名)和嵌套函数(函数中嵌套函数)组成功能:在不更改原函数的代码和调用方式的前提下添加新的功能装饰器本身就是一个函数.使 ...

  8. MySQL账号授权操作

    Mysql权限控制 - 允许用户远程连接 设置mysql root密码: mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = P ...

  9. for循环，列表和格式化输出

    一:for 循环 1.          简单的说如果让你输出1到100之间的整数,用while该怎么实现呢? i= : print(i) i+= 看着是不是只有4行,但是有没有更加简单的办法,不妨我 ...

  10. 运行在TQ2440开发板上以及X86平台上的linux内核编译

    一.运行在TQ2440开发板上的linux内核编译 1.获取源码并解压 直接使用天嵌移植好的“linux-2.6.30.4_20100531.tar.bz2”源码包. 解压(天嵌默认解压到/opt/E ...