js基础操作
// 函数的嵌套定义, 定义在内部的函数就称之为 闭包 // 1.一个函数要使用另一个函数的局部变量 // 2.闭包会持久化包裹自身的函数的局部变量 // 3.解决循环绑定 function outer() { var num = 10; function inner() { // 闭包 // 1.在inner函数中,使用了outer的局部变量num return num; } return inner; } var innerFn = outer(); // 2.借助闭包,将局部变量num的生命周期提升了 var num = innerFn(); console.log(num);
var obj={ name:'xxx', teach:function () { console.log('教学') } }; console.log(obj.name); obj.teach();
2.构造函数
function Person(name) { // 类似于python中的类一样来使用 // this代表Person构造函数实例化出的所有具体对象中的某一个 this.name = name; this.teach = function () { console.log(this.name + "正在教学"); } } // ①通过构造函数实例化出具体对象 // ②通过对象.语法调用属性与方法 var p1 = new Person("张三"); p1.name // 张三, this指向p1对象 var p2 = new Person("李四"); p2.teach // 李四正在教学, this指向p2对象
3.ES6类语法
class Student { // 需要构造器(构造函数)来完成对象的声明与初始化 constructor (name) { // 属性在构造器中声明并完成初始化 this.name = name; } // 类中规定普通方法 study () { console.log(this.name + "正在学习"); } // 类方法 static fn() { console.log("我是类方法") } } // 类中的普通方法由类的具体实例化对象来调用 // 类中的类方法由类直接来调用(这类型的方法大多是功能性方法,不需要对象的存在)
class Tool{ static max(num1,num2){ return num1>num2 ? num1:num2; } } console.log(Tool.max(6616,999));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js选择器</title>
<style>
#d {
color: red;
}
</style>
</head>
<body id="bd">
<!--注释-->
<div id="d" class="dd">我是ddd111</div>
<div id="d" class="dd">我是ddd222</div>
<div class="sup1">
<div id="div"></div>
</div>
<div class="sup2">
<div id="div"></div>
</div>
</body>
<script>
// 节点(了解): 在文档(document)中出现的所有内容都是document中的节点
// 节点(node): 标签节点(元素element) | 注释节点 | 文本节点 | <!doctype>节点
console.log([bd]) // 文本 注释 文本 标签 文本 标签 文本 标签 文本 标签 文本
</script>
<script>
// js选择器: 将js与html建立起连接
// js中一般称标签为页面元素
// 1.直接通过id名进行匹配
console.log(d); // 两个都可以找到
// 2.getElement系列(最严谨)
// 所有显示在页面中的内容(展现给用户看的), 都是属于文档(document)对象的内容, 存放在文档中
// console.log(document)
// 获取文档中的标签 => document对象通过.语法去获取具体的目标标签元素
// ① id
var div = document.getElementById('d'); // 检索得到页面中出现的第一个满足条件的目标
console.log(">>>", div);
var body = document.getElementById("bd");
console.log(body);
// 注: getElementById该方法只能由document来调用
// 原因: 我们需要保证一个文档中一个id只能出现一次, document检索的就是文档,
// 而某父级标签只能检索自身标签内部区域, document可以保证文档中只能一个id
// 只出现一次,某父级标签只能保证自身内部区域id不重复,能不能保证与外界不重复?
// 不能, 所以从安全角度出发, 获取唯一对象的getElementById方法只能由能确定唯一id的
// 对象来调用, 能被document调用, 不能被sup来调用
// ② 类名
var divs = document.getElementsByClassName('dd');
console.log(divs);
// 两个div在body之中, 上方已经获取了body, 那能否通过body来获取body中的div
var divs1 = body.getElementsByClassName('dd');
console.log(divs1);
// ③ 标签名
var divs = document.getElementsByTagName('div');
console.log(divs)
console.log('--------------------------------------------------');
// 3.querySelector系列(最方便)
// 参数: 就是css选择器语法
// querySelector检索第一个
var div = document.querySelector('body > .dd');
console.log(div);
// querySelectorAll检索所有满足结果
var divs = document.querySelectorAll('body > .dd');
console.log(divs);
var divs = body.querySelectorAll('.dd');
console.log(divs)
var divs = body.querySelectorAll('#d'); // 不严谨
console.log(divs)
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件初识</title>
<style>
.div {
width: 200px;
height: 200px;
background-color: coral;
}
</style>
</head>
<body>
<div class="div"></div>
<div class="div"></div>
</body>
<script>
// js事件: 页面标签在满足某种条件下可以完成指定功能的这种过程, 成之为事件
// 某种条件: 如鼠标点击标签: 点击事件 | 鼠标双击标签: 双击事件 | 键盘按下: 键盘按下事件
// 指定功能: 就是开发者根据实际需求完整相应的功能实现
// 钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能)
// 点击事件: 明确激活钩子的条件 = 激活钩子后改处理什么逻辑, 完成指定功能(函数)
var div = document.querySelector(".div"); // 找到的是第一个.div
div.onclick = function () {
// alert(123)
this.style.backgroundColor = "pink";
}
// 明确第一个及第二个
var divs = document.querySelectorAll('.div');
divs[1].ondblclick = function () {
divs[0].style.backgroundColor = "yellow";
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS处理页面内容</title>
<style>
div {
width: 100px;
height: 100px;
background-color: cyan;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="d1">001</div>
<div class="d2">002</div>
<div class="d3">003</div>
<div class="box"></div>
</body>
<script>
// 先获取页面元素
var d1 = document.querySelector('.d1');
var d2 = document.querySelector('.d2');
var d3 = document.querySelector('.d3');
// ① 操作文本内容
var text = d1.innerText;
// 获取内容
console.log(text);
// 修改(删除)内容
d1.innerText = "";
d1.innerText = "修改后的文本内容";
// ② 操作子标签
// 获取
var html = d2.innerHTML;
console.log(html)
// 修改
d2.innerHTML = "<b>加粗的文本</b>"; // 可以解析html语法的代码
// d2.innerText = "<b>加粗的文本</b>";
// 了解
console.log(d2.innerHTML); // 只是标签内部的子标签与子内容
console.log(d2.outerHTML); // 不仅包含标签内部的子标签与子内容,还包含自身标签信息
// ③ 操作页面样式
// 获取 ??
var bgColor = d3.style.backgroundColor; // 只能获取行间式
console.log(bgColor);
// 修改
d3.style.backgroundColor = "yellow"; // 只能修改行间式
// 问题: 那用内联外联设置的样式如何获取
// 内联与外联设置的样式叫: 计算后样式
// getComputedStyle(目标标签, 伪类(null填充)).具体的样式
bgColor = window.getComputedStyle(d3, null).backgroundColor; // 兼容性较差
console.log(bgColor);
// 可以获取计算后样式, 也可以获取行间式, 但它为只读
bgColor = getComputedStyle(d3, null).getPropertyValue('background-color'); // 兼容性较好
console.log(bgColor);
// 一些不常用的属性会出现浏览器之间的兼容问题, 通过添加前缀来处理
console.log(d3.style);
// chrome: -webkit-
// ie: -ms-
// opera: -o-
</script>
<script>
// 需求: box的颜色通过点击在cyan与red之间切换
var box = document.querySelector('.box');
box.onclick = function () {
var bgColor = getComputedStyle(this, null).backgroundColor;
console.log(bgColor);
// 要注意计算后样式获取的结果, 以及结果具体的字符串格式
if (bgColor == 'rgb(0, 255, 255)') {
this.style.backgroundColor = 'red';
} else {
this.style.backgroundColor = 'cyan';
}
}
</script>
</html>
文本内容:box.innerText 可以设值, 也可以获取值
标签内容:box.innerHTML,可以设值, 也可以获取值, 能解析html语法代码/box.outerHTML,获取包含自身标签信息的所有子内容信息
样式:box.style.样式名 ==> 可以设值,也可以获取,但操作的只能是行间式/getComputedStyle(box, null).样式名 ==> 只能获取值,不能设值, 能获取所有方式设置的值(行间式 与 计算后样式)
注: 获取计算后样式,需要关注值的格式
