热身热身小知识点：

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. FindBugs

    FindBugs是一个能静态分析源代码中可能会出现Bug的Eclipse插件工具. 可以从http://sourceforge.net/project/showfiles.php?group_id=9 ...

  2. JavaScript数学函数的操作

    <script> var a=3.14; var a1=Math.ceil(a);//大于当前小数的最小整数; alert(a1); var a2=Math.floor(a);//小于当前 ...

  3. POJ_1182_食物链_[NOI]_(并查集)

    描述  http://poj.org/problem?id=1182 共A,B,C三种动物,A吃B,B吃C,C吃A.给出询问 q : t , x , y , 表示: x 与 y 是同类 ( t==1 ...

  4. BZOJ2038小Z的袜子(hose)

    2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 2343  Solved: 1077[Subm ...

  5. 基于开源软件在Azure平台建立大规模系统的最佳实践

    作者 王枫 发布于2014年5月28日 前言 Microsoft Azure 是微软公有云的唯一解决方案.借助这一平台,用户可以以多种方式部署和发布自己的应用. 这是一个开放的平台,除了对于Windo ...

  6. 如何删除MyEclipse（eclipse）中不需要的workspace

    在安装目录下,打开eclipse/configuration/.settings,用记事本打开org.eclipse.ui.ide.prefs文件 #Wed Mar 11 14:41:21 CST 2 ...

  7. 迷宫城堡--HDOJ 1269

    迷宫城堡 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  8. Selenium WebDriver + Grid2 + RSpec之旅（三） ----入门小例子

    Selenium WebDriver + Grid2 + RSpec之旅(三) ----入门小例子 第一个例子都是比较简单的博客园登录界面,就像学习编程语言时候都是从Hello,World!开始. 1 ...

  9. HDOJ/HDU Tempter of the Bone(深搜+奇偶性剪枝)

    Problem Description The doggie found a bone in an ancient maze, which fascinated him a lot. However, ...

  10. C语言调用汇编实现字符串对换

    1. 前面配置arm交叉编译环境. 2. 配置好qemu-arm C语言代码string-switch.c: #include <stdio.h> #include <stdlib. ...