js导读
'''
js属于编写运行在浏览器上的脚本语言(相当于具有逻辑的代码)
一个完整的JavaScript实现应该由以下三部分组成:1)ECMAScript:核心 2)DOM:文档对象模型 3)BOM:浏览器对象模型
js采用ECMAScript语法
操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录
操作DOM:文档对象模型
'''
js引入
<style>
#box, #wrap, #temp, #res {
width: 200px;
height: 200px;
background-color: red;
margin-top: 10px;
}
</style>
<!--1.行间式: js代码块也就是脚本书写在事件的全局属性中-->
<!--this就是激活该代码块(脚本)的页面标签(页面元素对象)-->
<div id="box" onclick="this.style.borderRadius = '10px'"></div>
<div id="wrap" onclick="this.style.backgroundColor = 'orange'"></div>
<!--2.内联式-->
<div id="temp"></div>
<!--操作写在下面-->
<script>
// id为标签的唯一标识, 使用可以识别到html中的具体标签
temp.onclick = function () { // 完成某一项功能
this.style.width = "400px"; // this => temp
}
</script>
<!--3.外联式-->
<div id="res"></div>
<script src="js/1.js">
// js/1.js
res.onclick = function () { // res点击会触发一个功能
this.style.height = "100px"; // this => res
this.style.backgroundColor = "yellow";
this.style.borderRadius = "50%";
<script></script> 写在 </body>与</html>之间
js选择器
<body>
<div id="box"></div>
<div id="box"></div>
</body>
<script>
box.onclick = function () {
this.style.borderRadius = "50%";
}
</script>
//上述结果一个都匹配不到
//注意:虽然id可以重复,但是js中却无法唯一标识识别,为了可以唯一标识识别,我们要确保标签id名的唯一性
// document对象 文档对象:整个页面中的所有对象,通过document可以获取文档中的所有对象
//getElement系列选择器
<body>
<div id="box"></div>
<div id="box"></div>
</body>
<script>
document.getElementById('box').onclick = function () {
this.style.borderRadius = "50%";
}
</script>
// 上述操作能获得到第一个id="box", 但是第二个永远取不到, 所以id还是不能重复
js中如何定义变量名?
关键字 变量名 = 变量值
var num = 10;
如何查看变量名?
不能用print(num),这个操作是调用浏览器使用打印机
①弹出框查看 alert(num)
②浏览器控制台查看 console.log(num);
③将内容书写在页面中 document.write(num);
④断点调试
②④使用的比较多
<div id='box'></div>
<div id='box'></div>
<div class='box1'></div>
<div class='box1'></div>
<div class="box2">1</div>
<div class="box2">2</div>
<script>
// getElement系列
//①通过id查找
// box 获取的是第一个box
var box = document.getElementById('box');
console.log(box) #结果:<div id='box'></div>
box.onclick = function () {
this.style.backgroundColor = "red";
}
//②通过类名查找=>类名可以重复,获取结果是数组(列表)
// [] | [.box1] | [.box1, ..., .box1]
var boxs = document.getElementsByClassName('box1');
console.log(boxs) #结果:[div.box1, div.box1]
boxs[0].onclick = function () {
this.style.backgroundColor = "pink";
}
boxs[1].onclick = function () {
this.style.backgroundColor = "black";
}
//③通过标签名查找=>标签名=>获取结果数组(列表)
// [] | [div] | [div, ..., div]
var divs = document.getElementsByTagName('div');
console.log(divs) #结果:[div#box, div#box, div.box1, div.box1, div.box2, div.box2, box: div#box]
divs[1].onclick = function () {
this.style.borderRadius = "50%";
}
// 总结: 参数采用的是id名或类名或标签名,不需要带符号(#|.)
</script>
<script>
// 只能获取检索到的第一个满足条件的标签(元素对象)
var box2 = document.querySelector('body .box2');
console.log(box2)
box1.onclick = function () {
this.style.borderRadius = "50%";
}
// 获取的是所有满足条件的标签
var boxes = document.querySelectorAll('body .box2');
console.log(boxes)
boxes[0].onclick = function () {
this.style.backgroundColor = "pink";
}
boxes[1].onclick = function () {
this.style.backgroundColor = "black";
}
// 总结: 参数采用的就是css选择器语法
</script>
事件
var box = document.querySelector('.box');
// 元素对象.事件名 = 函数
box.onclick = function() {
// 具体功能代码块; this代表就是激活该事件的元素对象
this.style.color = 'red'; // 将box的字体颜色修改为红色
}
操作页面文档
// 1. 通过选择器获取页面元素对象(指定的标签)
// 2. 为该对象绑定事件
// 3. 通过事件中的功能操作元素对象
// i) 修改内容: innerText | innerHTML
// ii) 修改样式
// iii) 修改类名
var box = document.querySelector('.box'); // 获取页面元素
box.onclick = function () { // 绑定事件
// 修改内容
// this.innerText = "innerText"; // 不能解析html标签
// this.innerHTML = "<i>innerHTML</i>"; // 可以解析html标签
// 修改样式 => 修改的是行间式 => 优先级高于所有内联外联样式(没有设置!important前提下)
// this.style.color = "green";
// this.style.fontSize = "12px";
// 修改类名
// this.className = "box1"; // 直接修改类名, 会丢失之前类名下的属性们
// 在原类名基础上添加类型
this.className += " box1"; // 多类名之间用空格隔开, 所有做字符串拼接时一定需要添加空格
// 清除类名
this.className = ""; // 将类名等于空字符串就是置空类名
}
计算后样式
//什么是计算后样式?内联式和外联式书写的样式都是计算后样式
// 如何获取提取设置好的样式属性值
var box = document.querySelector('.box');
var ftSize = box.style.fontSize; // 这种方式操作的永远是行间式
console.log(">>>>>>>>>>>>>>>>" + ftSize);
// 内联或外联设置(getComputedStyle也能获取到行间式的设置)
.box {
font-size: 100px;
}
// 如何获取计算后样式
// getComputedStyle(元素对象, 伪类).属性名
var box = document.querySelector('.box');
var ftSize = getComputedStyle(box, null).fontSize;
console.log(ftSize); // 100px
数据类型
// 1.定义变量
var num = 10;
var s = "hello js";
console.log(num, "<<>>", s);
console.log("%d %s", num, s);
// 将字符串赋值给页面元素对象,直接在页面上打印
box.innerText = s;
//命名规范：
// 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
// 区分大小写
// 不能出现关键字及保留字
// var var = 30; // 出错
值类型
// Number: 数字类型
var a1 = 10;
var a2 = 3.14
// String: 字符串
var s1 = "123";
var s2 = '456';
// undefined: 未定义
var u1;
var u2 = undefined;
// Boolean: 布尔
var b1 = true;
var b2 = false;
// typeof() 来查看数据类型
eg:console.log(a1,typeof(a1));
注意:js不直接操作内存
引用类型
// Object:对象类型=>可以当做字典来使用
var obj = {};
// Function:函数类型
var func = function(){}
// Null =>空对象
var n = null;
常用对象类型
// 数组
a = new Array(1, 2, 3, 4, 5);
a = [5, 4, 3, 2, 1]; // 语法糖
// 时间对象
var a = new Date();//当前时间
// a = new Date("2019-3-1 12:00:00"); // 设定的时间
console.log(a.getFullYear());//年
console.log(a.getDay()); // 周几
console.log(a.getMonth()); // 月份(从0开始)
console.log(a.getDate()); // 几号
// 浏览器cookie 需要前后台交互,存储临时状态 如:过期时间,七天免登陆
//正则
re = /\d{2}/g;
res = 'a1b23c456'.match(re);
console.log(res);
结果:(2) ["23", "45"]
re =/[abc]/gi; //a或b或c
res = 'aBc'.match(re);
console.log(res);
结果:(3) ["a", "B", "c"]
// 总结:
// 1.正则 /正则语法/
// 2.参数g 全文匹配
// 3.参数i 不区分大小写
数组与对象（字典）的使用
var arr = [3,5,2,1,4];
console.log(arr[1]);
var dic = {'name':'henry','age':18,'little-name':'zz'};
console.log(dic['name']);
console.log(dic['age']);
console.log(dic.name);
console.log(dic.age);
console.log(dic['little-name']);
// dic中所有的key都是string类型, value可以为任意类型
// dic中key可以通过中括号及 .语法访问值,当key不满足js命名规范时,只能使用中括号语法