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. linux之-mysql数据库2

    1.新建数据库 语句格式为 CREATE DATABASE <数据库名字>;,(注意不要漏掉分号 ;),前面的 CREATE DATABASE 也可以使用小写,具体命令为: 2.连接数据库 ...

  2. （转）使用OpenGL显示图像（五）添加移动

    添加移动 编写:jdneo - 原文:http://developer.android.com/training/graphics/opengl/motion.html 转:http://hukai. ...

  3. 6个实例详解如何把if-else代码重构成高质量代码

    本文提纲: 为什么我们写的代码都是if-else?这样的代码有什么缺点?是否有优化的方法?如何重构?异常逻辑处理型重构方法状态处理型重构方法为什么我们写的代码都是if-else?程序员想必都经历过这样 ...

  4. JQuery Mobile 图片布局

    JQuery Mobile 图片布局 1.实现效果

  5. vue入门例子

    vue入门例子 1.声明示渲染        {{message}} 2.绑定事件 v-bind 3.控制切换一个程序是否显示        v-if 4.渲染循环                  ...

  6. 点读系列《Jenkins用户文档》

    Jenkins用户手册官网地址:点击打开 开源 CI&CD 软件 自动化各种任务, build test deploy 支持各种运行方式 Jenkins入门 入门指南 需要java和docke ...

  7. camunda授权的一些简单操作

    /** * 授权操作 */public class ZccAuthorizationService { AuthorizationService authorizationService; @Befo ...

  8. Scrapy框架: 第一个程序

    首先创建项目: scrappy start project maitian 第二步: 明确要抓取的字段items.py import scrapy class MaitianItem(scrapy.I ...

  9. helm-mode打开文件支持中文搜索

    helm-mode打开文件支持中文搜索 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #83949 ...

  10. SpringCloud-技术专区-Zuul-使用指南

    Zuul作为微服务系统的网关组件,用于构建边界服务,致力于动态路由.过滤.监控.弹性伸缩和安全. Zuul功能 认证 压力测试 金丝雀测试 动态路由 负载削减 安全 静态响应处理 主动/主动交换管理 ...