js在HTML中的三种写法
1.内联样式
内联样式分为两种，一是直接写入元素的标签内部
<html>
<title>js样式内联写法</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<!--js内联写法01开始-->
<!--当鼠标点击图片时跳出弹窗显示1223-->
<div class="img">
单击事件：
<img src="data:images/001.jpg" onclick="alert(1223)"></img>
</div>
<!--js内联写法01结束-->
</body>
</html>
二是写入到<script></script>标签中
给元素添加id
通过getElementById('XX');方法定位到该元素，给该元素添加触发事件
注意：<script></script>标签应该放在</body>之后
<html>
<title>js样式内联写法</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<!--js内联写法02开始-->
<div class="img">
单击事件：
<img src="data:images/002.jpg" id='yuansu'></img>
</div>
<!--js内联写法02结束-->
</body>
<script>
//js代码
//找到XX元素，一般给元素加id
yuansuojb=document.getElementById('yuansu');
//给xx元素加事件
yuansuojb.onclick=function(){
//代码段
alert(1);
}
//触发事件
</script>
</html>
2.外联样式
将js的代码写到.js的文件中，并在HTML中引用
.html文件内容如下：
<html>
<title>js样式外联写法</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<div class="img">
外联写法--单击事件：
<img src="data:images/003.jpg" id='yuansu'></img>
</div>
</body>
<script src='js/index.js'></script>
</html>
.js文件内容如下：
//js代码
//找到XX元素，一般给元素加id
yuansuojb=document.getElementById('yuansu');
//给xx元素加事件
yuansuojb.onclick=function(){
//代码段
var str="hello world !!!";
alert(str);
}
js在HTML中的三种写法的更多相关文章
- Angularjs中controller的三种写法
在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中cont ...
- js中的三种函数写法
js中的三种函数写法 <script type="text/javascript"> //普通的声明方式 function myFun(m,n){ alert(m+n) ...
- jquery 在页面中三种写法
jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6.7.8浏览器,这样做的目的是为了兼容移动端开发.由于减少了一些代码,使得该版本比 jQuery 1.x ...
- js oop中的三种继承方法
JS OOP 中的三种继承方法: 很多读者关于js opp的继承比较模糊,本文总结了oop中的三种继承方法,以助于读者进行区分. <继承使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方 ...
- (转)在网页中JS函数自动执行常用三种方法
原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...
- 研究分析JS中的三种逻辑语句
JS中的三种逻辑语句:顺序.分支和循环语句. 一.顺序语句 代码规范如下:1. <script type="text/javascript"> var a = 10; ...
- 在网页中JS函数自动执行常用三种方法
在网页中JS函数自动执行常用三种方法 在HTML中的Head区域中,有如下函数: <SCRIPT LANGUAGE="JavaScript"> function ...
- （转）Ext.Button点击事件的三种写法
转自:http://maidini.blog.163.com/blog/static/377627042008111061844345/ ExtJs的写法太灵活了,现在收集了关于Button点击事件的 ...
- 链接属性rel=’external’、rel=’nofollow’、rel=’external nofollow’三种写法的区别
链接属性rel='external'.rel='nofollow'.rel='external nofollow'三种写法的区别 大家应该都知道rel='nofllow'的作用,它是告诉搜索引擎, ...
随机推荐
- Visual studio docker build no such file or directory
在我构建新的镜像的时候, 发生 了 no such file or directory 的错误. 这个错误找了半天, 没头绪,项目结构是这样的: WebApplication1 建立在根目录下,是 ...
- Object C学习笔记18-SEL,@ selector,Class,@class--转
一. SEL 类型 在上一篇介绍了几个方法,都只是介绍了其使用方式但是没有具体介绍参数: - (id)performSelector:(SEL)aSelector; - (id)performSele ...
- iOS生成PDF的关键代码-备忘
//此方法只是把当前页面的内容生成PDF并保存在沙盒中. //还需要做:把当前面没有显示的内容以分页的形式生成PDF,并把PDF读取并显示出来 //关于显示可以参考:念茜的博客 iOS开发笔记——PD ...
- 科普 eclipse中的Java build
在刚学eclipse的时候,build path是经常会用到的,但经常就是跟着教程走,额就不太懂这是干嘛的,然后今天看见极客视频里有相关的讲解,来记录一下. Build Path 是指定Java工程所 ...
- vijos P1426兴奋剂检查 多维费用背包问题的hash
https://vijos.org/p/1426 这是个好题,容易想到用dp[i][v1][v2][v3][v4][v5]表示在前i个物品中,各种东西的容量是那个的时候,能产生的最大价值. 时间不会T ...
- ASP.NET MVC+Bootstrap个人博客之修复UEditor编辑时Bug（四）
我的个人博客站在使用百度富文本编辑器UEditor修改文章时,遇到了一些问题,(不知是bug,还是我没有配置好).但总算找到了解决方法,在此记录下来. 遇到的问题: 正常来讲,进入文章修改页,只需将U ...
- （2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
- php中 mysql 插入特殊字符(手机端的emoji表情)出现异常
今天在用mysql存储从微信服务器拉来的数据,出现插入数据异常,报 Incorrect string value: '\xF0\x9F\x98\x97\xF0\x9F 的错误. 最终在网上查了一下,有 ...
- SugarCRM安装踩雷（一）
安装SugarCRM前置条件: 1.找对平台.正确版本的安装包 2.APACHE + MYSQL + TOMCAT环境先确保OK 坑1: 进入安装参数设置步骤的MYSQL用户密码——这里根据Mysql ...
- darknet+opencv在windows上的编译
darknet 源码网站:https://github.com/pjreddie/darknet 技术支持官网:https://pjreddie.com/darknet/ darknet采用C++编写 ...