热身热身小知识点：

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. delphi中EmbeddedWB网页html相互调用（二）

    我们可以通过控件 EmbeddedWB_D5-D2010_Version_14.69.1 来响应html事件,还可以自定义html响应哪些html元素. 控件下载 点击下载 里面有demos文件夹大家 ...

  2. git fetch 拉取而不合并

    1.git fetch git fetch origin master:tmp git diff tmp git merge tmp git branch -d tmp          从远程获取最 ...

  3. bzoj1085

    肯定是搜索题无疑问, 首先要求在15步以内(包括15步)到达目标状态,也就是限定了搜索的深度,于是我们用dfs更合适 但这样复杂度仍然太大,原因就是我们在搜索中做了很多很不优的尝试 考虑当前状态若与目 ...

  4. team geek

    1. 转载自http://book.douban.com/review/6007037/,版权归丸子(^.^)v所有. New Google employees (we call “Nooglers” ...

  5. HDU-- Buy Tickets

    告知每次要插到第 i 个位置上,问最后它们的顺序是什么. 这一题,不是考线段树,是考如何想出用线段树...思维很巧妙,倒过来做的话就能确定此人所在的位置....   Buy Tickets Time ...

  6. Mac下go语言goclipse插件安装部署

    Try using this URL as a Eclipse Software Site:https://raw.githubusercontent.com/GoClipse/goclipse.gi ...

  7. 解析XML文件示例

    项目中要解析Xml文件,于是在工程里找了下前人写例子. 1,SAX(基于事件,效率高,使用声明加载什么). public class MVCConfig { private static MVCCon ...

  8. maven构建带版本号和日期的war包名

    21166312 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !import ...

  9. Yii框架tips（转）

    yii的一些小的技巧 http://www.yiichina.com/topic/151 db组件 'schemaCachingDuration'=>3600, 为什么不起做用?需要开缓存 如何 ...

  10. 【转】shell 教程——06 Shell变量：Shell变量的定义、删除变量、只读变量、变量类型

    Shell支持自定义变量. 定义变量 定义变量时,变量名不加美元符号($),如: variableName="value" 注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编 ...