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="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="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="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); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
如何使用php脚本给html中引用的js和css路径打上版本号
在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css.js等,而不必从你的服务器读取,这样在一定程度上加快了网站的打开速度,又可以节约一下你的服务器流量. 具体文字说明不给大家多说了,下面通过代码实例给大家讲解. 比如 <link rel="stylesheet" type="text/css&quo
-
spring boot 2.x html中引用css和js失效问题及解决方法
在application.properties中配置了static的默认路径 我的static目录结构是这样的 index.html中这样引用css或者js文件,用到了th标签 html使用th标签需要先导入 以上这样配置好了之后发现网页的css和js果然加载出来了. 自定义拦截器失效 在自定义拦截器注册之后发现静态资源被拦截了,注释掉拦截器发现果然是拦截器的问题. 在注册方法上使用了excludePathPatterns()排除静态资源的拦截,发现该方法失效了,查看源码WebMvcConfig
-
基于JS+HTML实现弹窗提示是否确认提交功能
需求:当点击input按钮时候,弹出确认框,确认后提交到指定url,效果如下 分析:这里面要,引入三个库文件,如下是下载地址 layui样式文件:https://layer.layui.com/ layer弹窗组件:https://www.layui.com/ jquery代码库:http://www.jq22.com/ 代码:下载后放入响应的项目目录,最后代码如下 <!DOCTYPE html> <html> <head> <meta charset="
-
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
本文实例讲述了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,"name":"stan"}, {"id":2,"name":"jack"}, {"id":3,"name":"lucy"}, {"id&quo
-
JavaScript实现字符串与HTML格式相互转换
代码:: 1.将字符转换成Html function encodeHtml(str){ var encodedStr = "" ; if (str=="") return encodedStr ; else { for (var i = 0 ; i < str.length ; i ++){ encodedStr += "&#" + str.substring(i, i + 1).charCodeAt().toString(10)
-
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
解决方法如下所示: <script type="text/javascript"> function showImg(url) { var frameid = 'frameimg' + Math.random(); window.img = '<img id="img" style="width: 100%;height: auto" src=\'' + url + '?' + Math.random() + '\' />
-
javascript实现移动端 HTML5 图片上传预览和压缩功能示例
本文实例讲述了javascript实现移动端 HTML5 图片上传预览和压缩功能.分享给大家供大家参考,具体如下: 在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个API file 和 FileList 对象 file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个 input 元素上选择文件后
-
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
先看看JS+CSS+HTML实现"代码雨"类似黑客帝国文字下落最终效果: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofo
-
js在HTML的三种引用方式详解
1.内联样式 内联样式分为两种,一是直接写入元素的标签内部 <html> <title>js样式内联写法</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <body> <!--js内联写法01开始--> <!--当鼠标点击图片时跳出弹窗显示1223--> <div cla
-
Python selenium 三种等待方式详解(必会)
很多人在群里问,这个下拉框定位不到.那个弹出框定位不到-各种定位不到,其实大多数情况下就是两种问题:1 有frame,2 没有加等待.殊不知,你的代码运行速度是什么量级的,而浏览器加载渲染速度又是什么量级的,就好比闪电侠和凹凸曼约好去打怪兽,然后闪电侠打完回来之后问凹凸曼你为啥还在穿鞋没出门?凹凸曼分分中内心一万只羊驼飞过,欺负哥速度慢,哥不跟你玩了,抛个异常撂挑子了. 那么怎么才能照顾到凹凸曼缓慢的加载速度呢?只有一个办法,那就是等喽.说到等,又有三种等法,且听博主一一道来: 1. 强制等待
-
vue路由传参三种基本方式详解
这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r
-
Java spring的三种注入方式详解流程
目录 设置Spring的作用域 自动注入 @Primary Qualifier @ComponentScan不同的配置对性能的影响 懒加载 三种注入方式 字段注入(IDEA 会提示不推荐) 字段注入的bean类外部不可见 循环依赖问题 构造器注入(官方推荐) set方法注入 设置Spring的作用域 或者使用枚举值设置 单例和多里使用场景 自动注入 @Primary 一个接口有多个实现被spring管理吗,在依赖注入式,spring会不知道注入哪个实现类就会抛出NoUniqueBeanDefin
-
python自动化测试selenium核心技术三种等待方式详解
目录 1 使用python自带模块time的sleep方式 2 隐式等待(implicitly_wait) 3 显示等待(WebDriverWait) UI自动化测试过程中,可能会出现因测试环境不稳定.网络慢等情况,如果不做任何处理的话,会出现无法定位到特定元素而报错,导致自动化测试无法顺利执行. selenium官网手册:Waits | Selenium slenium自动化测试中,主要涉及三种等待方式: 1 使用python自带模块time的sleep方式 缺点:即使网络条件较好时,依旧按照
-
Spring中Bean的三种实例化方式详解
目录 一.环境准备 二.构造方法实例化 三.分析Spring的错误信息 四.静态工厂实例化 4.1 工厂方式创建bean 4.2 静态工厂实例化 五.实例工厂与FactoryBean 5.1 环境准备 5.2 实例工厂实例化 5.3 FactoryBean的使用 六.bean实例化小结 一.环境准备 准备开发环境 创建一个Maven项目 pom.xml添加依赖 resources下添加spring的配置文件applicationContext.xml 最终项目的结构如下: 二.构造方法实例化 在
-
iconfont的三种使用方式详解
在我们项目中经常要使用到iconfont,在此我们使用阿里巴巴矢量库提供的icon图标,此图标库足够为我们提供大量的图标,我们首先需要的事在阿里巴巴矢量图标库新建一个自己的账号,并且新建一个项目,这个项目包含了你所有要用到的图标.我们需要选中需要的图标放到自己的项目中,并下载下来放到自己项目下的iconfont文件夹之下.(需要更新图标时,下载包也需要重新下载更新) 方式一:使用symbol方式(本质是用svg标签构成的) 第一步:为了代码更好的复用,我们封装一个svg-icon组件,代码如下:
-
oracle中if/else的三种实现方式详解
1.标准sql规范 1.单个IF IF v=... THEN END IF; 2.IF ... ELSE IF v=... THEN ELSE t....; END IF; 3.多个IF IF v=... THEN ELSIF v=... THEN t...; END IFL 注意: 多个IF的是'ELSIF' 不是 ' ELSE IF' 2.decode函数 DECODE(VALUE,IF1,THEN1,IF2,THEN2,IF2,THEN2,..,ELSE) 表示如果value等于if1时,
-
Spring Bean三种注入方式详解
在Spring容器中为一个bean配置依赖注入有三种方式: 使用属性的setter方法注入 这是最常用的方式: 使用构造器注入: 使用Filed注入(用于注解方式). Field注入是最常见的一种方式,可以采用 @Autowired 对Bean类的接口进行初始化,代码如下 @ContextConfiguration({"/META-INF/spring/amazing-base.xml"}) @RunWith(SpringJUnit4ClassRunner.class) public
-
Android编程中沉浸式状态栏的三种实现方式详解
本文实例讲述了Android编程中沉浸式状态栏的三种实现方式.分享给大家供大家参考,具体如下: 沉浸式状态栏 Google从android kitkat(Android 4.4)开始,给我们开发者提供了一套能透明的系统ui样式给状态栏和导航栏,这样的话就不用向以前那样每天面对着黑乎乎的上下两条黑栏了,还可以调成跟Activity一样的样式,形成一个完整的主题,和IOS7.0以上系统一样了. 首先看下效果 首先看下第一种方式 系统的方式沉浸式状态栏实现 步奏一 //当系统版本为4.4或者4.4以上
随机推荐
- thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
- 在 docker 之间导出导入镜像的方法
- angularjs 源码解析之scope
- Mac OSX下使用MAMP安装配置PHP开发环境
- js用类封装pop弹窗组件
- ASP.NET记住登陆用户名的具体实现
- ThinkPHP CURD方法之limit方法详解
- php 字符过滤类,用于过滤各类用户输入的数据
- 详解JavaScript中的forEach()方法的使用
- mysql优化的重要参数 key_buffer_size table_cache
- dede3.1分页文字采集过滤规则详说(图文教程)
- js iframe跨域访问(同主域/非同主域)分别深入介绍
- PHP实现QQ空间自动回复说说的方法
- 将DLL放入到资源中,运行时自动加载的小例子
- Android自动测试工具Monkey的实现方法
- ThinkPHP3.1的Widget新用法
- jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
- 利用浮层使select不可选的实现方法
- jquery小火箭返回顶部代码分享
- EasyUI在Panel上动态添加LinkButton按钮