资讯专栏INFORMATION COLUMN

14天入门JavaScript-day one

cyrils / 2867人阅读

摘要:第一天总结的是一些事件中的鼠标事件事件中主要的都是对样式的显示隐藏,其中最简单的就是使用事件对属性进行显示隐藏或者改变属性方法用于显示带有一条指定消息和一个按钮的警告框。当鼠标指针移动到元素上时触发。鼠标按键被松开。

第一天总结的是一些HTML DOM 事件中的鼠标事件

js事件中主要的都是对样式的显示隐藏,display:none or display:block

其中最简单的就是使用onclick事件对属性进行显示隐藏或者改变class属性

demo1

alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

语法

alert(message)

要在 window 上弹出的对话框中显示的纯文本(而非 HTML 文本)

    
demo2

鼠标移入移出显示隐藏div块


显示隐藏div块

更多的鼠标事件

属性 描述 DOM
onclick 当用户点击某个对象时调用的事件句柄。 2
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发  
ondblclick 当用户双击某个对象时调用的事件句柄。 2
onmousedown 鼠标按钮被按下。 2
onmouseenter 当鼠标指针移动到元素上时触发。 2
onmouseleave 当鼠标指针移出元素时触发 2
onmousemove 鼠标被移动。 2
onmouseover 鼠标移到某元素之上。 2
onmouseout 鼠标从某元素移开。 2
onmouseup 鼠标按键被松开。 2

参照菜鸟教程

demo3

使用函数简单的对元素进行显示隐藏

    
    
    
demo4

使用函数改变元素css属性值

        
        
demo5

简单的对网页的换肤功能
要在最前面的body中加入id="changebg"

    
    红色
    绿色
demo6

className的使用

    
    
    
    

源码查看
查看博客

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111704.html

相关文章

  • 14入门JavaScript-day one

    摘要:第一天总结的是一些事件中的鼠标事件事件中主要的都是对样式的显示隐藏,其中最简单的就是使用事件对属性进行显示隐藏或者改变属性方法用于显示带有一条指定消息和一个按钮的警告框。当鼠标指针移动到元素上时触发。鼠标按键被松开。 第一天总结的是一些HTML DOM 事件中的鼠标事件 js事件中主要的都是对样式的显示隐藏,display:none or display:block 其中最简单的就是使...

    tomlingtm 评论0 收藏0
  • 14入门JavaScript-day one

    摘要:第一天总结的是一些事件中的鼠标事件事件中主要的都是对样式的显示隐藏,其中最简单的就是使用事件对属性进行显示隐藏或者改变属性方法用于显示带有一条指定消息和一个按钮的警告框。当鼠标指针移动到元素上时触发。鼠标按键被松开。 第一天总结的是一些HTML DOM 事件中的鼠标事件 js事件中主要的都是对样式的显示隐藏,display:none or display:block 其中最简单的就是使...

    zhaot 评论0 收藏0
  • 14入门JavaScript-day two

    摘要:前面一天学习用实现简单的网页效果,现在来学学的相关组成解释器翻译操作的能力浏览器兼容字面量常量变量样式优先级标签行间改变样式变绿获取最简单选项卡教育培训招生出国循环的理解的使用简单理解设置文字源码查看查看原文 前面一天学习用js实现简单的网页效果,现在来学学js的相关 JavaScript组成 ECMAScript:解释器、翻译 DOM:Document Object Model 操...

    Achilles 评论0 收藏0
  • 14入门JavaScript-day three

    摘要:学习的是的变量类型运算符,数据转换,变量作用域,以及什么是闭包变量类型真的没定义虽然定义,没有给东西显隐性类型转换字符串连接数字相加数字相减的使用变量作用域,局部变量和全局变量全局变量在任何地方都能用闭包简单指的是子函数可以使用父函数中的 学习的是js 的变量类型typeof运算符,数据转换,变量作用域,以及什么是闭包 demo1 变量类型 var a=12; //alert(typ...

    keke 评论0 收藏0
  • 14入门JavaScript-day two

    摘要:前面一天学习用实现简单的网页效果,现在来学学的相关组成解释器翻译操作的能力浏览器兼容字面量常量变量样式优先级标签行间改变样式变绿获取最简单选项卡教育培训招生出国循环的理解的使用简单理解设置文字源码查看查看原文 前面一天学习用js实现简单的网页效果,现在来学学js的相关 JavaScript组成 ECMAScript:解释器、翻译 DOM:Document Object Model 操...

    wthee 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<