JS - 基础篇
程序员文章站
2022-06-01 16:55:13
...
- CSS：border-top-right-radius="50%";
JS：borderTopRightRadius="50%"; - JS分号处理：写javascript的时候，如果每条语句都独自写成一行，是不需要写分号的，但是下一行如果遇到上面提到的符号，javascript可能会与下一行合并解释。其中以“/”、“+”和“-”开头的语句在实现项目中比较少见，以“（”和“[”开头的则非常常见。如果在return、break、continue、throw等关键字后面换行，javascript会在换行处填补分号。
- (function(){...})() // 自动执行
- document.getElementById(...).onclick=function(){...}
- DOM Ready 和 DOM Load 区别：点击打开链接
- var a=1
console.log(a,a,a,a,a,a,a,a)
Ps：支持多个变量输出。 - 控制台输出：
console.log('8888',8888) // 控制台输出，前黑(字符串)后紫(数值) console.log('8888'+8888,8888) // 88888888 8888 前黑(字符串)后紫(数值) console.log('8888'-888,8888) // 8000 8888 前紫(数值)后紫(数值) // number number string defined boolean object console.log(typeof(123),typeof(NaN),typeof('123'),typeof(c),typeof(1==1),typeof(null)) - this 用法：
while(i<tab.length){ tab[i].index=i // 给 tab[i] 加个属性名称为index，同时赋值为i tab[i].onclick=function(){ var e=0 while(e<tab.length){ tab[e].style.color='#000' con[e].style.display='none' e++ } // 这里不能是 tab[i].style.color='red' 因为 while 一进来就运行了 // 使 i==tab.length，所以这里必须要用 this 指针，指的就是【当前点击的tab[i]】 this.style.color='red' con[this.index].style.display='block' } i++ } - setInterval(函数,毫秒)，clearInterval(变量)，setTimeout(函数,毫秒)，如：
1) setInterval(function(){...},1000)
2) function fun(){...}
setInterval(fun(),1000) // F，加括号是执行函数的意思，但 setInterval 本身就带有执行函数的功能
setInterval(fun,1000) // T
3) var timer = setInterval(fun,1000)
clearInterval(timer) // 清除定时器
4) setTimeout(function(){...},1000) // 过1s后才执行函数，而setInterval是每隔 N s，执行
Ps：在每次开始 setInterval 前，保险起见先清除下 clearInterval。 - scrollWidth、clientWidth、offsetWidth 区别。点击打开链接
- parseInt(...)、Math.random()
console.log(Math.random()) // [0,1) console.log(parseInt(Math.random()*10)) // [0,9] console.log(parseInt(Math.random()*21)) // [0,20] console.log(parseInt(5+Math.random()*(21-5))) // [5,20] // console.log(a+Math.random()*(b+1-a)) // [a,b] console.log(parseInt("1234asd")) // 1234 console.log(parseInt("1234a56sd")) // 1234 - JS 数组：
arr.push(); // 向数组的末尾添加一个或更多元素，并返回新的长度
arr.unshift(); // 数组的开头添加一个或更多元素，并返回新的长度
arr.pop(); // 删除并返回数组的最后一个元素
arr.shift(); // 删除并返回数组的第一个元素
arr.splice(); // 数组里面的增删修改var a=[1,2], c=[7,8] var b=[11,'string',function(){return [1,2,'str',3]},[1,[2,3],4],{}] // int、String、function、[]、object console.log(b) console.log('b.len=='+b.length+'\n',b) b[0]='str12' console.log('b[3][1][1]=='+b[3][1][1]) // 3 console.log('b[2]()[2]=='+b[2]()[2]) // str console.log(a.push('3','std'),a) // a.push() 返回 push 后数组.length console.log(a.unshift(5,6),a) // a.unshift() 返回 unshift 后数组.length console.log(a.pop(),a) // a.pop() 返回 pop 元素（在尾部） console.log(a.shift(),a) // a.shift() 返回 shift 元素（在头部） console.log(a.concat(c)) // a 不会被覆盖 console.log(a.reverse()) // a 会被覆盖 console.log(a.push(2),a.unshift(2),a) console.log(a.indexOf(2)) // 取最先相等的那个元素下标 var m=[0,1,2,3,4,5,6] // console.log(m.splice(a,b)) // a>=0, 从下标a开始，切掉b个元素（a也算进去）; a<0, 从末尾开始数（-a）个开始，切掉b个元素（-a也算进去）；并返回被切掉的元素 // console.log(m.splice(a)) // 从下标a开始，切掉后面所有的元素; -a 同理可得 console.log(m.splice(2,3,"replace",888),m) // "replace",888 替换被切掉的元素 var d='我们在学习前端课程' console.log(d.length,d[4]) // 字符串也有长度和下标值 - JS 对象：
var Object={name:'张三',age:18,height:185,zy:'计算机专业',arr:[1,2,3,5],f:function(){return {a:'111',b:[777,{cc:'haha',dd:[1,2,'获取的']},666]}}}//对象里有属性，属性后面跟值 Object.index='123' console.log(Object.f().b[1].dd[2]) console.log(Object) - <input type="reset" value="重做" onclick="text.innerHTML=''" />
Ps：onclick="这里不一定是函数，只要是执行的东西即可" - JS中“==”与“===”区别：
i、"==" 用于比较判断两者相等，在比较的时候可以转自动换数据类型。
ii、"===" 用于严格比较判断两者严格相等，严格比较，不会进行自动转换，要求进行比较的操作数必须类型一致，不一致时返回false。
iii、"==" 只要求值相等；"===" 要求值和类型都相等。 - random() 函数取值范围：[0.0,1.0)。
- 在JavaScript中，两个整数进行除（/）运算，其结果要么整数（正好整除），要么浮点数（整除不了）。
- JS中null、undefined区别：点击打开链接
- typeof(NaN) // number 类型
- $(this)和this关键字在jQuery中有何区别？
答：$(this)返回一个jQuery对象,你可以对它调用多个jQuery方法。而This代表当前元素,它是JavaScript关键词中的一个,表示上下文中的当前DOM元素。你不能对它调用jQuery方法,知道它被$()函数包裹,例如$(this)。 - JS 输出
- window.alert（）警告框
- document.write（）写到HTML文档中
- innerHTML 写到HTML元素
- console.log（）写到浏览器的控制台
a、window.api：“window” 可以省略。 - JS 数据类型
- 字符串（String）
- 数字（Number）
- 布尔（Boolean）
- 数组（Array）
- 空（Null）
- 未定义（Undefined）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js数据类型</title> </head> <body> <script type="text/javascript"> /** * 字符串 (String) * 数字 (Number) * 布尔 (Boolean) * 数组 (Array) * 对象 (Object) * 空 (Null) * 未定义 (Undefined) */ // var可以声明各种类型 var x; // x 为 undefined var y = 5; // y 为数字 var z = "John"; // z 为字符串 // 字符串 var carname="Volvo XC60"; var carname='Volvo XC60'; // 数字 var x1=34.00; //使用小数点来写 var x2=34; //不使用小数点来写 // 布尔 var x=true; var y=false; // 数组 var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; var cars=new Array("Saab","Volvo","BMW"); var cars=["Saab","Volvo","BMW"]; // 推荐 // JavaScript 对象 键值对 var person={ firstname:"John", lastname:"Doe", id:5566 }; console.log(person.firstname) console.log(person["firstname"]) // Undefined 和 Null // Undefined 这个值表示变量不含有值。 // 可以通过将变量的值设置为 null 来清空变量 var persons; var car="Volvo"; car=null </script> </body> </html> - JS 变量
- 变量必须以字母开头。
- 变量也能以$和_符号开头（不过我们不推荐这么做）。 - JS 弹出框
- JS for/in - 循环遍历对象
var person = { name : 'json', age : 25, sg: 170 } for( key in person ){ console.log(person[key]) } - JS DOM HTML
a、element.setAttribute(); 还可以用来增添没有的属性。 - JS DOM CSS
- JS DOM 事件
- JS DOM 节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dom 节点</title> </head> <body> <div id="div1"> <p id="p1">我是第一个p</p> <p id="p2">我是第二个p</p> </div> <script type="text/javascript"> /** document.createElement("p") document.createTextNode("新增") parent.appendChild(child); parent.removeChild(child); */ var p = document.createElement("p"); // <p></p> var word = document.createTextNode("我是新增的p标签"); // 我是新增的p标签 p.appendChild(word); // <p>我是新增的p标签</p> var div1 = document.getElementById("div1"); div1.appendChild(p); var p1 = document.getElementById("p1"); div1.removeChild(p1); </script> </body> </html> - JS Window
Ps：当我们var了一个变量，就自动转成“window.变量”。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Js window</title> </head> <body> <button onclick="openwindow()">创建窗口</button> <button onclick="myFunction()">调整窗口</button> <button onclick="moveFunction()">移动窗口</button> <button onclick="closeFunction()">关闭窗口</button> <script type="text/javascript"> var w; function openwindow(){ w=window.open('','', 'width=300,height=300'); } function myFunction(){ w.resizeTo(500,500); w.focus(); } function moveFunction(){ w.moveTo(700,500); w.focus(); } function closeFunction(){ w.close(700,500); w.focus(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>window screen</title> </head> <body> <script type="text/javascript"> /** * screen.availWidth - 浏览器的屏幕宽度 screen.availHeight - 浏览器的屏幕高度（不包括Win任务栏） 1920 * 1080 * */ alert(screen.availWidth); alert(screen.availHeight); </script> </body> </html>Ps、因为高度上不包括任务栏（40px），所以在1080px下的话，Height==1040px。
a、长度为3，表示经历了3个页面。
b、history.go(n);
0 刷新当前页面
-n back n 次
n forward n 次 - 封装
a、getElementById();function byId(id){ return typeof(id)==="string" ? document.getElementById(id) : id; } - 待更新...