##内容回顾
#1、隐藏 display: none; opacity: 0; #2、阴影： box-shadow: x轴偏移 y轴偏移 虚化 阴影宽度 red; #3、过渡: transition: 0.2s #4、定位： position：relative | absolute | fixed 1）四个定位方位打开 2）盒子四边参考参考系四边布局 3）上下取上，左右取左 4）参考系：原有位置 | 最近的定位父级(父相子绝) | 页面窗口 5）z-index决定上下显示层次 注：calc(100%) #5、js： 定义：运行在浏览器上的前端脚本编程语言 作用：处理前端数据、渲染页面、修改样式、完成交互、前后台数据通信 三种引入： 基本数据类型：数字、布尔、字符串、未定义、数组(list)、对象(dict)、函数、null 若语言：根据当前实际的运行环境，自动绝对存储数据的类型
##JS运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<h1>运算符</h1>
</body>
<script>
let n1 = 5;
let n2 = 2;
let res = n1 / n2;
console.log(res);
//向下取整
res = parseInt(res);
console.log(res);
console.log(parseInt('12abc'));
console.log(parseInt('12.5abc'));
console.log(parseFloat('12.5.1abc888'));
// 自增自减
console.log(n1);
// ++在前优先级最高，++在后优先级最低(比赋值符=还低)
// res = n1++; // 先将n1的值赋值给res，自己再自增1
// res = ++n1; // 先自己自增1, 再将n1的值赋值给res
console.log(res, n1);
// 逻辑运算符
let x = 10;
res = 0 && ++x;
console.log(res, x);
res = 100 || ++x;
console.log(res, x);
console.log(!!x);
// 三元运算符
// 条件 ? 结果1 : 结果2
res = 10 == '10' ? '相等' : '不等';
console.log(res);
</script>
</html>
##JS流程控制
#1、if分支结构 if (表达式1) { } else if (表达式2) { } ... else if (表达式2) { } else { } #案例 // 随机数 [0, 1) => [m, n] 推导思路 // [0, 1) * 11 => [0, 11) parseInt() => [0, 10] + 5 => [5, 15] // [0, 1) * (n - m + 1) => [0, n - m + 1) parseInt() => [0, n - m] + m => [m, n] // 公式：parseInt(Math.random() * (max - min + 1)) + min let num = parseInt(Math.random() * (40 - 10 + 1)) + 10; console.log(num); if (num >= 30) { console.log('数字超过30'); } else if (num >= 20) { console.log('数字超过20'); } else { console.log('数字超过10'); } #2、while循环 // 循环 ` while (条件) { 循环体 } `; let count = 1; while (count <= 100) { if (count % 7 == 0) { console.log(count) } count++ }; #3、for循环 for (循环变量①; 条件表达式②; 循环变量增量③) { 代码块④; } // for循环执行的顺序：① ②④③ ... ②④③ ②，入口为①，出口为②，②④③就是循环过程 // 案例： for (var i = 0; i < 5; i++) { console.log(i); } // 结果： 0 1 2 3 4 #4、do while循环 do { } while (条件); #案例 count = 0; do { console.log('循环体一定会执行'); count++; } while (count < 3); #5、for…in迭代器 var arr = [1, 2, 3, 4, 5] for (num in arr) { console.log(num); } // 结果为索引： 0 1 2 3 4
##JS函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <h1 id="hhh">函数</h1> </body> <script> (function () { `函数的定义 function 函数名(参数列表) { 函数体; return 返回值 } function：定义函数的关键字 函数名：使用函数的依据，就是一个变量，可以赋值给其他变量，也可以存储在容器中，也可以作为函数的参数与返回值 参数列表：都是按位置传，形参与实参个数不需要统一，但是一定是按位赋值 (你传你的，我收我的) 函数体：完成功能的主体代码 返回值：只能返回一个值 `; function fn() { console.log('fn run'); return [1, 2] } let res = fn(); console.log(res); let func = fn; func(); function my_fn(a, b) { console.log('参数', a, b) } my_fn(); // 你收我不传 my_fn(10); // 你收我传不够 my_fn(10, 20, 30); // 你收我传多 `匿名函数 function () { // 没有名字的函数就是匿名函数 } `; // 需求需要一个函数地址，就可以传入一个匿名函数 function fn100(fn) { fn() } fn100( function () { console.log('传进去的匿名函数') } ); // 用变量接收匿名函数：第二种声明函数的方式 let f = function (a, b) { console.log('ffffffffff') }; f(); // 为事件提供方法体 hhh.onclick = function () { console.log('hhh 被点击了') }; // 匿名函数自调用：一次性使用 产生一个局部作用域 (function (a, b) { console.log('匿名函数自调用:', a, b) })(10, 20, 30); let abc = 10; hhh.onclick = function () { console.log(abc); }; })() </script> <script> abc = 20 </script> </html>
##JS四种变量类型
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>四种变量</h1> </body> <script> // if (true) { // 块级作用域 // let a = 10; // const b = 20; // var c = 30; // d = 40; // } { let a = 10; const b = 20; var c = 30; d = 40; } // console.log(a); // 有{}就不能被外界访问 // console.log(b); // let和const有块级作用域，不允许重复定义 // console.log(c); // var没有块级作用域, 但有局部作用域，可以重复定义 // console.log(d); // 没有关键字声明的变量是全局变量，在函数内部声明的外部也可以用 (function () { let aa = 100; const bb = 200; var cc = 300; dd = 400; })(); console.log(dd); </script> </html>
##JS数据类型
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>数据类型的运用</h1> </body> <script> // 字符串 // 1）定义： let ss = '123abc呵呵'; let res; console.log(ss); // 2）索引 res = ss[0]; console.log(res); // 3）切片 res = ss.slice(3, 6); console.log(res); // 4）替换 res = ss.replace('abc', 'ABC'); console.log(res); // 5）拆分: string => array res = ss.split(''); console.log(res); // 6) 拼接 res = ss + ss; console.log(res); // 7) 迭代 // of:取值 // in：索引 for (s of ss) { console.log(s); } // 数组 // array => string let arr = [3, 1, 2, 4, 5]; res = arr.join(''); // 默认, | '' | '自定义符合' console.log(res); // 迭代 for (a of arr) { console.log(a); } // 排序 // arr.sort(); // arr.reverse(); // console.log(arr); // 增删改查 console.log(arr[4]); arr[4] = 555; console.log(arr[4]); arr.push(100); // 尾增 arr.unshift(200); // 头增 console.log(arr); arr.pop(); // 尾删 arr.shift(); // 头增 console.log(arr); // 重点：增删改 console.log(arr); // 开始操作的索引 操作的长度 操作后的结果(不定长0~n个) arr.splice(2, 1, 222, 333, 444); console.log(arr); // 不定长参数 function f(...a) { console.log(a) } f(1, 2, 3, 4, 5, 6) // 字典 // 增删改查 dic = {}; // 增 dic['name'] = 'owen'; dic.age = 18; // 改 dic.age = 20; // 对象的删除 delete dic.age; console.log(dic); // 查 console.log(dic.name); // 字典的迭代用 for in for (k in dic) { console.log(k); } </script> </html>
##JS选择器
#1、getElement系列
// 1.通过id名获取唯一满足条件的页面元素
document.getElementById('id名');
// 该方法只能由document调用
// 2、通过class名获取所有满足条件的页面元素
document.getElementsByClassName('class名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])
// 3.通过tag名获取所有满足条件的页面元素
document.getElementsByTagName('tag名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])
#2、querySelect系列（用这个选择其居多**************）
// 1.获取第一个匹配到的页面元素
document.querySelector('css3语法选择器');
// 该方法可以由document及任意页面对象调用
// 2.获取所有匹配到的页面元素
document.querySelectorAll('css3语法选择器');
// 该方法可以由document及任意页面对象调用
// 返回值为NodeList (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空NodeList对象 ([])
##js页面交互
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js页面交互</title> <style> h1 { background-color: orange; } </style> </head> <body> <h1 id="hhh" style="font-size: 30px" owen="Owen"> <i>js页面交互</i> </h1> <h2 class="hh2">副标题1</h2> <h2 class="hh2">副标题2</h2> <img src="" alt=""> <input type="text" value="12345"> </body> <!-- <script> // 一、js选择器：js如何与html标签建立起联系 // 1) let h1 = document.getElementById('hhh'); console.log(h1); console.log(hhh); // id是标签的唯一标识，所以js通过id名可以直接拿到标签 // let h2s = document.getElementsByClassName('hh2'); let h2s = document.getElementsByTagName('h2'); console.log(h2s); console.log(h2s[0]); // 2) 同css3选择器 // querySelector就是获取一个 // h1 = document.querySelector('#hhh'); h1 = document.querySelector('body h1#hhh'); console.log(h1); h21 = document.querySelector('#hhh ~ .hh2'); console.log(h21); // querySelectorAll就是获取多个 h2s = document.querySelectorAll('#hhh ~ .hh2'); console.log(h2s); // 优势：通过id、class或标签，都可以快速定位到某一个或某几个 h22 = document.querySelector('.hh2:nth-of-type(2)'); console.log(h22); </script> --> <!-- <script> //二 // 1）找目标标签 let h1 = document.querySelector('h1'); // 2）获取样式、内容、属性 let fontSize = h1.style.fontSize; console.log(fontSize); // 标签.style.属性名 只能获取行间式 // getComputedStyle(ele_name, 伪类选择器通常用null填充) 能获取所有方式的样式(内联与外联叫计算后样式) let bgColor = getComputedStyle(h1, null).backgroundColor; console.log(bgColor); console.log(h1.innerText); console.log(h1.innerHTML); console.log(h1.getAttribute('id')); console.log(h1.getAttribute('owen')); // 3）修改样式、内容、属性 h1.style.color = 'red'; // js可以直接修改样式 - 修改的是行间式 h1.style.borderRadius = '50%'; // css的 - 链接语法对应 js的 小驼峰命名法 h1.innerText = '修改过后的内容'; h1.innerHTML = '<i>修改过后的内容</i>'; h1.setAttribute('owen', 'oooooooooooooooo'); let img = document.querySelector('img'); if (Math.random() > 0.5) { img.setAttribute('src', 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=255676174,1347478056&fm=26&gp=0.jpg') } else { img.setAttribute('src', 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3706411226,1037337437&fm=26&gp=0.jpg') } </script> --> <!-- <script> // 三、表单内容 let inp = document.querySelector('input'); console.log(inp.value); inp.value = 67890; // console.log(inp.getAttribute('value')); // inp.setAttribute('value', '0000000000000'); </script> --> <script> // 四、鼠标事件 let h1 = document.querySelector('h1'); // onclick、ondblclick、onmouseover、onmouseleave、onmousemove、onmousedown、onmouseup h1.onclick = function (ev) { console.log(ev); // 包含着鼠标的相关信息 // 鼠标点击点 console.log(ev.clientX, ev.clientY); // 特殊按键 console.log(ev.altKey, ev.ctrlKey, ev.shiftKey); }; h2 = document.querySelector('h2'); h2.onmouseover = function () { h1.innerText = 'h2被悬浮了'; h1.style.color = 'green'; }; h2.onmouseleave = function () { h1.innerText = 'h2被放开了'; h1.style.color = 'red'; }; let count = 1; h2.onmousemove = function () { ++count; h1.innerText = '鼠标在h2身上游走' + count + '下'; this.innerText = '鼠标在h2身上游走' + count + '下'; }; // 为某个标签绑定事件，去控制页面中任何一个标签（绑定事件中的this就代表自身） // 键盘事件 // 只要在窗口下，点击鼠标就可以触发 // onkeydown、onkeyup、onkeypress /* document.onkeydown = function (ev) { console.log(ev.keyCode); if (ev.keyCode == 37) { console.log('你按了左键'); } else if (ev.keyCode == 38) { console.log('你按了上键'); } console.log(ev.altKey); if (ev.ctrlKey && ev.keyCode == 13) { console.log('留言'); } } */ // let inp = document.querySelector('input'); // inp.onkeydown = function (ev) { // console.log(ev.keyCode) // } // 表单事件 let inp = document.querySelector('input'); let h22 = document.querySelector('h2:nth-of-type(2)'); // onchange当input失去焦点才会触发 oninput 内容改变时触发 inp.oninput = function () { h22.innerText = this.value; }; </script> </html>