JS0热身运动
热身热身小知识点：
JS中如何获取元素：
1 通过ID名称来获取：document get element by id -->document.getElementById()
2
....
事件：鼠标事件，键盘事件，系统事件，表单事件，自定义事件...
onclick
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove 就像是鼠标抚摸一样的事件
...
onload 加载以后执行...
window.onload=事情
如何添加事件：
元素.onmouseover
函数：可以理解为-命令，做些事——
function jill1231(){ //肯定不会主动执行的！
...
}
1 直接调用：jill1231();
2 事件调用：元素.事件=函数名oDiv.onclick=jill1231;
function(){} //匿名函数
元素.事件=function(){};
测试：
alert(1); 带一个确定按钮的警告框
alert('ok'); 'ok' "ok" 字符串
变量：
var num=123;
希望把某个元素移除你的视线：
1 display:none;
2 visibility:hidden;
3 width/height
4 opacity
5 拿一个div盖住它
...
例如，做一个菜单栏，鼠标移入，显示子菜单，移出，子菜单消失
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8">
<title>模拟菜单栏</title>
<style>
//reset
body,ul,li{margin:;padding:;}
ul,li{list-style:none;}
a{text-decoration:none;}
//main.css
.lis{width:80px;height:30px;border:1px solid #333;position:relative;}
.lis a{display:block;line-height:30px;text-align:center;color:#000;background:#f1f1f1;}
ul ul{width:80px;border:1px solid #333;position:absolute;top:30px;left:-1px;background:#ff9;display:none;}
ul ul li{text-align:center;line-height:30px;}
</style>
</head>
<body>
<ul>
//设置父级，保证鼠标移入移出伪元素及子级不出现闪退
<li id="lis">
<a hred="#" id="link">博客</a>
<ul id="ul1">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
var li=document.getElementById('lis');
var a=document.getElementById('link');
var ul=document.getElementById('ul1');
li.onmouseover=show;
li.onmouseout=hide; function show(){
ul.style.display='block';
a.style.background='#345345';
}
function hide(){
ul.style.display='none';
a.style.background='#f1f1f1';
}
</script>
</body>
</html>
JS0热身运动的更多相关文章
- Android逆向进阶——让你自由自在脱壳的热身运动(dex篇)
本文作者:HAI_ 0×00 前言 来看看我们今天的主题. 让你自由自在脱壳的热身运动. 现在很多第厂家都是使用第三方的加固方式来进行加固的.或者使用自己的加固方式进行加固. 那么我们必不可少的就是脱 ...
- [妙味JS基础]JS热身运动
知识点总结 获取ID元素 document.getElementById(' ') 事件:鼠标事件.键盘事件.系统事件.表单事件.自定义事件 onclick onmouseout onmouseove ...
- AI之旅（1）：出发前的热身运动
前置知识 无 知识地图 自学就像在海中游泳 当初为什么会想要了解机器学习呢,应该只是纯粹的好奇心吧.AI似乎无处不在,又无迹可循.为什么一个程序能在围棋的领域战胜人类,程序真的有那么聪明吗?如 ...
- 妙味远程课堂-JS热身运动-上
希望某个元素移除视线 display:none//显示无 visibility:hidden//可见性 隐藏 width/height 改为0 透明度 定位,left/top值为负值 用与背景颜色一样 ...
- TensorFlow——热身运动：简单的线性回归
过程: 先用numpy建立100个数据点,再用梯度下滑工具来拟合,得到完美的回归线. # _*_coding:utf-8_*_ import tensorflow as tf import numpy ...
- 一生伏首拜阳明------<明朝那些事儿>
一生伏首拜阳明. 王守仁,字伯安,别号阳明. 成化八年(1472),王守仁出生在浙江余姚,大凡成大事者往往出身贫寒,小小年纪就要上山砍柴,下海捞鱼,家里还有几个生病的亲属,每日以泪洗面.这差不多也是惯 ...
- CPU与内存的那些事
下面是网上看到的一些关于内存和CPU方面的一些很不错的文章. 整理如下: 转: CPU的等待有多久? 原文标题:What Your Computer Does While You Wait 原文地址: ...
- 7 天玩转 ASP.NET MVC — 第 1 天
0. 前言正如标题「7 天玩儿转 ASP.NET MVC」所言,这是个系列文章,所以将会向大家陆续推出 7 篇.设想一下,一天一篇,你将从一个愉快的周一开始阅读,然后在周末成为一个 ASP.NET M ...
- Android开源框架——Picasso
开篇——介绍Picasso (Picasso是什么?)Picasso:A Powerfull Image Downloading and Caching Library for Android,即An ...
随机推荐
- Android Training精要（一）ActionBar上级菜单导航图标
Navigation Up(ActionBar中的上级菜单导航图标) 在android 4.0中,我们需要自己维护activity之间的父子关系. 导航图标ID为android.R.id.home @ ...
- TeeChart的最小步长和最大步长
/// <summary> /// 坐标轴的最大步长 /// </summary> public double MajorStep { get { return axis.Ca ...
- VS2015连接Oracle数据库（转）
原文地址:https://xuanwo.org/2016/01/03/vs-oracle-11g 开发环境 宿主机:Win10 + VS2015 + ODP.Net for VS2015虚拟机:Win ...
- HDOJ/HDU 1982 Kaitou Kid - The Phantom Thief (1)(字符串处理)
Problem Description Do you know Kaitou Kid? In the legend, Kaitou Kid is a master of disguise, and c ...
- JDBC_demo:java连接mysql过程
1.任何数据库驱动程序都提供对java.sql.Driver接口的驱动类,mysql-connector-java-5.1.39-bin.jar中Driver: package com.mysql.j ...
- make it clear how to use const in C++
1.first of all,take a lookup on the left side of keyword const.If there is something(type or pointer ...
- 多IDC数据分布--MySQL多机房部署 - 学习笔记 - 51CTO技术博客
多IDC数据分布--MySQL多机房部署 - 学习笔记 - 51CTO技术博客 多IDC数据分布--MySQL多机房部署
- 【python自动化第七篇：面向对象进阶】
知识点概览: 静态方法,类方法,属性方法 类的特殊方法 反射 异常处理 socket开发基础 一.静态方法:@staticmethod 只是名义上归类管理,实际上在静态方法里访问不了类或者实例中的任何 ...
- onethink加密解密函数
onethink中封装的加密解密函数 <?php /** * 系统加密方法 * @param string $data 要加密的字符串 * @param string $key 加密密钥 * @ ...
- Js- 菜单
很简单的JS二级菜单显示,收藏 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...