web前端零碎知识点

最新推荐文章于 2022-07-15 12:49:46 发布

hyupeng1006

最新推荐文章于 2022-07-15 12:49:46 发布

阅读量218

点赞数

分类专栏： web H5

本文链接：https://blog.csdn.net/hyupeng1006/article/details/79373822

版权

web H5 专栏收录该内容

68 篇文章 2 订阅

订阅专栏

一、confirm弹框点击（确定和取消）

//需求：点击取消一直弹窗下去。如果点击确定，立马结婚。
do{
var bool = confirm("求求你啦，嫁给我吧，我很丑，但是我很温柔啊...");
if(bool){
alert("我们去三亚拍结婚照吧，现在才3折优惠啊！");
break;
}
//如果点击的是取消，那么bool的值是false，为了进入下次循环，那么把他变成true；利用的就是非！

}while(!bool);

结论：confirm 弹框的确定和取消键分别返回true和false，根据true或者false去执行不同的逻辑

二、定时器

两种添加定时器的方法：

setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法[function],当方法执行完成定时器停止(但是定时器还在,只不过没用了)（只执行一次）

setInterval([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法[function],当方法执行完成,定时器并没有停止,以后每隔[interval]这么长的时间都会重新的执行对应的方法[function],直到我们手动清除定时器为止；（每隔指定的时间就执行一次）

两种移除定时器的方法：

clearInterval(timer1) / clearTimeout(time1)；两种清除方式都可以清除通过setTimeout和setInterval设置的定时器(两种方式在设置定时器的时候有区别，清除定时器的时候没有区别)

三、json和对象的区别

区别仅仅在于json的Key键值对中的键必须带有""

var obj3={width:100,height:200} //js对象

var obj5={"width":100,"height":200,"name":"rose"} //json

var a=[{"width":100,"height":200,"name":"rose"},{"width":100,"height":200,"name":"rose"},{"width":100,"height":200,"name":"rose"},

]; /*这个叫JSON格式的数组，是JSON的稍复杂一点的形式 */

对象本身没有length,所以不能用for循环遍历，要用for....in..循环

var aaa = {"name":"拴住","age":18,"arr":[1,2,3]};
for(var k in aaa){
console.log(k); //name age arr
//aaa.k代表aaa这个对象的k属性的值，并不是k对应的变量值的属性。
console.log(aaa.k); undefined
console.log(aaa.name); 拴住
//aaa[k],代表的是aaa这个对象中k这个变量值对应的属性值。
console.log(aaa[k]); 拴住 18 [1,2,3]

}

for....in...遍历数组

var arr = [1,2,3];
for(var k in arr){
console.log(arr[k]) //1 2 3

}

for...of...遍历数据对象
var arrObject = [{"width":100,"height":200,"name":"rose"},{"width":20,"height":260,"name":"jack"}]
    for(var value of arrObject){
      conosle.log(value.name) //rose jack
    }

四、数组的API方法遍历

every()、filter()、foreach()、map()、some()

alert(flag);

五、offsetHeight和offsetWidth、offsetTop和offsetLeft (都是返回number类型）

offsetHeight和offsetWidth: 可以检测盒子的宽高（包括宽高本身，padding,border，不包括margin）

offsetTop和offsetLeft 此属性可以返回当前元素距离某个父辈元素左边缘的距离，当然这个父辈元素也是有讲究的。
（1）.如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。

（2）.如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。

js动画让div每隔一定的时间向右走一些

setInterval(funciton(){

div.style.left = div.offsetLeft + 10 +"px"

},300)

六、scrollWidth和scrollHeight、scrollLeft和scrollTop

scrollWidth和scrollHeight：盒子本身的宽高+padding 不包括border和margin

(scrollHeight有一个特点：如果文字超出了盒子，高度为超出盒子的内容的高。不超出还是是盒子本身高度+padding)

scrollLeft和scrollTop：滚动条的水平和垂直偏移

//需求：封装一个兼容的scroll().返回值是json，用scroll().top获取scrollTop

window.onscroll = function () {
console.log(scroll().top); //调用下面的封装方法
console.log(scroll().left);

}

function scroll(){
//简单封装（实际工作使用）
return {
"top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
"left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
}

}

七、H5C3

链接：http://blog.csdn.net/hyupeng1006/article/details/79401184

八、面向对象和Js高级
（1）in关键字
          ①判断属性是否存在于对象中，返回bool类型
              如：var obj={name:"张三",age:18}
                       var propName = "name"; //定义的这个属性名必须加双引号
                     var isExsit = propName in obj;
                     console.log(isExsit); //true
          ②in关键字操作数组的时候判断的是索引是否存在，而不是值
              如：var arr = [2,6,8,9]

console.log(6 in arr) //false

      （2）delete关键字
                delete关键字可以用来删除对象的属性和未使用var关键字声明的变量，返回是否删除成功的bool
                 如：var obj = {name:"赵四"}
                      var result = delete obj.name

console.log(obj.name, result) //undefined true

九、
（1）forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。（空数组不执行回调函数）
             详情：http://www.runoob.com/jsref/jsref-foreach.html
             map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。（空数组不执行回调函数）
             详情：http://www.runoob.com/jsref/jsref-map.html
    （2）call和apply
          实例：求一个数组中最大值
            maxArr = Math.max.apply(null, arr);