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. H5 调用 手机设备的功能

    1.调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效) <a href=" ...

  2. [CSP-S模拟测试]:时间机器(贪心+set)

    题目描述 作为一名天才科学家,$Kurisu$已经设计出了时间机器的构造. 根据$Kurisu$的构想,时间机器中有$n$种需要放置电阻的节点,第$i$种节点有$s_i$个,其电压$U$的变动范围是$ ...

  3. eclipse 中的.classpath和.project文件的具体作用(转)

    转载博客:http://www.cnblogs.com/panjun-Donet/archive/2010/08/25/1807780.html .project是项目文件,项目的结构都在其中定义,比 ...

  4. 架构师技能树skill-map

    # 架构师技能树 ## 系统架构能力 ### 基本理论- 扩展性设计- 可用性设计- 可靠性设计- 一致性设计- 负载均衡设计- 过载保护设计 ### 协议设计- 二进制协议- 文本协议 ### 接入 ...

  5. Java异常处理教程

    异常是在没有定义正常执行路径时在Java程序的执行期间可能出现的条件.Java通过将执行操作的代码与处理错误的代码分离来处理错误. 当发生异常时,Java会创建一个包含有关异常的所有信息的对象,并将其 ...

  6. Java SAX解析器

    SAX(针对XML的简单API)是基于事件为XML文档的解析器.不像DOM解析器,SAX解析器创建没有解析树. SAX是一个流接口用于XML的,这意味着使用SAX应用接收事件通知有关XML文档被处理的 ...

  7. Linux NIO 系列(04-2) poll

    目录 一.select 和 poll 比较 二.poll API 附1:linux 每个进程IO限制 附2:poll 网络编程 Linux NIO 系列(04-2) poll Netty 系列目录(h ...

  8. mysql 5.7.20 动态sql 传入参数

    drop procedure test; delimiter ;; CREATE procedure test() -- 取动态sql的值 -- 目前只测试出,在 where 后面, 可以用 ?,类似 ...

  9. Window/Linux + Vim + MingW 配置

    Windows: 首先安装Vim , MinGW,假设安装目录为D:\MinGW. 配置环境变量: LIBRARY_PATH=D:\MinGW\lib C_INCLUDE_PATH=D:\MinGW\ ...

  10. react textArea 高度不变化问题

    ref={el =>{ if(el){ el.textareaRef.style.height = el.textareaRef.scrollHeight + 'px'; } } }