热身热身小知识点：

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. Electrification Plan(最小生成树)

    http://acm.sdut.edu.cn:8080/vjudge/contest/view.action?cid=50#problem/D 最小生成树模板,注意的是这里有k个发电站,它们不再需要连 ...

  2. bzoj1878

    像我这种蒟蒻这道题从在线算法思考基本毫无思路 但是发现题目中只涉及到询问而不涉及到修改,这类题目一般都是离线算法大概 考虑到这题为什么不能直接区间求值,因为区间中同色点会被重复计算(废话) 下面我们就 ...

  3. C#设计模式(23种设计模式)

    转自:http://www.cnblogs.com/abcdwxc/archive/2007/10/30/942834.html 创建型:        1. 单件模式(Singleton Patte ...

  4. Tag file directory /struts-tags does not start with "/WEB-INF/tags"

    使用自定义标签,记得引用路径 <%@taglib prefix="s" uri="/struts-tags" %>

  5. centOS 下解压 rar zip 文件

    闲话不说,centos上如何安装rar.unrar在线解压缩软件呢?如果您的centos是32位的,执行如下命令: wget http://www.rarsoft.com/rar/rarlinux-3 ...

  6. Joomla必备模块（转自joomla8）

    1.Akeeba Backup Core-joomla!网站备份组件. 不论是国内收费主机还是国外的收费主机甚至是免费主机,都必须考虑到数据安全问题.没有哪个主机商可以保证你的网站数据不会丢失,况且很 ...

  7. coco2dx 精灵类

    CCSize size = CCDirector::sharedDirector()->getWinSize(); CCSprite *bg = CCSprite::create("H ...

  8. 在Jersey中如何处理泛型集合

    Jersey是一个标准的Restful Web service框架,可以方便的实现Restful的Server端和客户端. 本文主要介绍使用Jersey客户端时如何将Json格式的数组转换成java的 ...

  9. Android应用开发学习之列表视图

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 列表视图我们会经常用到,可以通过两种方式来创建列表视图,一种方式是直接使用ListView组件创建,另一种方式是通过 ...

  10. c语言数据处理！

    #include "stdio.h" struct { ]; long nume; ]}; ]; float score; }stur; main() { printf(" ...