JavaScript学习笔记001-变量0获取和操作标签
Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
JS学习
逻辑思维太重要了
学的我几天不想说话
不像html+css
可以直接硬杠
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meat charset='UTF-8'/> <!-- 网页字符编码 -->
<meat name='Keywords' content='关键词1,关键词2'/>
<meat name='Description' content='网站说明'/>
<meat name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
</style>
</head>
<body> <!-- 网页主干：可视化区域 -->
<div id='box01'></div>
<p id='text01'></p>
<script>
// 写JS代码必须严格区分大小写
/* JS代码可以放在html的任何位置，内部写入时规范方法为<body>标签里的最下面（html解析方法为从上至下）
window.onload = function (' ') {
} // 全部窗口资源加载完成后再运行此JS
<script src='./js/js.js' defer='defer'></script> // 比window.onload提前一级
*/
// es6 基本全 ie 不兼容
/*
变量名取名规范：
1.不能纯数字
2.不能以数字开头
3.严格区分大小写
4.不能使用关键字和保留字
5.可以使用部分符号取名（最好是英文符号）
6.不可以使用运算符
7.不推荐使用中文名
*/
// 申明变量的关键词： var let const
// 一个环境下变量名只需要申明一次
// 变量第一次使用时必须声明，后续使用不需要再次声明
// 变量关键字 变量名 = '值'
// JS变量为 = 右边给 = 左边赋值
// 有特殊意义的右边值不能带引号，带引号的为文本值
// 写在JS最外层的为全局变量
// var 声明的全局变量会成为window的属性
// let 和 const 声明的全局变量不会成为window的属性
// var 先使用再声明不会报错，let 和 const 先使用再声明会报错
// let 声明的为变量，const声明的为常量
var a = 1;
a = 9; // 变量可以重新赋值
let b = 2;
b = 5; // 变量可以重新赋值
const c =3;
// div01 代表id值为box的div标签本体
let div01 = document.getElementById('box01');
let p01 =document.getElementById('text01');
// DOM0级事件（对象 . 事件），同类事件只能绑定一次
div01.onclick = function () {
}
// 测试输出的方法
alert('弹窗提示信息');
console.log('打印内容');
// JS获取标签的信息
console.log(div01); // 获取标签本身
console.log(div01.id); // 获取标签的id
console.log(div01.style.width); // 获取标签的样式（行内样式）
// JS获取需要操作的标签的权限
document.getElementById('box01'); // 通过id获取操作标签的权限
// JS操作（div有一个点击事件 = 把要做的事情记录下来）
document.getElementById('box01').onclick = function () {
// 大括号里写入要做的事情
alert('弹窗提示信息'); // 要做的事：浏览器弹窗
// 再次操作标签需要再次获取操作权限
document.getElementById('box').innerHTML = '在标签里写入内容'; // innerHTML 会解析标签 innerText 会全部解析成文本
// 操作标签改变样式（行内样式）
div01.style.width = '500px';
div01.style.height = '200px';
div01.style.backgroundColor = 'red';
div01.style.cssText = 'width:500px;height:200px;background-color:red;'; // 多条属性样式
p01.innerHTML = '123'; // 可以改变其他拿到权限的标签
}
// 注意：设置p01.innerHTML的值注意点
let str = p01.innerHTML;
str = 123; // 重置：变量的值
// 要改变谁的值，就赋值给谁
p01.innerHTML = 123;
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018.06.17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
