- A+
所属分类：Web前端
赋值运算符与算术运算符：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <script> let a = 3, b = 5; console.log(a,b); let c = a + b; console.log(c); a = a + 5; console.log(a); a += 5; console.log(a); </script> </body> </html>
一元运算符的前置与后置操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <script> // 在不参与其他表达式的情况下，前置加和后置加没有区别 // let a = 1; // a++; // console.log(a); // let a = 1; // ++a; // console.log(a); // let a = 1; // let b = 2; // let c = a + ++b; // console.log(b,c); // let a = 1; // let b = 2; // let c = a + b++; // console.log(b,c); </script> </body> </html>
比较运算符注意事项：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <input type="text" name="age"> <span id="msg"></span> <script> // let a = 1; // let b = 2; // console.log(a<b); // let a = 1; // let b = '1'; // console.log(a==b); // console.log(a===b); // console.log(typeof a); // console.log(typeof b); // console.log(a<=b); let span = document.querySelector('#msg'); document.querySelector('[name=age]').addEventListener('keyup', function () { // let msg = ''; // if(this.value > 90){ // msg = '年龄不能超过90岁~'; // } // span.innerHTML = msg; span.innerHTML = this.value > 90 ? '年龄不能超过90岁~' : ''; }); </script> </body> </html>
逻辑运算符实例详解：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <input type="text" name="pwd"><br> <input type="text" name="repwd"> <br> <span name="msg"></span> <script> // let a = 1, b = 1; // if (a == 1 && b == 1) { // console.log('都是1'); // } // if (a == 1 || b == 1) { // console.log('至少有1个为1'); // } // if (a == 1 && b != 2) { // console.log('a是1，b不是2'); // } // 通过name值获取元素的方法 function query(name) { return document.querySelector(`[name=${name}]`); } // console.log(query("repwd")); let inputs = document.querySelectorAll('[name=pwd], [name=repwd]'); // console.log(inputs); // 对数组中的每个元素进行操作 [...inputs].map(item => { item.addEventListener('keyup', function () { let msg = ''; if (query("pwd").value != query("repwd").value) { msg = '两次密码不一致~'; } if (query("pwd").value.length < 5) { msg = '密码长度不得小于5位~'; } query("msg").innerHTML = msg; }) }) </script> </body> </html>
短路运算的妙用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <script> // let a = 1, b = 0; // console.log(a == true); // console.log(b == true); // if (a) { // console.log('a'); // } // if (b) { // console.log('b'); // } // if (a || b) { // console.log(111); // } // if (b || a) { // console.log(111); // } // let a = 6, b = 0; // let c = a || b; // console.log(c) // let sex = prompt('请输入性别'); // if (!sex) { // sex = '保密'; // } // console.log(sex); // 不同的语言是不一样的，js的短路运算可以返回数据，php的会返回布尔值 // let sex = prompt('请输入性别') || '保密'; // console.log(sex); // function star(num) { // // repeat字符串重复 // return '*'.repeat(num || 5); // } // console.log(star(3)); // console.log(star()); // 不传入num的话，num是undefined // function star(num = 6) { // return '*'.repeat(num); // } // console.log(star()); </script> </body> </html>
网站协议接受验证：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <form action="#" id="form"> 用户名：<input type="text" name="user"><br> <input type="checkbox" name="copyright" id="">接受协议<br> <button type="submit">提交</button> </form> <script> function query(el) { return document.querySelector(el); } query('#form').addEventListener('submit', function (event) { let user = query('[name=user]').value.trim(); // trim去除值两边的空白 let copyright = query('[name=copyright]').checked; // console.log(user, copyright); if (!user || !copyright) { event.preventDefault();// 阻止默认事件 alert('请填写用户名并接受协议~'); } }); </script> </body> </html>
使用if else 判断密码强度：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <input type="password" name="pwd"> <span id="msg"></span> <script> // 只有一行语句的话，花括号可以省略 // if (true) { // console.log(1); // } // if (true) console.log(2); // if (false) console.log(1); // console.log(2); // let a = 2; // if (a == 1) { // console.log(1); // } else { // console.log('=='); // } let span = document.querySelector('#msg'); document.querySelector('[name=pwd]').addEventListener('keyup', function () { let msg = '', length = this.value.length; if (length > 10) { msg = '密码无敌安全~'; } else if (length > 6) { msg = '密码强度中等~'; } else { msg = '密码强度太弱啦'; } span.innerHTML = msg; }); </script> </body> </html>
三元表达式真的好可爱：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <script> // 三元运算符的嵌套 // let a = 2 ? (5 ? 'haha' : 'jj') : 3; // console.log(a); function div(options = {}) { let div = document.createElement('div'); div.style.width = options.width ? options.width : '100px'; div.style.height = options.height ? options.height : '100px'; div.style.backgroundColor = options.bgcolor ? options.bgcolor : 'pink'; document.body.appendChild(div); } div(); div({ width: '50px', height: '50px', bgcolor: '#abcdef' }); </script> </body> </html>
switch使用注意事项：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <script> // let name = 'cyy'; // switch (name) { // case 'cc': // console.log('cc'); // break; // case 'dd': // console.log('dd'); // break; // default: // console.log('cyy'); // } // 多个case存在相同的操作 // let name = 'ee'; // switch (name) { // case 'cc': // case 'dd': // console.log('cc'); // break; // case 'ee': // default: // console.log('cyy'); // } // switch 和 case里可以填写条件表达式 function age(age) { switch (true) { case age > 60: console.log('老年'); break; case age > 40: console.log('中年'); break; case age > 20: console.log('青年'); break; default: console.log('少年'); break; } } age(18); </script> </body> </html>
while循环控制：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <script> // document.write(`<table border="1" width="100%">`); // let tr = 5; // while (tr-- != 0) { // document.write(`<tr>`); // let td = 3; // while (td-- != 0) { // document.write(`<td>${td}</td>`); // } // document.write(`</tr>`); // } // document.write('</table>'); function tables(options = { tr: 5, td: 3 }) { document.write(`<table border="1" width="100%">`); let tr = options.tr; while (tr-- != 0) { document.write(`<tr>`); let td = options.td; while (td-- != 0) { document.write(`<td>${td}</td>`); } document.write(`</tr>`); } document.write('</table>'); } tables(); document.write('<hr/>'); tables({ tr: 10, td: 5 }); </script> </body> </html>
do while循环实例操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <script> // while 条件成立则执行，条件不成立则不执行 // while(false){ // console.log(11); // } // do while先执行一次，再判断条件是否成立；成立则继续，不成立则停止 // do { // console.log(1); // } while (false); // let start = 0; // do { // let n = 0; // do { // document.write('*'); // } while (++n <= start); // document.write('<br/>'); // } while (++start <= 5); function star(row = 3) { let start = 0; do { let n = 0; do { document.write('*'); } while (++n <= start); document.write('<br/>'); } while (++start <= row); } star(); document.write('<hr/>'); star(10); </script> </body> </html>
使用for循环打印杨辉三角：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <style> span { color: white; } </style> <script> // for (let i = 0; i < 10; i++) { // console.log(i); // } // for (let i = 0; i < 10; i++) { // for (j = 0; j < i; j++) { // document.write('*'); // } // document.write('<br/>'); // } // for (let i = 0; i < 5; i++) { // for (let j = 5 - i; j > 0; j--) { // document.write('<span>*</span>'); // } // for (let m = 2 * i - 1; m > 0; m--) { // document.write('*'); // } // document.write('<br/>'); // } function hd(row = 5) { for (let i = 0; i < row; i++) { for (let j = row - i; j > 0; j--) { document.write('<span>*</span>'); } for (let m = 2 * i - 1; m > 0; m--) { document.write('*'); } document.write('<br/>'); } } hd(10); </script> </body> </html>
beark continue与label标签的使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <script> // for (let i = 1; i <= 10; i++) { // if (i % 2) continue; // 奇数，跳出本次循环，不打印 // console.log(i); // } // for (let i = 1; i <= 10; i++) { // if (i % 2) break; // console.log(i); // } // 打印3个奇数 // let count = 0; // for (let i = 1; i <= 10; i++) { // if (i % 2) { // if (count++ == 3) { // break; // } // console.log(i); // } // } // cyy: for (let i = 1; i <= 10; i++) { // if (i % 2) continue cyy; // console.log(i); // } // cyy1: for (let i = 0; i < 10; i++) { // cyy2: for (let j = 0; j < 10; j++) { // if (j % 2) { // console.log(i, j); // } // if (i + j >= 5) { // break; // 默认跳出当前循环，外层循环还会继续 // } // } // } // cyy1: for (let i = 0; i < 10; i++) { // cyy2: for (let j = 0; j < 10; j++) { // if (j % 2) { // console.log(i, j); // } // if (i + j >= 5) { // break cyy1; // 跳出两层循环 // } // } // } </script> </body> </html>
for-in与for-of使用方法：
for-of主要用于迭代对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <style> ul { list-style: none; } li { width: 200px; height: 50px; border: 1px solid #ddd; } </style> <body> <ul> <li></li> <li></li> <li></li> </ul> <script> let news = [ { title: 'title1', id: 1 }, { title: 'title2', id: 2 }, { title: 'title3', id: 3 } ]; document.write(` <table border="1" width="100%"> <thead> <tr><th>课程名</th><th>课程编号</th></tr> </thead> `); // for (let k in news) { // document.write(` // <tr> // <td>${news[k].title}</td> // <td>${news[k].id}</td> // </tr> // `); // } for (let i of news) { document.write(` <tr> <td>${i.title}</td> <td>${i.id}</td> </tr> `); } document.write(`</table>`); // let arr = ['a', 'b', 'c']; // for (let k in arr) { // console.log(arr[k]); // } // let arr = ['a', 'b', 'c']; // for (let i of arr) { // console.log(i); // } // for (let k in window) { // console.log(window[k]); // } // for (let i of window) { // console.log(i); // } // 字符串也有迭代对象 // for (let i of 'cyy') { // console.log(i); // } let lis = document.querySelectorAll('li'); // console.log(lis.length); for (const li of lis) { console.log(li); li.addEventListener('click', function () { this.style.backgroundColor = "red"; }); } </script> </body> </html>
