000 在什么位置写js代码
一：介绍
1.DOM
2.节点分类
节点及其类型:
1). 元素节点
2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作.
3). 文本节点: 是元素节点的子节点, 其内容为文本.
二：JS的位置
0.新建静态web项目
1.第一种方式
在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,
该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.
2.程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//onload的使用方式
window.onload=function(){
var bt=document.getElementsByTagName("button")[0];
bt.onclick=function(){
alert("have click on");
}
}
</script>
</head>
<body>
<button>click on me</button>
</body>
</html>
3.运行效果
4.第二种方式
直接在html代码程序里写js。
缺点:
①. js 和 html 强耦合, 不利用代码的维护
②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然后再在 onclick 属性中完成对函数的引用, 比较麻烦
5.程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button onclick="alert('hello JS 2')"></button>
</body>
</html>
6.运行结果
7.第三种方式
将js直接放在html文档的后部分，这样在html文档加载完成后再加载js。
但是，不符合习惯。
8.程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button>click on me</button>
<script type="text/javascript">
var bts=document.getElementsByTagName("button");
bts[0].onclick=function(){
alert("hello js 3");
}
</script>
</body>
</html>
9.运行结果
三：问题
1.这里缺少的第四种方式
将js与html代码分开的第四种方式，有空将补充完整。
000 在什么位置写js代码的更多相关文章
- html文件在head标签中引入js地址和直接写js代码，所用时间是不同的，因为引入js地址，文件加载的时候需要通过通讯协议去解析地址，读取外部文件
html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件
- Asp.net mvc怎么在razor里写js代码
我试图在Razor里写JS代码,但是不行 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 3 ...
- 在wxml中直接写js代码(wxs)
我们在h5开发中,很多时候要在html中写到js代码,这个很容易实现.但是在微信小程序开发中,是不能直接在wxml中写js代码的,因此就有了wxs.在wxml中用wxs代码,有以下几种方式(在小程序文 ...
- 手写js代码（一）javascript数组循环遍历之forEach
注:原文地址http://blog.csdn.net/oscar999/article/details/8671546 我这里是仿照学习! 1.js的数组循环遍历 ①数组的遍历首先想到的是for()循 ...
- 在HTML标签的事件后面直接写JS代码
<input type="button" onclick="document.getElementdByTagName('div')[0].innrtHTML='S ...
- 找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分
找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...
- 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！
原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...
- 也谈谈规范JS代码的几个注意点
也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品,你希望它保持一份不仅干净而且也优 ...
随机推荐
- 使用 docker 创建自己的镜像
docker run 命令 镜像(image):An image is a filesystem and parameters to use at runtime. It doesn't have s ...
- 伸展树（Splay）复杂度证明
本文用势能法证明\(Splay\)的均摊复杂度,对\(Splay\)的具体操作不进行讲述. 为了方便本文的描述,定义如下内容: 在文中我们用\(T\)表示一棵完整的\(Splay\),并(不严谨地)用 ...
- sqlite3数据库的简要应用
Sqlite3数据库升级方案的变化. 1, 若是讲要升级的数据库版本更高,则从低版本数据库中拷贝与新数据库相同字段的内容,其他字段按照默认值创建.A->B->C这样逐个版本升级,每个版本 ...
- 生成器python
一.列表生成式 需求:看列表[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],我要求你把列表里的每个值加1,你怎么实现?你可能会想到2种方式 >>> a [0, 1, 2 ...
- pyspider框架的599证书问题
使用PySpider 框架出现错误 HTTP 599: SSL certificate problem: unable to get local issuer certificate,如下 HTTP ...
- Spark记录-Scala语句（运算符-if-for-while-try-模式匹配）
Scala条件运算符 Scala条件运算符在下表中列出. 运算符 操作 描述 && 与 运算符左侧和右侧的值为true.仅当左侧为真时,右侧才被计算. || 或 左侧或右侧的至少一个值 ...
- Repeater控件的分页实现
本文讲解Repeater控件与PagedDataSource相结合实现其分页功能.PagedDataSource 类封装那些允许数据源控件(如 DataGrid.GridView)执行分页操作的属性. ...
- HDU 4502 吉哥系列故事——临时工计划（一维动态规划）
题意:吉哥的假期是1到n天,然后有m个工作可以让吉哥选择做,每个工作都有一个开始 t_s 和结束的时间 t_e ,都用天来表示,然后每个工作必须从第一天做到最后一天, 从头到尾做完之后就可以得到 ...
- 【逆向知识】裸函数(Naked函数)
1 说明 指定裸函数编写的函数,编译器生成不带任何多余代码. 利用此功能,可以使用内联汇编程序代码编写自己的 prolog/epilog 代码序列. 裸函数对于编写虚拟设备驱动程序特别有用. 2 练习 ...
- 基于Consul的数据库高可用架构【转】
几个月没有更新博客了,已经长草了,特意来除草.本次主要分享如何利用consul来实现redis以及mysql的高可用.以前的公司mysql是单机单实例,高可用MHA加vip就能搞定,新公司mysql是 ...