JavaScript语法形式1行内式

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<!--

行内式 --- 与css的行内式基本相同

在标签中,通过 script标签来定义JavaScript代码

但是实际操作中,一般是通过定义事件来定义JavaScript程序代码

这样的行内式,我们在实际项目中基本不会使用

只要了解即可

-->

//onclick是js点击事件

<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>

function fun2(){

const oA = document.querySelector('#a1');

oA.style.color = 'orange';

}

</script>

</body>

</html>

posted on 2020-11-03 23:46 Tsunami黄嵩粟阅读(635) 评论(0) 编辑收藏举报