版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xyyojl/article/details/82764783
- 一个对象添加多个样式
- 获取元素的其他方式
- 得出获取元素的相关结论
- 字符串拼接
- 数据类型
###一个对象同时添加多个样式
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{ margin: 0; padding: 0;}
#box{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let oBox = document.getElementById("box");
oBox.onmouseenter = function(){
//当鼠标移入时,这个对象的背景颜色发生改变
oBox.style.backgroundColor = "red";
//当要添加多个样式时,可以采取下面的方法
//需要注意单样式需要按照css的写法书写,不需驼峰命名
oBox.style.cssText = "width: 200px; height: 200px; background-color: yellow;"
}
</script>
</body>
</html>
获取元素的其他方式
- 特殊标签(直接document.tagName, 不会给它起给名字 )
- document.body
- document.head
- document.title
- 一般标签
- ele.getElementsByClassName() 通过class来获取(集合)
- ele.getElementsByTagName() 通过tagname(标签名)来获取(集合)
- ele.getElementsByName() 通过name来获取(集合)
- ele.querySelect() 匹配css选择器的第一个
- ele.querySelectAll() 匹配css选择器匹配的所有的集合
- ClassName类似于数组,而是类数组/伪数组
下面是展示的是通过class来获取
重点:获取的节点是不是集合,不取决于对象的个数,而是取决于方法
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{ margin: 0; padding: 0;}
</style>
</head>
<body>
<div class="box">01</div>
<div class="box">02</div>
<div class="box">03</div>
<script>
let divS = document.getElementsByClassName("box");
//class 属于关键字,所以方法里面是涉及到ClassName
//因为拥有相同的class有多个,所以要加一个s
//通过class获取的,返回的不是一个具体的标签/元素对象,而是一堆元素的集合,哪怕只有一个,也是集合,就是一个人的队伍
console.log(divS);//打印HTMLCollection(3) [div.box, div.box, div.box, onclick: ƒ]
divS.onclick = function(){
console.log("click");
//这个点击事件无效,因为这是一个集合,而我们的事件需要绑定在一个具体的对象上
}
//给第二个元素添加一个事件,通过中括号[]来选择,中括号里面写入序号,序号从0开始,第几个减1即可
divS[1].onclick = function(){
console.log("click");
}
</script>
</body>
</html>
通过tagname(标签名)来获取(集合)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{ margin: 0; padding: 0;}
</style>
</head>
<body>
<div>01</div>
<div>02</div>
<div>03</div>
<script>
let divS = document.getElementsByTagName("div");
console.log(divS);//HTMLCollection(3) [div, div, div]
divS.onclick = function(){
console.log("click");
//这个点击事件无效,因为这是一个集合,而我们的事件需要绑定在一个具体的对象上
}
//给第一个元素添加一个点击事件
divS[0].onclick = function(){
console.log("tagname");
}
</script>
</body>
</html>
通过name来获取(集合)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{ margin: 0; padding: 0;}
</style>
</head>
<body>
<input type="text" name="psd">
<input type="text" name="psd">
<input type="text" name="user">
<script>
let ipts = document.getElementsByName("psd");
console.log(ipts);
//只有表单元素才有name,才可以使用这个方法
//就是只有一个name叫psd的元素,它还是一个集合,也就是一个人的队伍
</script>
</body>
</html>
匹配css选择器的第一个
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{ margin: 0; padding: 0;}
</style>
</head>
<body>
<div>
<p>123</p>
</div>
<div>
<p>456</p>
</div>
<div>
<p>567</p>
</div>
<p>外面的p</p>
<script>
let p = document.querySelector("div p");
//只返回第一个满足条件的元素
//是一个具体的标签元素
p.onclick = function(){
p.style.color = "red";
}
</script>
</body>
</html>
匹配css选择器匹配的所有的集合
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{ margin: 0; padding: 0;}
</style>
</head>
<body>
<div>
<p>123</p>
</div>
<div>
<p>456</p>
</div>
<div>
<p>567</p>
</div>
<p>外面的p</p>
<script>
let p = document.querySelectorAll("div p");//集合
p[1].onclick = function(){
p[1].style.color = "red";
}
</script>
</body>
</html>
小总结
| 方法 | 返回的结果 |
|---|---|
| ID/ querySelector | 返回具体的标签元素,不需要用序号取值 |
| ClassName,TagName,Name | 这些都是集合,需要序号取值 |
拼接
因为如果直接赋值,就会直接覆盖掉原来的,所以要使用拼接
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{ margin: 0; padding: 0;}
</style>
</head>
<body>
<div id="box">321321</div>
<script>
let oBox = document.getElementById("box");
oBox.onclick = function(){
box.innerHTML = "123"//会直接覆盖的,需要使用到拼接
let str = box.innerHTML;//str代表的是'321321',仅仅是代表那个数据而已
box.innerHTML = str + "123";
console.log(box.innerHTML);
//简写,省略变量的写法,如下
/*
box.innerHTML = box.innerHTML + "123";
box.innerHTML += "123";
//自己加上一个值,再赋值给自己
//前面加后面 赋值给前面
//遇到等号,先看右边,没有等号是,获取,有等号是赋值
*/
}
</script>
</body>
</html>
数据类型
各种各样的数据 都是用来解决不同的应用场景的需求
数据类型其实用来区分的数据
ES5
- number 数值型
- string 字符串/字符型
- boolean 布尔值true/false,真: true,假: false事物都是有两面性,正反,真假
- undfined undfined
- null null
- object 不属于上面的都属于它,收容所
ES6
- 新增的Symbol 符号
面试题:
- javascript有多少种数据类型? 7种
- es5有多少种数据类型? 6种
- es6有多少种数据类型? 7种,es6是在es5的基础上拓展的
- 函数属于什么数据类型? object
typeof 运算符
- typeof并不是直接用来检测数据类型,只能间接用来判断数据类型
- js 并没有一个 官方提供的方法用来检测数据类型
- 就是有些情况(null,function)不准确
//number
let num = 123;//代表123
//string
let str = "123";//代表字符串123
//只要带了引号,甭管里面写啥,都是字符串
//boolean 真: true 假: false
let bool = true;
//undfined
let a; //不知道a到底要保存什么值,代表undfined
//js解释器在js编译阶段,遇到一个变量,只声明没赋值,默认赋值为undfined
//null
let b = null;
console.log(typeof b);//null
//object
//函数
let fn = function(){
//代表数据
}
console.log(typeof fn);//返回function
/*js function 第一等公民,非常重要的,会用函数就学会js
作者设置typeof遇到函数的时候,返回function*/
//数组,可以存储大量的数据
let arr = [1,"123",null,function(){}];
// 快速知道数组的有多少条数据
console.log(arr.length);//代表数据个数的总和，length 长度
//取第一条数据
console.log(arr[1]);
//json对象 ,键值对
//不存在顺序的说法，重名就覆盖了
let obj = {//JSON 对象，一一对应，键值对
num : 1,
str : "123",
fn: function(){},
a : true
};
console.log(obj);
null 和 undefined的区别
| null 和 undefined | 区别 |
|---|---|
| let a; | 未定义，未被初始化的默认值 |
| let b = null; | 空对象,空对象的指针 |
Symbol
let s1 = Symbol("123");//生成符号，生成在js里面独一无二的值
let s2 = Symbol("123");
###小提示:
- id具有唯一性,js里面的id同样具有唯一性,可以直接使用,非常不建议不获取就直接用,别人看你的代码不知道你是哪里获取的,缺乏代码可读性
- 任意一个变量代表数据/值,在内存里面开辟空间,拿到值,通过变量的取到
- 直接使用变量的时候,其实是使用变量值
- 如果我们需要一个变量a,等会在使用这个变量,先声明再使用,默认值给undfined,但是最好给null