初学JavaScript(一)

暑假已经开始了,本人准备用这一整个暑假来学习JavaScript和jQuery,首先我学的是JavaScript,简称js。

JavaScript是什么?

通俗讲,JavaScript给静态网页添加一些交互,一些动态效果,帮助网页修改样式。
本人觉得要想学JavaScript,如果不知道HTML和CSS,可以先了解一下,再学JavaScript,会更容易一点。

举例

首先通过一个小的例子,让我们大家大概知道一下到底JavaScript是什么,它是干什么的。
首先学的是一个鼠标提示框,就是把把鼠标移到复选框会出现一个框,然后移走鼠标,框又会消失的这么一个例子,
首先先用HTML和css把基本的样子写出

    <input type="checkbox" />
    <div id="div1" style="width:200px;height:200px;background:#CCC;"></div>

然后出来的效果大概如下图:
js1.PNG

然后我们要先把它下面的div框隐藏掉,学要在style里面加一个display,把它的参数设为none后,div框就会隐藏掉,这里简单说一下display,它是写在style里的,style是样式,display是样式显示,而display有俩个样式显示参数分别是none和block;当display的参数设为none是,则表示是隐藏所修饰的样式,当display的参数设为block,它也是display的默认值,表示显示块级。好了,不多扯了。

事件

事件是JavaScript非常基本又重要的概念,网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说事件onclick,它只是事件中最常见的一种, 我们可以在点击某按钮时产生一个 onClick 事件来触发。
比如

  <input type="button" value="haha" onclick="alert('你好!')" /> 

点击按钮后弹出一个框,如下图:


js2.PNG

言归正传,首先我们先实现当鼠标移入到input上时,让div显示出来。
这时候我们又得用另一个新的事件叫onmouseover,先举个例子

<input type="checkbox"  onmouseover="alert('你好!')"/> 

显示出是移到input然后div显示出来(由于录制GIF的软件没有搞好,就不给出效果),但是有一个问题就是当div显示出来之后就发现当鼠标移走后div还是显示在页面上,这时候,就用到了onmouseout,它就是表示当一开始就出去了
回归到刚才就是

  <input type="checkbox" onmouseover="document.getElementById(div1).style.display
  ='block';" onmouseout="document.getElementById(div1).style.display='block';" />
  <div id="div1" style="width:200px;height:200px;background:#CCC;display:none">
  </div>

getElementById拆分开get是获取, Element元素,By通过,组合起来就是通过id获取元素,而div1.style.dispaly就是说把id为div1的style的display的参数设为none。JavaScript中的“.”就像我们中文的“的”一样。
现在这个鼠标提示框就基本功能就完成了,这个都是拿最基础写的,越学到后面代码会越高级,也会越简化。
下面我把源代码例子发一下

  <html>
  <head>
  <title>鼠标提示框</title>
  <style>
   #div1
   {
      width:200px;
      height:200px;
      background:#CCC;
      display:none;
  }
   </style>
   </head>
   <body>
   <input type="checkbox" onmouseover=
     "document.getElementById('div1').style.display='block';" onmouseout=
     "document.getElementById('div1').style.display='none';" />
    <div id="div1">
  这是div显示的内容,hello!
    </div>
    </body>
    </html>
GIF.gif

大概就这么多。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,165评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,503评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,295评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,589评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,439评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,342评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,749评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,397评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,700评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,740评论 2 313
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,523评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,364评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,755评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,024评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,297评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,721评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,918评论 2 336

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,347评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,709评论 1 92
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,566评论 0 7
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 746评论 0 3
  • 上午,销售在群里直接截图抛来一个学员的问题「old rough and ready 」是神马?我强忍住内心的五万匹...
    小崔哈哈阅读 547评论 0 1