热身热身小知识点：

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 侧边栏(使用Support Library 4提供的扩展组件)

    本文转自:http://www.apkbus.com/android-117148-1-1.html 写在前面的话:接触Android已经有一段时间了,自己积累的东西也算蛮多的.总结以往的经验,凡是关 ...

  2. ASP.NET学习路线图

    转自:http://www.cnblogs.com/huangmeimujin/archive/2011/08/08/2131242.html 如果你已经有较多的面向对象开发经验,跳过以下这两步: 第 ...

  3. webbrowser控件事件

    Beforenavigate2: Fired before navigate occurs in the given WebBrowser(window or frameset element). T ...

  4. C 语言 ----位运算

    位运算是指按二进制进行的运算.在系统软件中,常常需要处理二进制位的问题.C语言提供了6个位操作 运算符.这些运算符只能用于整型操作数,即只能用于带符号或无符号的char,short,int与long类 ...

  5. 【性能测试】【Jmeter】学习（3）——查看测试结果

    监听器——聚合报告 聚合报告添加步骤:(右键点击每一个操作步骤--->“添 加”---->“监听器”---->“聚合报告”) Label:每个 JMeter 的 element(例如 ...

  6. VS2010+Oracle11+Entity Framework4.1环境搭建及常见问题（转）

    一,开场白: 在微软的实体数据模型中存在四种查询方式:SQL字符串:Linq:Linq to SQL:Linq to Entity(ESQL) 对于Linq SQL目前微软虽然仍在支持,但微软已经声明 ...

  7. 获取客户端IP地址 via C#

    获取客户端IP地址 via C# 说明:本文中的内容是我综合博客园上的博文和MSDN讨论区的资料,再通过自己的实际测试而得来,属于自己原创的内容说实话很少,写这一篇是为了记录自己在项目中做过的事情,同 ...

  8. 开源库CImg 数据格式存储

    CImg为开源图像处理库,仅有一个头文件CImg.h便包含了对图像的所有处理函数,函数操作简单,编程方便,但国内使用者较少 其homepage:http://cimg.sourceforge.net/ ...

  9. HDOJ/HDU 1088 Write a simple HTML Browser(HTML字符串)

    Problem Description If you ever tried to read a html document on a Macintosh, you know how hard it i ...

  10. Android学习笔记（十四）方便实用的首选项-PreferenceActivity

    突然发现已经好多天没更新博客了,最近公司项目正在进行一个大跨度的重构,又碰上有新需求,一连好多天都是很晚才到家.其实这篇博文在草稿箱里面也存了很久了,本来想着不发了,不过感觉PreferenceAct ...