`
wanyin940
  • 浏览: 28353 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
最近访客 更多访客>>
社区版块
存档分类
最新评论

javascript入门笔记(三)

阅读更多

第四课:翻转图 http://www.tinhouse.com

javascript程序可以用事件来驱动:当javascript代码位于时间处理程序的引号中时,不用放在<script></script>中间

1. onClick: <a href =  http://www.baidu.com onClick="alert('Goto Baidu');">Baidu</a>

2. onMouseOver,onMouseOut:<a href="#"

                                                  onMouseOver="alert('Mouse overboard!');"

                                                  onMouseOut = "alert('Mouse off of board!');"

                                                  onClick = "return false;">board</a>

3.onMouseMove:事件处理程序会在光标在链接上面移动时调用.

   onMouseDown:事件处理程序会在鼠标键在链接上按下去时调用.

   onMouseUp:事件处理程序会在鼠标键在链接上抬起来时调用.

更多有意思的操作:<a href="#"

                             onClick= "var the_color=prompt('red or blue',' ');

                                             window.document.bgColor=the_color;

                                             return false;">change bgcolor</a>    

 

4.替换图像,点击链接后,sad_face.gif变成happy_face.gif

 

<html><head><title>Simple Image Swap</title></head>
<body>
<img src = "sad_face.gif" name = "my_image" >
<br>
<a href = "#"
    onClick = "window.document.my_image.src = 'happy_face.gif';
   
return false;">
make my day!</a>

</body>
</html>

 

5.实现翻转效果:

<html><head><title>Preloaded Rollover</title>


<script type = "text/javascript">
<!-- hide me from older browsers

var some_image = new Image();
some_image.src = "happy_face.gif";

// show me -->
</script>
</head>


<body>
<img src = "sad_face.gif" name = "my_first_image"
  onMouseOver = "window.document.my_first_image.src = 'happy_face.gif';"
  onMouseOut = "window.document.my_first_image.src = 'sad_face.gif';">
</body>
</html>

 

 也可以用链接的效果:

<a href="#"

   onMouseOver = "window.document.my_first_image.src = 'happy_face.gif';"
  onMouseOut = "window.document.my_first_image.src = 'sad_face.gif';">

<img src="sad_face.gif" name="my_first_image" border="0">

</a>

 

 

分享到:
评论

相关推荐

    Javascript入门笔记和一些代码

    作为“Web的三大核心技术”之一,JavaScript与HTML(超文本标记语言)和CSS(层叠样式表)共同构建了互联网的基石。 在"01_HTML_&_CSS"部分,你将学习到如何结合JavaScript与HTML和CSS来创建动态和交互式的网页。...

    JavaScript 入门 新手学习笔记

    这篇"JavaScript入门新手学习笔记"提供了全面的学习资源,适合初学者系统性地掌握这一技术。 笔记可能包含了以下关键知识点: 1. **基础语法**:JS的基础包括变量(var、let、const)、数据类型(如字符串、数字、...

    javascript入门学习笔记

    这份"javascript入门学习笔记"旨在为初学者提供一个全面且深入的JavaScript学习路径。 一、基础语法 JavaScript的基础包括变量、数据类型、操作符、流程控制等。变量用于存储数据,数据类型分为基本类型(如字符串...

    javascript入门笔记(二)

    【标题】:“JavaScript入门笔记(二)” 在“JavaScript入门笔记(二)”中,我们将深入探讨JavaScript这门广泛应用于Web开发的脚本语言的核心概念,以及如何利用它来增强网页的交互性和动态性。这篇笔记可能包括了...

    JavaScript入门学习笔记

    JavaScript入门学习笔记

    JavaScript入门课件与笔记

    在"JavaScript入门课件与笔记"中,你可以找到一系列帮助初学者掌握这门语言的资源。这些课件可能包含了从基础语法到高级特性的详细讲解,旨在帮助“小白”逐步建立起对JavaScript的理解。 1. **基础语法**:...

    javascript笔记 超级详细 入门

    根据提供的文件信息,我们可以整理出一系列关于JavaScript的基础知识点,这些知识点特别适合初学者入门学习。 ### JavaScript基础概念 **JavaScript**是一种广泛使用的编程语言,它主要用于网页开发,为静态的HTML...

    javascript笔记

    javascript入门笔记包括javascript简介、javascript语法、javascript流程控制、函数、数组等

    javascript入门-基础语法笔记整理.md

    一个周前自己较系统地学完 javascript,但老感觉自己对基础语法部分的掌握不够扎实,javascript 的基础语法内容实在是丰富灵活,但这部分是进大厂必不可缺的知识,于是花了不少时间耐心整理了这篇笔记,以此夯实基础...

    javascript学习笔记.docx

    这篇学习笔记主要涵盖了JavaScript的基础语法和客户端JavaScript的相关知识。 1. **JavaScript基本语法**: - **变量声明**:未声明的变量尝试读取时会产生错误,而写入未声明的变量会创建一个全局变量。 - **...

    狂神说系列 JavaScript笔记

    这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性,旨在构建一个完整的知识体系,帮助读者从入门到精通。 1. **JavaScript基础** - 变量与数据类型:JavaScript支持动态类型,包括基本类型(如数字、...

    Javascript入门到精通系统视频笔记

    以下是对标题和描述中提到的JavaScript知识点的详细解释: ### 1. 自定义函数 JavaScript中的函数是第一类对象,可以作为变量赋值、作为参数传递或作为其他函数的返回值。自定义函数使用`function`关键字定义,参数...

    javascript学习笔记整理知识点整理

    这份“javascript学习笔记整理知识点整理”是针对初学者的一份宝贵资料,涵盖了JavaScript的基础知识,旨在帮助新手快速入门并掌握这门语言的核心概念。 一、变量与数据类型 在JavaScript中,变量用于存储数据。...

    JAVASCRIPT从入门到精通读书笔记.pdf

    JAVASCRIPT从入门到精通读书笔记.pdf

    JavaScript入门学习笔记.pdf

    JavaScript是一种广泛应用于网页和网络应用的轻量级、解释型的编程语言,主要用来增加网页的交互性和动态功能。JavaScript与Java虽然名字相似,但两者是完全不同的语言,JavaScript主要是在客户端的浏览器上运行,而...

    狂神Java学习笔记————前端入门——html、css、JavaScript学习代码

    总的来说,这份【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是一份全面且实用的学习资料,它涵盖了前端开发的三大核心技术,并结合了个人实践和理解,对于希望入门前端开发的学习者来说是一...

    JavaScript入门课堂随堂笔记.zip

    本压缩包"JavaScript入门课堂随堂笔记.zip"包含了丰富的学习资料,旨在帮助初学者掌握这门重要的编程语言。 1. **基础语法**: JavaScript的基础包括变量声明(var、let、const)、数据类型(如字符串、数字、布尔...

    JavaScript笔记

    这份笔记是对JavaScript基础知识的总结,内容丰富且覆盖了JavaScript编程的多个核心方面,适合初学者作为入门参考或对有经验的开发者作为复习材料。在实际使用JavaScript开发中,理解和掌握这些知识点是非常重要的,...

Global site tag (gtag.js) - Google Analytics