热身热身小知识点：

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热身运动的更多相关文章

  1. Android逆向进阶——让你自由自在脱壳的热身运动(dex篇)

    本文作者:HAI_ 0×00 前言 来看看我们今天的主题. 让你自由自在脱壳的热身运动. 现在很多第厂家都是使用第三方的加固方式来进行加固的.或者使用自己的加固方式进行加固. 那么我们必不可少的就是脱 ...

  2. [妙味JS基础]JS热身运动

    知识点总结 获取ID元素 document.getElementById(' ') 事件:鼠标事件.键盘事件.系统事件.表单事件.自定义事件 onclick onmouseout onmouseove ...

  3. AI之旅（1）：出发前的热身运动

    前置知识   无 知识地图 自学就像在海中游泳   当初为什么会想要了解机器学习呢,应该只是纯粹的好奇心吧.AI似乎无处不在,又无迹可循.为什么一个程序能在围棋的领域战胜人类,程序真的有那么聪明吗?如 ...

  4. 妙味远程课堂-JS热身运动-上

    希望某个元素移除视线 display:none//显示无 visibility:hidden//可见性 隐藏 width/height 改为0 透明度 定位,left/top值为负值 用与背景颜色一样 ...

  5. TensorFlow——热身运动：简单的线性回归

    过程: 先用numpy建立100个数据点,再用梯度下滑工具来拟合,得到完美的回归线. # _*_coding:utf-8_*_ import tensorflow as tf import numpy ...

  6. 一生伏首拜阳明------<明朝那些事儿>

    一生伏首拜阳明. 王守仁,字伯安,别号阳明. 成化八年(1472),王守仁出生在浙江余姚,大凡成大事者往往出身贫寒,小小年纪就要上山砍柴,下海捞鱼,家里还有几个生病的亲属,每日以泪洗面.这差不多也是惯 ...

  7. CPU与内存的那些事

    下面是网上看到的一些关于内存和CPU方面的一些很不错的文章. 整理如下: 转: CPU的等待有多久? 原文标题:What Your Computer Does While You Wait 原文地址: ...

  8. 7 天玩转 ASP.NET MVC — 第 1 天

    0. 前言正如标题「7 天玩儿转 ASP.NET MVC」所言,这是个系列文章,所以将会向大家陆续推出 7 篇.设想一下,一天一篇,你将从一个愉快的周一开始阅读,然后在周末成为一个 ASP.NET M ...

  9. Android开源框架——Picasso

    开篇——介绍Picasso (Picasso是什么?)Picasso:A Powerfull Image Downloading and Caching Library for Android,即An ...

随机推荐

  1. Android用户界面 UI组件--TextView及其子类(五) DigitalClock,AnalogClock,RadioButton,CheckBox,ToggleButton汇总

    DigitalClock和AnalogClock两个时钟类 可以为DigitalClock设置背景图片,自定义时针,秒针,分针的样式 例子: <?xml version="1.0&qu ...

  2. perl 面向对象demo

    Vsftp:/root/perl/17# cat Critter.pm package Critter; sub new { my $self = {}; my $invocant = shift; ...

  3. INFORMATION_SCHEMA.INNODB_TRX 详解

    从192.168.11.186 上登录 192.168.11.185 数据库: root 13246 547 0 13:39 pts/1 00:00:00 mysql -uroot -px xxxxx ...

  4. maven多配目配置总结

    一. 设置一个parent项目,parent项目的作用应该有如下方面: 1.统一管理jar包的版本,这样许多子项目只需指定依赖的jar,而无需指定所依赖jar的版本 (1)在<propertie ...

  5. 【转】Ubuntu下配置samba服务器--不错

    原文网址:http://my.oschina.net/junn/blog/171388 设置虚拟机的网络方式为桥接方式: 一. samba的安装: sudo apt-get insall samba  ...

  6. 如何区分Shapefile，Coverage，Geodatabase（转载）

    转自:http://www.cnblogs.com/linhugh/archive/2012/04/06/2435266.html 在过去20年中,矢量数据模型是GIS中变化最大的方面,例如,ESRI ...

  7. java NIO 资料总结

    1.http://developer.51cto.com/art/201204/328340.htm 2.http://ifeve.com/file-channel/并发编程网系列 3 http:// ...

  8. leecode Binary Tree Level Order Traversal II java

    做完这道题,只能说基本功很重要,数组中套数组就不会用了,过几天吧1做了,看自己到底等没. https://oj.leetcode.com/problems/binary-tree-level-orde ...

  9. DAL与数据库类型的对应关系

    MSSQL Server类型 DbType类型 C#类型   MySql类型 DbType类型 C#类型 bit Boolean bool   bit(1) Boolean bool tinyint ...

  10. [Unix.C]Files and Directories

    stat, fstat, and lstat Functions  本部分讨论的内容主要围绕3个stat函数及其返回值. #include <sys/stat.h> int stat(co ...