js导读
'''
js属于编写运行在浏览器上的脚本语言
js采用ECMAScript语法
操作BOM: 浏览器对象模型
操作DOM: 文档对象模型
'''
js引入(*)
<style> #box, #wrap, #temp, #res { width: 200px; height: 200px; background-color: red; margin-top: 10px; } </style> <!--1.行间式: 就是代码块书写在全局事件属性中--> <!--this就是激活该代码块(脚本)的页面标签(页面元素对象)--> <div id="box" onclick="this.style.borderRadius = '10px'"></div> <div id="wrap" ondblclick="this.style.backgroundColor = 'orange'"></div> <div id="temp"></div> <!--2.内联式--> <script> // id为标签的唯一标识, 使用可以识别到html的具体标签 temp.onclick = function () { // 完成某一项功能 this.style.width = "400px"; // this => temp } </script> <div id="res"></div> <!--3.外联式--> <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%"; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js引入</title> <style> #box, #wrap, #temp, #res { width: 200px; height: 200px; background-color: red; margin-top: 10px; } </style> <script> alert("hello js") </script> </head> <body> <!--1.行间式--> <div id="box" onclick="this.style.borderRadius = '10px'"></div> <div id="wrap" ondblclick="this.style.backgroundColor = 'orange'"></div> <div id="temp"></div> <!--2.内联式--> <script> temp.onclick = function () { this.style.width = "400px"; } </script> <div id="res"></div> </body> <!--3.外联式--> <script src="js/1.js"> // 有src链接外部js的script标签相当于单标签, 会自动屏蔽标签内部代码块 </script> </html>
js选择器
<div id='box' class="bb"></div> <div class='box1 bb'></div> <div class='box1 bb'></div> <script> // getElement系列 // box var box = document.getElementById('box'); // [] | [.box1] | [.box1, ..., .box1] var boxs = document.getElementsByClassName('box1'); // [] | [div] | [div, ..., div] var divs = document.getElementsByTagName('div'); // 总结: 参数采用的是id名或类名或标签名,不需要带符号(#|.) </script> <script> // 只能获取检索到的第一个满足条件的标签(元素对象) var div = document.querySelector('.bb'); // 获取的是满足条件的有双类名的.box1.bb var divs = document.querySelectorAll('body .box1.bb'); // 总结: 参数采用的就是css选择器语法 </script>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js选择器</title> <style> #box, .box1, .box2 { background-color: orange; width: 200px; height: 200px; margin-top: 2px; } </style> </head> <body> <div id="box"></div> <!--虽然id可以重复, 但是js中就无法唯一标识识别, 所以约定俗成标签id名一定不能重复--> <div id="box"></div> <div class="box1"></div> <div class="box1"></div> <div class="box2">1</div> <div class="box2">2</div> </body> <script> // 事件绑定这函数的地址, 使用激活事件, 就会通过函数地址找到函数功能体, 完成指定功能 // 页面如果有两个id="box", 一个都匹配不上 // box.onclick = function () { // this.style.borderRadius = "50%"; // } // document对象 // getElement系列选择器 // 能获得到第一个id="box", 但是第二个永远取不到, 所以id还是不能重复 document.getElementById('box').onclick = function () { this.style.borderRadius = "50%"; } // js变量的定义 // 关键字(var) 变量名 = 变量值; var num = 10; // 如何查看变量名 var a = num; // print(num); // 调用浏览器使用打印机 // 弹出框查看(*) // alert(num); // alert(a); // 浏览器控制台查看(***) // console.log(num); // console.log(a); // 将内容书写到页面(*) // document.write(num); //写到html页面的最后面 // document.write(a); // 断点调试(***) // 断点调节(debug) // var box = document.getElementById('box'); // 上面和下面获取的都是第一个box, box的点击事件最终绑定到的是改变背景颜色的函数地址 // box.onclick = function () { // this.style.backgroundColor = "green"; // } // 通过类名 => 类名可以重复 => 获取的结果是数组(列表) var boxs = document.getElementsByClassName('box1'); console.log(boxs); boxs[0].onclick = function () { this.style.backgroundColor = 'blue' } boxs[1].onclick = function () { this.style.backgroundColor = 'pink' } // 通过标签名 => 标签名 => 获取的结果是数组(列表) var divs = document.getElementsByTagName('div'); console.log(divs); divs[1].ondblclick = function () { divs[1].style.borderRadius = "50%"; } </script> <script> // 参数: css语法的选择器 var box2s = document.querySelectorAll('body .box2'); console.log(box2s); var box2 = document.querySelector('body .box2'); console.log(box2); </script> </html>
事件
var box = document.querySelector('.box');
// 元素对象.事件名 = 函数
box.onclick = function() {
// 具体功能代码块; this代表就是激活该事件的元素对象
this.style.color = 'red'; // 将box的字体颜色修改为红色
}
// 事件名
onclick: ((this: SVGElement, ev: MouseEvent) => any) | null;
ondblclick: ((this: SVGElement, ev: MouseEvent) => any) | null;
onfocusin: ((this: SVGElement, ev: FocusEvent) => any) | null;
onfocusout: ((this: SVGElement, ev: FocusEvent) => any) | null;
onload: ((this: SVGElement, ev: Event) => any) | null;
onmousedown: ((this: SVGElement, ev: MouseEvent) => any) | null;
onmousemove: ((this: SVGElement, ev: MouseEvent) => any) | null;
onmouseout: ((this: SVGElement, ev: MouseEvent) => any) | null;
onmouseover: ((this: SVGElement, ev: MouseEvent) => any) | null;
onmouseup: ((this: SVGElement, ev: MouseEvent) => any) | null;
操作页面文档(*****)
// 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 = ""; // 将类名等于空字符串就是置空类名 }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>操作页面文档</title> <style> .box { width: 200px; height: 200px; background-color: orange; font: 900 30px/200px "STSong"; text-align: center; color: red!important; margin: 0 auto; } .box.box1 { color: greenyellow!important; font-size: 12px; font-weight: lighter; } </style> </head> <body> <div class="box">文本内容</div> </body> <script> var box = document.querySelector('.box'); box.onclick = function () { // 修改内容 // this.innerText = "innerText"; // this.innerHTML = "<i>innerHTML</i>"; // 可以解析html标签 // 修改样式 => 修改的是行间式 // this.style.color = "green"; // this.style.fontSize = "12px"; // 修改类名 // this.className = "box1"; // 直接修改类名, 会丢失之前类名下的属性们 // 在原类名基础上添加类型 this.className += " box1"; // var cName = this.className; // console.log(cName); // cName = cName + " " + "box1"; // console.log(cName); // this.className = cName; // 清除类名 this.className = ""; } </script> </html>
计算后样式
// 内联或外联设置的(行间式设置getComputedStyle也能获取到)样式都叫计算后样式，行间式设置的样式是设置好的样式。
.box {
font-size: 100px;
}
// 如何获取计算后样式
// getComputedStyle(元素对象, 伪类).属性名
var box = document.querySelector('.box');
var ftSize = getComputedStyle(box, null).fontSize;
console.log(ftSize); // 100px
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算后样式</title> <style> /*计算后样式: 内联式和外联式书写的样式都叫计算后样式*/ .box { width: 200px; height: 200px; background-color: orange; font-size: 100px; } </style> </head> <body> <!--<div class="box" style="font-size: 30px">12345</div>--> <div class="box">12345</div> </body> <script> // 如何获取提取设置好的样式属性值 var box = document.querySelector('.box'); var ftSize = box.style.fontSize; // 这种方式操作的永远是行间式 console.log(">>>>>>>>>>>>>>>>" + ftSize); // 如何获取计算后样式 // getComputedStyle(元素对象, 伪类).属性名 ftSize = getComputedStyle(box, null).fontSize; console.log("=================" + ftSize); </script> </html>
js基础语法
数据类型
-
值类型
// 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() 来查看类型
-
引用类型
// Object
var obj = {};
// Function
var func = function(){}
// Null
var n = null;
-
其他
//数组对象
a = new Array(1, 2, 3, 4, 5);
a = [1,2,3,4,5] // 语法糖
//时间对象
a = new Date(); // 当前时间
a = new Date("2019-3-1 12:00:00"); // 设定的时间
//正则
1.正则 /正则语法/
2.参数g 全文匹配
3.参数i 不区分大小写
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js基础语法</title> </head> <body> js基础语法 <div id="box"></div> </body> <script> // 1.定义变量 var num = 10; var s = "hello js"; console.log(num, "<<>>", s); console.log("%d %s", num, s); // 将字符串赋值给页面元素对象 box.innerText = s; //命名规范： // 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符） // 区分大小写 // 不能出现关键字及保留字 // var var = 30; // 出错 // 数据类型 // 值类型 // 数字类型 | 字符串类型 | 未定义类型 | 布尔类型 // 用typeof()函数可以查看变量类型 // 1.Number var a = 10; console.log(a, typeof(a)); a = 3.14; console.log(a, typeof(a)); // 2.String a = '123'; console.log(a, typeof(a)); a = "456"; console.log(a, typeof(a)); // 3.undefined var b; console.log(b); a = undefined; console.log(a, typeof(a)); // 4.boolean a = true; console.log(a, typeof(a)); b = false; console.log(b, typeof(b)); // 引用类型 // 5.Function a = function () { return 0; } console.log(a, typeof(a)); // 6.Object => 当做字典 a = { name: "Bob", age: 18 } console.log(a, typeof(a)); // 7.Null => 空对象 a = null; console.log(a, typeof(a)); // 其他 // 数组对象 a = new Array(1, 2, 3, 4, 5); console.log(a, typeof(a)); a = [5, 4, 3, 2, 1]; // 语法糖 console.log(a, typeof(a)); // 时间对象 (cookie) a = new Date(); // 当前时间 // a = new Date("2019-3-1 12:00:00"); // 设定的时间 console.log(a, typeof(a)); var year = a.getFullYear(); console.log(year) console.log(a.getDay()) // 周几 console.log(a.getMonth()) // 月份(从0) console.log(a.getDate()) // 几号 // 正则 var re = new RegExp('\d{3}', 'g'); var res = "abc123abc123".match(re); console.log(res); re = /d{2}/g; res = 'a1b23c456'.match(re); console.log(res); re = /[abc]/gi; res = 'aBc'.match(re); console.log(res); // 总结: // 1.正则 /正则语法/ // 2.参数g 全文匹配 // 3.参数i 不区分大小写 // 数组与对象(字典)的使用 var arr = [3, 5, 2, 1, 4]; console.log(arr[2]); var dic = { "name": "Bob", age: 18, "little-name": "b" } 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命名规范时,只能使用中括号语法 </script> </html>