<!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. PTA三次作业

    1.前言: 第一次作业难度较大,从无到有的设计,涉及到的主要类有Paper,Question,AnswerPaper,Main,主要题目方向为字符串判断与字符串处理(提取有效信息),判断对错算总分,配 ...

  2. idea引用lombok一直不成功

    idea引用lombok一直不成功 比如想使用lombok的@data注解一直报错,尽管已经声明了import lombok.Data,且在pom里面也增加了lombok依赖,但是就是不成功的时候 建 ...

  3. 剑指offer38(Java)-字符串的排列（中等）

    题目: 输入一个字符串,打印出该字符串中字符的所有排列. 你可以以任意顺序返回这个字符串数组,但里面不能有重复元素. 示例: 输入:s = "abc"输出:["abc&q ...

  4. 实时数仓入门训练营：Hologres性能调优实践

    简介: <实时数仓入门训练营>由阿里云研究员王峰.阿里云资深技术专家金晓军.阿里云高级产品专家刘一鸣等实时计算 Flink 版和 Hologres 的多名技术/产品一线专家齐上阵,合力搭建 ...

  5. 37 手游基于 Flink CDC + Hudi 湖仓一体方案实践

    ​简介: 介绍了 37 手游为何选择 Flink 作为计算引擎,并如何基于 Flink CDC + Hudi 构建新的湖仓一体方案. 本文作者是 37 手游大数据开发徐润柏,介绍了 37 手游为何选择 ...

  6. [Go] 选择 Beego 的三个理由

    1. 项目支持角度较其它框架考虑的多一些,比如:目录结构的简单约定,内置项目配置读取,内置bee脚手架,热重载特性 等. (实际这些 feature 都可以找到 golang 专精的组件引入起来,效果 ...

  7. 【Android】Binder的Oneway拦截

    在某些虚拟化,免安装,打点,环境检测,拦截器等场景,针对Android系统服务接口的拦截是常用的技术方案.通常只是针对正向的接口调用,如果涉及被动的服务回调拦截,则实现起来就有些许麻烦. 说明 由于我 ...

  8. idea在商店无法搜索到插件

    背景:我使用的版本是IDEA ultimate 2019.2 版本印象中,最初安装的时候,商店还是可以用的,突然有一天,就无法使用了.下边直入正题: 解决办法:1.首先浏览器登陆下:https://p ...

  9. 小程序 image 高度自适应及裁剪问题

    在做微信小程序的商品详情页,商品的详情是图片集合,渲染完成后发现图片加载的很不自然,后来我把样式设置宽度 100%,并对 image 组件添加属性 mode="widthFix"解 ...

  10. 密码学—仿射密码Python程序

    文章目录 仿射密码 加密算法 解密算法 仿射密码 古典密码,且属于单表加密. 加密算法 仿射密码公式 c = m×k + b mod 26 c是密文,m是明文,m作为26字母中的明文,因此计算出来的密 ...