1、几天接到了一个奇葩的需求，就是在鼠标滚轮滑动的时候，div要悬浮不动，因此这引起了我对于javascript知识的复习

首先从最基础的变量的类型开始

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

    alert(undefined == null);

</script>

</head>

<body>

以上alert会显示true

2、全选，全不选和反选感觉个人真的不是对代码有依赖，感觉如果能不敲代码就真的棒级了，因此将来想回家帮妈妈买货，感觉能

靠嘴挣钱总比，动手强

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

    <br />

    <input type="checkbox" name="items" value="足球">足球

    <input type="checkbox" name="items" value="篮球">篮球

    <input type="checkbox" name="items" value="排球">排球

    <input type="checkbox" name="items" value="谭倩">谭倩

    <br />

    <input type="button" id="checkAll" value="全选">

    <input type="button" id="nocheckAll" value="全不选">

    <input type="button" id="oppositeAll" value="反选">

    <script type="text/javascript">

        var checkButton = document.getElementById("checkAll");

        checkButton.onclick = function() {

            var items = document.getElementsByName("items");

            for (var i = 0; i < items.length; i++) {

                if (!items[i].checked) {

                    items[i].checked = true;

                }

            }

        }

        var nocheckButton = document.getElementById("nocheckAll");

        nocheckButton.onclick = function() {

            var items2 = document.getElementsByName("items");

            for (var i = 0; i < items2.length; i++) {

                if (items2[i].checked) {

                    items2[i].checked = false;

                }

            }

        }

        var oppcheckButton = document.getElementById("oppositeAll");

        oppcheckButton.onclick = function() {

            var items3 = document.getElementsByName("items");

            for (var i = 0; i < items3.length; i++) {

                if (items3[i].checked) {

                    items3[i].checked = false;

                } else {

                    items3[i].checked = true;

                }

            }

        }

    </script>

</body>

</html>

3、点击关上，点击打开

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

div {

    display: none;

}

a {

    background-color: orange;

}

.open {

    display: block;

}

.close {

    display: none;

}

p{

    font: bolder;

    font-family: cursive;

    font-style: italic;

    color: blue;

    background-color: orange;

}

table, tr, td {

    padding: 0px;

}

</style>

<script type="text/javascript">

    function openDiv(a) {

        var currentDiv = a.parentNode.getElementsByTagName("div")[0];

        var divs = document.getElementsByTagName("div");

        for (var i = 0; i < divs.length; i++) {

            if (currentDiv == divs[i]) {

                currentDiv.className = "open";

            } else {

                divs[i].className = "close";

            }

        }

    }

</script>

</head>

<body>

    <table>

        <tr>

            <td><a onclick="openDiv(this)">高中同学</a>

                <div>

                    <p>大勇</p> <p>君宇</p> <p>茂川</p>

                </div></td>

        </tr>

        <tr>

            <td><a onclick="openDiv(this)" >初中同学</a>

                <div>

                    <p>浩晨</p> <p>孟凯妮</p> <p>李倩</p>

                </div></td>

        </tr>

        <tr>

            <td><a onclick="openDiv(this)">小学同学</a>

                <div>

                    <p>想不起来了</p>

                </div></td>

        </tr>

        <tr>

            <td><a onclick="openDiv(this)">大学同学</a>

                <div>

                    <p>王金鉴</p> <p>李俊峰</p> <p>王宝林</p>

                </div></td>

        </tr>

    </table>

</body>

</html>

代码运行的结果如下所示

19、javascript基础知识的更多相关文章

  1. Javascript基础知识总结一

    Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  2. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

  3. 学习javascript基础知识系列第三节 - ()()用法

    总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...

  4. JavaScript 基础知识 - BOM篇

    前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...

  5. (转)JAVA AJAX教程第二章-JAVASCRIPT基础知识

    开篇:JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的.这章我给大家整理了一些JAVASCRIPT的基础知识.常用 ...

  6. JavaScript基础知识梳理，你能回答几道题？

    在学习JavaScript的时候,总是这里学一点,那里学一点,很的很零星,很杂,没有很系统的去学习,感觉好像JavaScript的知识点都了解了,但是真正要说起来,又不知道从何说起! 最深刻的体会就是 ...

  7. JavaScript——基础知识，开始我们的js编程之旅吧！

    JavaScript基础第01天 1. 编程语言 编程语言: 可以通过类似于人类语言的"语言"来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming ...

  8. JavaScript基础知识整理

    只整理基础知识中关键技术,旨在系统性的学习和备忘. 1.在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN ...

  9. Jquery源码中的Javascript基础知识（三）

    这篇主要说一下在源码中jquery对象是怎样设计实现的,下面是相关代码的简化版本: (function( window, undefined ) { // code 定义变量 jQuery = fun ...

  10. JavaScript基础知识（一）

    一.JavaScript基础 1.JavaScript用法: HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 ...

随机推荐

  1. uploadify的使用错误

    在看singwa的视频教程中,学习使用hui-admin模版,在使用uploadify插件上传图片中出现错误. ReferenceError: Can't find variable: $因为使用JQ ...

  2. （转）使用OpenGL ES显示图像

    编写:jdneo - 原文:http://developer.android.com/training/graphics/opengl/index.html 转:http://hukai.me/and ...

  3. linux中常用的命令大全

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  4. SiteMesh 2.X 的使用（网页结构模板）

    SiteMesh是基于Servlet的filter的,即过滤流.它是通过截取reponse,并进行装饰后再交付给客户. 其中涉及到两个名词: 装饰页面(decorator page)和 "被 ...

  5. LINUX搭建网站环境教程

    安装Mysql yum install mysql-server -y 启动Mysql service mysqld restart 此实验使用 mysql 默认账户名和密码,您也可以设置自己的 My ...

  6. shell位置参数和 shift 命令

  7. 【学术篇】CF833B TheBakery 分治dp+主席树

    题目の传送门~ 题目大意: 将\(n\)个蛋糕分成恰好\(k\)份, 求每份中包含的蛋糕的种类数之和的最大值. 这题有两种做法. 第一种是线段树优化dp, 我还没有考虑. 另一种就是分治+主席树. 然 ...

  8. Redis中存储对象区别

    1.最常用的是String结构,key和value都是字符串类型: 2.哈希:比较是用于对对象的操作: 3.List:按照插入数据顺序保存,value是可以重复的,底层是双向链表: 4.集合:是Str ...

  9. Final 可重入锁 安全发布

    无状态对象(既不包含任何域,也不包含任何其他类中域的引用)一定是线程安全的. Final fianl域是不能修改的(但如果final域所引用的对象是可变的,那么这些被引用的对象是可变的) 除非需要可变 ...

  10. Vue学习笔记【15】——Vue实例的生命周期

    生命周期与生命周期钩子 什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期 ...