19、javascript基础知识
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基础知识的更多相关文章
- Javascript基础知识总结一
Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- 学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
- 学习javascript基础知识系列第三节 - ()()用法
总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...
- JavaScript 基础知识 - BOM篇
前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
- (转)JAVA AJAX教程第二章-JAVASCRIPT基础知识
开篇:JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的.这章我给大家整理了一些JAVASCRIPT的基础知识.常用 ...
- JavaScript基础知识梳理，你能回答几道题？
在学习JavaScript的时候,总是这里学一点,那里学一点,很的很零星,很杂,没有很系统的去学习,感觉好像JavaScript的知识点都了解了,但是真正要说起来,又不知道从何说起! 最深刻的体会就是 ...
- JavaScript——基础知识，开始我们的js编程之旅吧！
JavaScript基础第01天 1. 编程语言 编程语言: 可以通过类似于人类语言的"语言"来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming ...
- JavaScript基础知识整理
只整理基础知识中关键技术,旨在系统性的学习和备忘. 1.在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN ...
- Jquery源码中的Javascript基础知识（三）
这篇主要说一下在源码中jquery对象是怎样设计实现的,下面是相关代码的简化版本: (function( window, undefined ) { // code 定义变量 jQuery = fun ...
- JavaScript基础知识（一）
一.JavaScript基础 1.JavaScript用法: HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 ...
随机推荐
- 【Java架构：基础技术】一篇文章搞掂：MySQL
数据库优化手段: 1.查看数据库性能参数 2.分析查询语句 3.添加索引 4.使用连接代替子查询 5.优化数据库结构 字段很多的表分解成多个表 经常联合查询的表,建立中间表 冗余字段 优化插入记录的速 ...
- 仿flask写的web框架
某大佬仿flask写的web框架 web_frame.py from werkzeug.local import LocalStack, LocalProxy def get_request_cont ...
- 【消息中间件】kafka
一.kafka整体架构 kafka是一个发布订阅模式的消息队列,生产者和消费者是多对多的关系,将发送者与接收者真正解耦: 生产者将消息发送到broker: 消费者采用拉(pull)模式订阅并消费消息: ...
- Locally weighted regression algorithm
之前所讨论的梯度下降算法,其算法模型是“线性回归模型”,我们可以理解为变量与因变量之间的关系是线性的.而现实情况是,使用线性模型去描述所有数据,很容易出现欠拟合(underfitting)的情况:同样 ...
- js中继承的实现，原型链的知识点归纳，借用构造函数，组合继承（伪经典继承）
博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/10/31/js%e4%b8%ad%e7%bb%a7%e6%89%bf%e7%9a%84%e ...
- 深浅拷贝, for循环小知识点 str操作 list的删除问题,类型转换
深浅拷⻉ : lst1 = ["⾦⽑狮王", "紫衫⻰王", "⽩眉鹰王", "⻘翼蝠王"] lst2 = lst1 ...
- linux 之文件重命名
没有专门的重命名 命令 用 mv a b 就可以重命名了 mv :move 移动文件(延伸功能:重命名,linux系统没有专门的重命名命令) 基本格式: 移动文件:mv 文件名 移动目的地文件名 重命 ...
- 【牛客网-剑指offer】斐波拉契数列
题目: 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0).n<=39 知识点: 一列数:从1开始,前两项为1,从第三项开始每一项等于前两项之和 ...
- Node.js中的fs文件系统
fs.stat 检测是文件还是目录 fs.mkdir 创建目录 fs.writeFile 创建写入文件 fs.appendFile 追加文件 fs.readFile 读取文件 fs.readdir 读 ...
- CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...