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. [CSP-S模拟测试]:斯诺(snow)（数学+前缀和+树状数组）

    题目传送门(内部题37) 输入格式 第一行一个整数$n$,表示区间的长度. 第二行一个长度为$n$的只包含$0,1,2$的字符串,表示给出的序列. 输出格式 一行一个整数,表示革命的区间的数量. 样例 ...

  2. [CSP-S模拟测试]:简单的填数（贪心+模拟）

    题目描述 对于一个长度为$n$,且下标从$1$开始编号的序列$a$,我们定义它是「合法的」,当且仅当它满足以下条件:·$a_1=1$·对于$i\in [1,n),a_i\leqslant a_{i+1 ...

  3. 72、salesforce call RESTful 的方式

    通过Chrome的Postman 来call salesforce的restful api https://login.salesforce.com/services/oauth2/token?gra ...

  4. 67、saleforce的object的describe方法使用

    使用Schema类的describesSObjects方法获取描述sObject结果.使用此方法可以通过sObject类型名称描述一个或者多个sObject描述信息. //sObject types ...

  5. Missing artifact net.sf.json-lib:json-lib:jar:2.4

    Missing artifact net.sf.json-lib:json-lib:jar:2.4 出现上述这种错误就是JAR没有引入进来 这时候发现是因为JDK版本的问题,所以需要在加一句 < ...

  6. numpy的函数使用

    目录 注 help ,帮助 numpy.genfromtxt,导入文件 array,创建数组(1,2维数组) array,创建行列向量 numpy.shape,看numpy数据的行列信息 numpy. ...

  7. 引入iframe， 头部跳转并点亮效果

    <script> /** * @Author: zhangcs * @Date: 2018-09-20 * @cnblogs: https://www.cnblogs.com/zhangc ...

  8. 14.Jmeter聚合报告各项含义

    Aggregate Report 是 JMeter 常用的一个 Listener,中文为“聚合报告” Label:每个 JMeter 的 element(例如 HTTP Request)都有一个 Na ...

  9. Day1 - 认识大数据& 企业需求分析 & 北风网简介

    上午: 介绍: 海量的乱七八糟的数据中快速的计算出某些有用的信息 刑侦视频追踪 云栖大会 大数据分析/挖掘 ==>  python  <== 重点关注 大数据运维   ==> 运服务 ...

  10. 深入理解java虚拟机JVM（上）

    深入理解java虚拟机JVM(上) 链接:https://pan.baidu.com/s/1c6pZjLeMQqc9t-OXvUM66w 提取码:uwak 复制这段内容后打开百度网盘手机App,操作更 ...