<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
行内式 --- 与css的行内式基本相同
在标签中,通过 script标签 来定义JavaScript代码
但是实际操作中,一般是通过 定义 事件来 定义JavaScript程序代码
这样的行内式,我们在实际项目中基本不会使用
只要了解即可
-->

//onclick是js点击事件

<!-- 在 代码中 直接定义 script 程序代码内容 -->
<div id="div1" style="color: red;" onclick="window.alert('我是点击弹出的内容')">你点我试试</div>
<div id="div2" style="color: blue;" onclick= fun1() >试试就试试</div>
<!-- 特殊的标签,a标签
在 a标签中 有 href 属性 可以定义标签的跳转对象
如果定义JavaScript程序,有可能会受到超链接跳转的影响,执行JavaScript代码有误
超链接要写行内式,定义在 href 属性中
在 href 属性中 定义 JavaScript: ;
在 冒号 分号之间,定义 JavaScript代码
此时 就 不能实现 页面跳转了,如果需要实现页面跳转,需要通过 BOM 操作来实现
JavaScript:; 大小写,不区分,都行,只是我们习惯性的 J 和 S 大写
JavaScript 大小写随便
因为 JavaScript 是 href的属性值,会被理解为 html 程序的一部分
html代码是不区分大小写的
window.alert() 是要严格区分大小写的
虽然当前也被视为 href的属性值
但是 本质是 一个js 程序
JavaScript程序 会 严格区分大小写
 
-->
<A id="a1" href="hTTps://wWW.bAIdu.cOm" onclick= fun2()>我想去百度看看</a>
<br>//是可以跳转的点击后字体是黄色
<a href="jAvAscRipT: window.alert('我是定义的js程序弹出内容') ;" >我是标准的超链接行内式</a>//出现一个弹窗
<!-- 没有跳转对象的超链接,之前href的属性值写的是 #
执行效果是点击超链接,会跳转至页面的顶部
 
现在href的属性值,写的是 JavaScript:;
没有任何执行效果,不会有任何的跳转
-->
<a href="JavaScript:;">我就是随便写写的超链接</a>

<script>

function fun2(){
const oA = document.querySelector('#a1');
oA.style.color = 'orange';
}
</script>
</body>
</html>

JavaScript语法形式1行内式的更多相关文章

  1. 0008 CSS初识(行内式、内部样式表、外部样式表)

    typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...

  2. JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式

    返回网页顶部方法 一.锚链接 simpleDemo: <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. js行内式遇到的一些问题 DOM对象和jq对象转换的问题

    这两天给后台页面做页面,我的工作比较简单,只需要写结构和样式就行了,写好之后,后端大哥用ajax重写页面加载数据,顺便给标签添加选中事件,做选中后变色的处理,但是却遇到一个问题,一直选不到触发事件这个 ...

  4. Angular 行内式依赖注入

    var app = angular.module('myApp', ['ng']); //创建一个自定义服务app.factory('$Debug', function () { return { d ...

  5. JavaScript的DOM_操作行内样式

    一.检测浏览器是否支持css CSS 作为(X)HTML 的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的 CSS 能力.CSS 的能力和 DOM 级别密切相关,所以我们有必要检测当前浏 ...

  6. HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  7. JS——行内式注册事件

    html中行内调用function的时候,是通过window调用的function,所以打印this等于打印window,所以在使用行内注册事件时务必传入参数this <!DOCTYPE htm ...

  8. !important覆写css行内样式

    <div class="block"> <span style="font-weight: bold; color: red;">Hel ...

  9. 第48天学习打卡(HTML 行内元素和块元素 列表 表格 视频和音频 页面结构分析 iframe内联框架 表单语法 )

    行内元素和块元素 块元素 ​ 无论内容多少,该元素独占一行 ​ (p.h1-h6) 行内元素 ​ 内容撑开宽度,左右都是行内元素的可以排在一行 ​ (a.strong.em...) 列表 什么是列表 ...

  10. md语法之行内代码和代码片续集

    md语法之行内代码和代码片 一行之内嵌入一小段代码, 简称行内代码. 其方法为: 用撇号把代码围起来. 比如: import numpy as ny就可以了. 代码片的方法: 三个连续的撇号+pyth ...

随机推荐

  1. AI极速批量换脸!Roop-unleashed下载介绍,可直播

    要说AI换脸领域,最开始火的项目就是Roop了,Roop-unleashed作为Roop的嫡系分支,不仅继承了前者的强大基因,更是在功能上实现了重大突破与升级 核心特性 1.可以进行高精度的图片.视频 ...

  2. Oracle使用存储过程实现多行对同行数据排列组合

    Oracle使用存储过程实现同行数据排列组合 对多行的同一行的多列数据进行排列组合 假设获取的原来的数据如下表 A B C D aa ab ac ad 现在我们需要对数据进行处理,将每一行的数据,类似 ...

  3. 为 Serverless Devs 插上 Terraform 的翅膀,实现企业级多环境部署(下)

    简介: 在上篇中,主要介绍了 Serverless Devs 多环境功能的使用,用户读完可能会些疑问,本文会就一些常见问题进行下回答. 在上篇中,主要介绍了 Serverless Devs 多环境功能 ...

  4. 阿里云张振尧:阿里云边缘云驱动5G时代行业新价值

    ​简介:近日,以"5G融合通信趋势下的技术创新"为主题的2021中国增值电信及虚拟运营高峰论坛在北京召开,阿里云边缘云高级产品专家张振尧发表了<阿里云边缘云驱动5G时代行业新 ...

  5. Spring官方RSocket Broker 0.3.0发布: 快速构建你的RSocket架构

    ​简介:Spring官方的RSocket Broker其实开发已经非常久了,我以为会伴随着Spring Cloud 2021.0发布的,但是没有发生.不过Spring RSocket Broker还是 ...

  6. 阿里云徐立:面向容器和 Serverless Computing 的存储创新

    ​简介:以上为大家分享了阿里云容器存储的技术创新,包括 DADI 镜像加速技术,为容器规模化启动奠定了很好的基础,ESSD 云盘提供极致性能,CNFS 容器网络文件系统提供极致的用户体验. 作者:徐立 ...

  7. “2021ISIG中国产业智能大会低代码峰会”即将开幕,钉钉宜搭叶周全受邀出席

    ​简介:2021年12月8-9日,"2021ISIG中国产业智能大会" 将在上海举行.阿里巴巴资深技术专家,钉钉宜搭创始人叶周全将作为特邀嘉宾出席大会. 2021年12月8-9日, ...

  8. 获国际架构顶会ATC2021最佳论文!Fuxi2.0去中心化的调度架构详解

    简介: 近日,在国际体系架构顶会USENIX ATC2021上,阿里云飞天伏羲团队与香港中文大学合作的一篇论文<Scaling Large Production Clusters with Pa ...

  9. 性能提升3倍、时延降低70%,阿里云企业级存储ESSD云盘再升级!

    9月22日,阿里云存储年度新品发布会上,阿里云基础产品资深产品总监陈起鲲发布了其全球领先的旗舰级块存储产品ESSD的两款新规格(ESSD Auto PL.ESSD PL-X),并宣布了新增的多项企业级 ...

  10. 4.k8s-配置网络策略 NetworkPolicy

    一.基本了解 官方文档:https://kubernetes.io/zh-cn/docs/concepts/services-networking/network-policies/基本了解: 1.网 ...