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. elementUI中input输入框,强制输入数字,并限制输入长度

    <el-input v-model="item.userScore" onkeyup="this.value=this.value.replace(/[^\d.]/ ...

  2. C++ STL rope 可持久化平衡树 (可持久化数组)

    官方文档好像 GG 了. rope 不属于标准 STL,属于扩展 STL,来自 pb_ds 库 (Policy-Based Data Structures). 基本操作: #include <e ...

  3. http常见状态码及其解析

    HTTP状态码常见状态码及其解析 状态码 状态码英文名称 中文描述 100 Continue 继续.客户端应继续其请求 101 Switching Protocols 切换协议.服务器根据客户端的请求 ...

  4. Windows7下移植Qt4.8.4项目到QT5.2上时遇到的一些问题

        最近在Windows7下将Qt4.8.4+MSVC2008的项目移植到QT5.2下时,遇到了一些小问题: 问题一:错误:C1083: 无法打开包括文件:"QApplication&q ...

  5. Python 字符串常用判断函数

    判断字符串常用函数: S代表某字符串 S.isalnum()  所有字符都是数字或字母,为真返回Ture,否则返回False S.isalha()     所有字符都是字母,为真返回Ture,否则返回 ...

  6. 36-python基础-python3-字典与列表的区别

    (1)不像列表,字典中的表项是不排序的.名为 spam 的列表中,第一个表项是 spam[0].但字典中没有“第一个”表项. (2)确定两个列表是否相同时,表项的顺序必须相同,但在字典确定两个字典是否 ...

  7. Javascript高级程序设计--读书笔记之面向对象（二）

    前面讲了面向对象的封装,这章我们就来说一说继承 1.原型链 实现原型链有一种基本模式,其代码大概如下 <script> function SuperType(){ this.propert ...

  8. Light项目---实现后端接口时遇见的一些问题

    ImproperlyConfigured: WSGI application 'lightapi.wsgi.application' could not be loaded; 在moddleware中 ...

  9. 【转载】vue-cli搭建的环境，用nginx做代理服务器，访问时显示：Invalid Host header

    来源:https://blog.csdn.net/Cookysurongbin/article/details/86077241 vue-cli搭建的环境,用nginx做代理服务器,访问时显示:Inv ...

  10. teb教程10 teb questions

    http://wiki.ros.org/teb_local_planner/Tutorials/Frequently%20Asked%20Questions