JavaScript代码书写位置
- 内嵌:书写在script元素中
Javascript脚本代码可被放置在HTML页面的<body>和<head>部分中,或者同时存在于两个部分中。
通常的做法是把函数放入<head>部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
- 外联:将样式书写到独立的js文件中
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部JavaScript文件的文件扩展名是.js。
如需使用外部文件,请在<script>标签的”src”属性中设置该.js文件:
JavaScript的输出
JavaScript 可以通过不同的方式来输出数据:
-
使用window.alert() 弹出警告框。
-
使用document.write()方法将内容写到HTML文档中。
-
使用innerHTML写入到HTML元素。
-
使用console.log()写入到浏览器的控制台。
浏览器中使用F12来启用调试模式,在调试窗口中点击”Console”菜单。
JavaScript 语法
JavaScript字面量:
- 数字(Number)字面量——可以是整数或者是小数,或者是科学计数(e)。
- 字符串(String)字面量——可以使用单引号或双引号。
- 表达式字面量——用于计算。
- 数组(Array)字面量——定义一个数组。
- 对象(Object)字面量——定义一个对象。
- 函数(Function)字面量——定义一个函数。
JavaScript变量&语句&注释:
JavaScript使用关键字var来定义变量, 使用等号来为变量赋值
语句使用分号分隔(使用分号的另一用处是在一行中编写多条语句)。
单行注释以 // 开头;多行注释以 /* 开始,以 */ 结尾。
JavaScript 操作符:
类型 | 实例 | 描述 |
---|---|---|
赋值,算术和位运算符 | = + – * / | 在JS运算符中描述 |
条件,比较及逻辑运算符 | == != < > | 在JS比较运算符中描述 |
JavaScript关键字:
注意:JavaScript对大小写是敏感的。
JavaScript中,常见的是驼峰法的命名规则。
JavaScript变量
命名规则:
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
- 变量名称对大小写敏感(y和Y是不同的变量)
声明(创建)变量的规则:
- 声明变量
var carname;
- 向变量赋值
carname="Volvo";
- 声明变量时对其赋值
var carname="Volvo";
JavaScript typeof
可以使用typeof操作符来检测变量的数据类型。
- 用typeof检测null返回是object。
- 用typeof检测undefined返回undefined。
undefined和null的区别:null和undefined的值相等,但类型不等。
innerHTML
‘innerHTML’是JavaScript中用于获取或设置HTML元素内容的属性。它允许你动态地修改一个HTML元素的内容,包括其子元素、文本和标记。
获取元素的HTML内容
var element = document.getElementById('exampleElement');
var content = element.innerHTML;
console.log(content);
设置元素的HTML内容
var element = document.getElementById('exampleElement');
element.innerHTML = '<p>新的内容</p>';
Document对象中的方法介绍
属性 / 方法 | 描述 |
---|---|
document.getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
document.getElementsByName() | 返回带有指定名称的对象集合。 |
document.getElementsByTagName() | 返回带有指定标签名的对象集合。 |
document.getElementsByClassName() | 返回文档中所有指定类名的元素集合,作为 NodeList 对象。 |
getElementById()方法
返回对拥有指定ID的第一个对象的引用。
如果没有指定ID的元素返回null
如果存在多个指定ID的元素则返回第一个。
常用的样式更改命令:
- 改变背景颜色:style.backgroundColor
- 改变字体大小:style.fontSize
- 改变字体样式:style.fontFamily
- 改变元素的显示方式:style.display
- 改变元素的宽度和高度:style.width / style.height
- 改变边框样式:style.border
- 改变文本对齐方式:style.textAlign
- 改变内边距和外边距:style.padding / style.margin
getElementsByClassName()方法
返回文档中所有指定类名的元素集合,作为NodeList对象。
NodeList对象代表一个有顺序的节点列表。NodeList对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
提示: 你可以使用NodeList对象的length属性来确定指定类名的元素个数,并循环各个元素来获取你需要的那个元素。
getElementsByName()方法
返回带有指定名称的对象的集合。
getElementsByTagName()方法
返回带有指定标签名的对象的集合。
提示:参数值”*”返回文档的所有元素。
在HTML中,标签名是不区分大小写的,因此在document.getElementsByTagName(“p”)中的标签名”p”是不区分大小写的。
原文地址:https://blog.csdn.net/weixin_42071236/article/details/135204608
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_54909.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!