js是什么
- 语法本身---变量---数据类型--控制结构
- DOM ---文档对象---查找元素---添加内容---修改标签属性---自定义属性
- BOM alert
前端 主要是对文档的增删改查
伪元素的获取
:: first-letter 特殊样式添加到首字母
::first-line 特殊样式加到首行 :: before 在元素之前插入 ::after 在元素之后插入
伪元素是css渲染的 并不存在与我们的document当中!无法获取
getComputedStyle() 括号里传入 1对象 2 伪类 然后获取样式采用ge't getComputedStyle(1,2)[attr] 样的方式 没有伪类 写null 或者不写
<body>
<div id="box" class="mybox">123</div>
</body>
<script>
var oBox = document.getElementById("box");
var af = getComputedStyle(oBox,"::after" )["content"];
console.log(af);
</script>
for 循环
for(①;②;④;){③;}
①:定义语句
②:判断语句
③:执行体
④:变化语句
for(var i = 0;i<10;i++){
console.log(i);
}
结果是打印出0~9 就相当于console.log(0); console.log(2); console.log(3); console.log(4);
**for循环的执行顺序:1--2--3--4--2--3--4直到i=10 然后就不进入循环体
<body>
<button id="btn">点击生成div</button>
<div id="box"></div>
</body>
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var str = "";
btn.onclick = function () {
for (var i = 0;i<10;i++){
str += "<div></div>"
}
box.innerHTML = str;
}
</script>
遍历数组
<ul id="box">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
<script>
var oli = document.getElementsByTagName("li");
for (var i = 0; i<4; i++){
oli[i].onclick = function () {
alert("kun");
}
}
for (var i = 0; i<4; i++){
oli[i].onclick = function () {
alert(i);//打印结果是4,并不是1234
}
}
</script>
函数在没执行的时候是一个代码块,for循环只是注册事件,注册函数并没有执行
如果想要每次弹出来对应是1234,那么就使用自定义属性把i放在点击函数外边存起来,注意点击函数内部要用this
<script>
var oli = document.getElementsByTagName("li");
for (var i = 0; i<4; i++){
oli[i].index = i;
oli[i].onclick = function () {
alert(this.index);
console.log(this.index);
}
}
</script>
this 是谁调用这个函数 this就是谁
遍历字符串
- 在js当中 数据类型是可以相互转换的
<script>
var str = "我爱北京天安门";
console.log(str.length);
for(var i = 0;i<str.length;i++){
console.log(str[i]);
}
</script>
结果是7
break 和 continue
- 终止循环
<script>
for(var i=0;i<100;i++){
console.log(i);
if(i==25){
console.log("nihao");
break;
}
console.log(i);
}
</script>
注意break 写在if里面 ,从25开始包括25就不打印了
- 跳过某一个循环
<script>
for(var i=0;i<100;i++){
if(i==25){
console.log("nihao");
continue
}
console.log(i);
}
</script>
结果25不打印,其余打印
for 循环
<script>
for(var i=0;i<5;i++){
for (var j=0;j<6;j++){
console.log(1);
}
}
</script>
结果循环了30次
for(var i=0;i<6;i++){
for (var i=0;i<4;j++){
console.log(1);
consolo.label("里层");
}
console.log("外层");
}
死循环,里层出来i为4,但是经过外层i++,i变为5,满足条件,进里层循环,但是,里层i又被赋值为0,所以为死循环
for(var i=0;i<2;i++){
for (var j=0;j<3;j++){
if(j===2){
break;//只是终止内层循环
}
console.log(`里层第${j}次`);
}
console.log(`外层${i}`);
}
内层执行了两次,外层执行2次
label 标签 给我们的for循环打个标记 便于终止和跳出
<script>
out:
for(var i=0;i<2;i++){
for (var j=0;j<3;j++){
if(j===2){
break out;//只是终止内层循环
}
console.log(`里层第${j}次`);
}
console.log(`外层${i}`);
}
</script>
在内部终止后,外层也终止,下面的console.log没有结果 out可以看作一个变量,但是不能用 var 会报错,也遵守变量命名规则,就是可以随意命名
<script>
out:
for(var i=0;i<2;i++){
wangwu: for (var j=0;j<3;j++){
if(j===2){
continue out;//只是终止内层循环
}
console.log(`里层第${j}次`);
}
console.log(`外层${i}`);
}
</script>
跳出外层循环,内层循环两次,外层循环两次,但是最后的console.log没有打印
++ --运算
<script>
var a = 1;
var num = a++;
console.log(num);
console.log(a);
</script>
第一个结果是1,第二个2 a++
- 如果我们取返回值 取到的是 没有+1之前的值 先赋值 后运算
- 如果运算结束 a发生了变化 ++a
- 如果我们取返回值的话 取到的是 +1之后的值 先运算 后赋值
a--
--a
for循环的性能
for 循环的性能
console.time()
console.timeEnd()系统会打印出 大概的代码执行时间,上下括号里面的名字可以随便取,但是要对应一样
<body>
<button id="btn">增加</button>
<div id="box">
</div>
</body>
<script>
var oBtn = document.getElementById("btn");
var oBox = document.getElementById('box');
oBtn.onclick = function () {
console.time("tag");
var str = '';
for (var i = 0;i<10;i++){
str += "<div></div>";
}
oBox.innerHTML += str;
console.timeEnd("tag");
}
</script>
这个把str的十次增加存起来放到inner HTML的一次获取,性能比下面的好,随着代码量的越来越多 inner HTML也越来越多 越来越慢。重新渲染了一次
<script>
var oBtn = document.getElementById("btn");
var oBox = document.getElementById('box');
oBtn.onclick = function () {
console.time("tag");
// var str = '';
for (var i = 0;i<10;i++){
oBox.innerHTML += "<div></div>";
}
// oBox.innerHTML += str;
console.timeEnd("tag");
}
</script>
越来越慢,每次循环,都要取出我们的innerhtml,随着代码量的越来越多 inner HTML也越来越多 越来越慢。我们再写代码的时候,尽量减少innerhtml的获取 重新渲染了十次
页面的reflow(回流/重构)
- 尽量减少回流 当我们再页面上增加元素 改变元素宽高 放大缩小我们的窗口,改变标签的属性
<div></div>
此时页面会重新渲染!
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script>
var oli = document.getElementsByTagName("li");
for (var i =0;i<oli.length;i++){
oli[i].style.backgroundColor = "#f66";
}
</script>
每次执行循环都会再代码中寻找oli.length属性
for (var i =0,len=oli.length;i<len;i++){
oli[i].style.backgroundColor = "#f66";
}
这样提高性能
for (var i =0;olis[i++];){
oli[i].style.backgroundColor = "#f66";
}
i=0,执行i++,取出来的值是0,进入循环体,i是1,所以0号元素不会有颜色变化
var arr =[1,2,3];
console.log(arr[4]);//结果是undefined 在判断语句中 相当于false
for (var i =-1;olis[++i];){
oli[i].style.backgroundColor = "#f66";
}
这样就可以,性能最优 但是有缺点 如果 var arr =[1,2,3]; 这样提前结束,数组中没有这六个爷爷才可以使用
- 尽量先取到length,然后循环。
for循环也可以这样写
var i=0;
for(;i<5;){
console.log(1);
i++;
}
文档流
document.write 将内容写入body的最下边,document.write只会写入一个打开的文档流中,追加到body后边
<body>
<div>123</div>
</body>
<script>
document.write("nihao");
</script>
如果想在关闭的文档流中追加,那么
<body>
<div>123</div>
</body>
<script>
window.onload = function(){
document.write("nihao");
}
</script>
当window的资源加载完毕之后,我们认为 文档流关闭 此时 write会重新打开文档流 覆盖原有内容,上面中出现nihao,document.write()里面可以任意写包括标签,如果要在里面写jsdocument.write("<script>alert(1);<\/script>");
需要用到转义\
<body>
<div>123</div>
</body>
<script>
document.onclick = function () {
document.write("<script>alert(1);<\/script>");
}
</script>
出现123,当点击之后出现弹窗,确定后,123消失。此时只是一个注册事件,不影响文档的加载,代码读取完毕之后,注册的事件还在