JavaScript学习笔记002-数据类型0字符串拼接
程序员文章站
2022-04-27 08:17:04
...
Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
仿佛回到了初中时代
[十位] [个位] [几何] [子集] [大圆] [小圆] [元素] [下标] [分子] [分母] [分数] [中点] [约分] [加数] [减数]
[数位] [通分] [除数] [商数] [奇数] [偶数] [质数] [合数] [算式] [进率] [因式] [因数] [单价] [数量] [约数]
[正数] [负数] [整数] [倒数] [乘方] [开方] [底数] [指数] [平方] [立方] [数轴] [原点] [余数] [除式] [商式]
[整式] [系数] [方程] [等式] [变号] [解集] [分式] [实数] [根式] [对数] [真数] [横轴] [纵轴] 函数 常显 变量
[正弦] [余弦] [正切] [余切] [正割] [余割] [集合] [数集] [点集] [空集] [原象] [交集] [并集] [差集] [映射] [端点]
[全集] [补集] [值域] [乘法口诀] [循环小数] [无限小数] [有限小数] [简易方程] [四舍五入] [单位长度] 加法法则
减法法则 [乘法法则] [除法法则] [数量关系] [升幂] [降幂] [分解因式] 完全平方 完全立方 逆否命题 数理逻辑
命题演算 斯科伦壳 递归结构 策梅洛弗兰克尔集合论 哥德尔配数法 图灵机 施泰纳三元系 阿达马矩阵
......
这就是js
函数第一的计算机语言
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meta charset='UTF-8'/> <!-- 网页字符编码 -->
<meta name='Keywords' content='关键词1,关键词2'/>
<meta name='Description' content='网站说明'/>
<meta 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='box' class='box01'>123456</div>
<div class='box01'>
<p>123</p>
</div>
<div class='box01'>
<p>456</p>
</div>
<div class='box01'></div>
<p>789</p>
<input type='text' name='sex'>
<input type='text' name='sex'>
<input type='text' name='sexnv'>
<script>
// 独有标签可以直接取名字 document.tagName
document.body
// 获取标签的方式
// id
let div01 = document.getElementById('box');
div01.onclick = function () {
console.log('id名为box的div');
}
// class
let divS = document.getElementsByClassName('box01'); // 元素集合 类数组
divS [2].onclick = function () { // 集合取值：序号0开始 [ ]
console.log('第三个class名为box01的div');
}
// 标签名
let div02 = document.getElementsByTagName('div'); // 元素集合 类数组
div02 [0].onclick = function () { // 集合取值：序号0开始 [ ]
console.log('第一个class名为box01的div');
}
// 表单属性名
let ipt = document.getElementsByName('sex'); // 元素集合 类数组
ipt [0].onclick = function () { // 集合取值：序号0开始 [ ]
console.log('第一个name属性为sex的input');
}
// 选取全部符合条件的元素
let pS = document.querySelectorAll('div p'); // 元素集合 类数组
pS [1].onclick = function () { // 集合取值：序号0开始 [ ]
console.log('第二个在div标签里的p');
}
// 选取第一个符合条件的元素
let p01 = document.querySelector('div p');
p01.onclick = function () {
console.log('第一个在div标签里的p');
}
// 数据类型：用来区分数据
es5
number 数值型
string 字符串
boolean 布尔值 真值：true 假值：false
undefined undefined
null null
object 对象：没有在以上类型里找到的类型都是对象
es6
symbol 符号
// typeof 运算符：间接用来判断数据类型（函数和null返回会出问题）
let num = 123;
let str = '123'; // 引号内都为字符串
let bool = true;
let a; // 声明但没赋值为undefined
let b = null; // 赋值为空对象指针
let fn = function () {} // 函数：object，在js里处于第一等地位
let arr = [123,'1234',null,function () {}] // 数组：object
console.log(arr[2]); // 数组取值
console.log(arr.length); // 数组的长度（数组和类数组都有长度属性）
let obj = {
num:123,
str:'123',
fn:function () {},
2:123,
} // JSON对象 object 值（键值对） 无序值 值名可以数字开头命名
console.log(obj.2);
console.log(typeof str); // 输出判断数据类型
// 字符串拼接
div01.onclick = function () {
let str = div01.innerHTML; // str获取了div01的div里的内容123456
div01.innerHTML = str + '123'; // innerHTML获取了'123456' + '123'（123456123）
// 当再次点击时，获取的是现在的值'123456123' + '123'（123456123123）
......
// 第二种写法
div01.innerHTML = div01.innerHTML + '123'; // 遇到等号先看右边，右边先执行，然后赋值给左边
div01.innerHTML += '123'; // 缩写方法
}
</script>
</body>
</html>
上一篇： 命名规则和基本数据类型