关于js基础笔记

变量
变量的特点-值是可变的,松散类型,同时定义多个,写入内存,前置访问undefined

var a = 5;
    var b;
    console.log(a, b, c)//5 undefined undefined
    var c = 5;
    console.log(d)//如果没有声明变量,会报错

数据类型
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)
如何检测数据类型:typeof instanceof constructor toString(最好的)

常见运算符
复合的赋值运算符-- += %=
数学运算符:+ %
比较运算符:== (隐式转换, 值) === (没有隐式转换,值和类型) 面试
逻辑运算符:& || !–程序短路!结果一定是布尔值
一元运算符:++ –

显式转换和隐式转换
显示转换:强制转换,Number()/String()/Boolean()…
隐式转换:+ - * / % ++ – == !…

    var str = '100';
    console.log(typeof str);//string
    console.log(typeof +str);//number

for循环
–常用

var a = [1, 2, 3, 4, 5, 6, 7, 8]
    for (var i = 0; i < a.length; i++) {
        console.log(i)//i是索引,也是下标
        console.log(a[i])//取数组a的值
    }

for…in
for…in是循环遍历索引

 var a = [1, 2, 3, 4, 5, 6, 7, 8]
    for (var b in a) {
        console.log(b)
    }

for…of
for…of是x’h遍历值

var a = [1, 2, 3, 4, 5, 6, 7, 8]
    for (var b of a) {
        console.log(b)
    }

1.for循环中有一个break意思是跳出当前循环,一般用于判断条件
2.for循环-for循环的嵌套
3.循环的概念和意义–循环如果没有结束,不会出结果。

错误类型-debug一辈子的事情
断点调试 - 遍历里面使用断点调试进行代码执行顺序的查看。

函数
创建普通函数,函数表达式(自执行函数,事件处理函数)。
函数的参数和返回值

var fn = function () { }  //函数表达式
        function fn() { }//普通函数,声明式
        !function () { }();//自执行函数,后面的分号不能省略。
        (function () { })()//自执行函数

递归:
函数在执行过程中 嵌套自己
其使用时类似循环 也需要有临界值(函数在什么时候停止)

var i = 1;           //   相当与循环的初始值
    function fn(){
        console.log("我是fn",i);
        if(i>=100){                           //     临界值
            return "哈哈";               //     停止或跳出循环
        }
        i++;                    循环
        fn();
    }

冒泡法

 var b = []             // 定义空数组
    for (var i = 0; i < 10; i++) {          //  循环10次     就是随机取出10个数字
        var a = Math.round(Math.random() * 100)            //   随机100以内的数字
        b[i] = a             //  把随机数字放到b数组
    }
    console.log(b)         //  页面打印

    for (var n = 0; n < 10; n++) {    //   循环10次

        for (var j = 0; j < b.length - 1; j++) {
            if (b[j] > b[j + 1]) {              // 判断第一个数是不是大于第二数
                var xm = b[j]              //   定义一个变量把第一个数放到里面
                b[j] = b[j + 1]          //       在把第二个值赋给第一个
                b[j + 1] = xm             //     然后把定义xm值赋给第二个值              就是把b[ j ]和b[ j+1 ]交换值
            }

        }
    }
    console.log(b)

浏览器窗口的尺寸属性
这两个属性分别是用来获取浏览器窗口的宽度和高度(包含滚动条的)

console.log(window.innerHeight, window.innerWidth)

这两个属性分别是用来获取浏览器可视区的宽高(不包括滚动条)–重要

console.log(document.documentElement.clientWidth, document.documentElement.clientHeight)

浏览器事件
onload事件:页面内容加载完成(DOM结构,图片…)后触发
事件处理函数:将函数给事件。
等页面结构加载完成,执行函数里面的代码
有了这个事件,可以将js代码放在文档任意位置,因为我都是最后执行的。(等页面结构加载完成,包括结构里面的内容)
如果不使用此事件,可以将js代码写在body区域的最下面。
一个页面只能有一个这个事件,多个后面的覆盖前面。

onscroll事件: 拖动浏览器的滚动条触发此事件。
注意事件的触发频率。拖动时会触发多次。

onresize事件:浏览器窗口缩放所触发此事件。

滚动条
滚动条距离(某些浏览器下面做兼容–没有 DOCTYPE声明的时候)
document.documentElement.scrollTop 垂直滚动条,滚动条离顶部的距离
document.documentElement.scrollLeft 左边

定时器
setInterval(函数名称或者函数体,时间);间隔定时器(反复调用)
clearInterval( 定时器的返回值 ); 停止定时器

setTimeout(函数名称或者函数体,时间); 延时定时器,执行一次
clearTimeout( 定时器的返回值 ); 停止定时器,虽然延迟定时器是一次性的,也有需要关闭的情况

DOM元素获取
querySelector():获取一个, 通过选择器获取元素,如果获取多个只返回第一个。
querySelectorAll():获取多个, 通过选择器获取元素,可同时获取多个元素,类数组。

getElementsByClassName(): 获取相同类名的节点列表(IE8及以下不支持),返回类数组

getElementById(): 获取特定 ID 元素的节点–最优

getAttribute()获取特定元素节点属性的值,某些低版本浏览器不支持
setAttribute()设置特定元素节点属性的值,某些低版本浏览器不支持
removeAttribute()移除特定元素节点属性,某些低版本浏览器不支持

DOM属性-文本
innerHTML:读写元素节点里的内容,从节点的起始位置到终止位置的全部内容,包括内部的元素。

outerHTML:读写元素节点里的内容,除了包含innerHTML的全部内容外, 还包含元素节点本身。

innerText:读写某个元素节点的文本内容

DOM获取节点
childNodes:获取某一个节点下所有的子一级节点,包含空白节点(文本节点),类数组。

children :获取某一节点下所有的子一级 元素节点,不包含空白节点,类数组。

parentNode:获取某一个节点的 父节点


firstChild:获取某一节点下子一级的第一个节点,包含空白节点

firstElementChild:获取某一节点下子一级 第一个元素节点,不包含空白节点

nextSibling:获取某一个节点的下一个兄弟节点, 包含空白节点

nextElementSibling:获取某一个节点的 下一个元素节点, 不包含空白节点

attributes:获取某一个元素节点的所有属性节点

节点属性
节点:元素节点,属性节点,文本节点…

    每一个节点又包含三个属性。
    nodeType:获取节点的节点类型,用数字表示  1元素   2属性   3文本
    nodeName:获取节点的节点名称
    nodeValue: 获取节点的值

节点操作
创建元素-createElement(‘创建的标签名’)追加元素-appenChild()

insertBefore(新的节点, 存在的节点) 在box内,把新的节点节点插入到存在的节点的前面

removeChild(node) 删除box内部的子节点

cloneNode() 克隆obj节点,可以传一个布尔值为参数,如果参数为true,连同obj子元素一起克隆。

replaceChild(新添加的节点, 被替换的节点) 替换子节点

获取元素的非行间样式
getComputedStyle 和 currentStyle
这两个方法的作用是一样的,只不过一个在 非 IE 浏览器,一个在 IE 浏览器
兼容写法:

function getStyle(obj, attr) {//obj:元素对象,attr:css属性名
            if (window.getComputedStyle) {//条件用属性做,不存在就是undefined,标准
                return window.getComputedStyle(obj)[attr];
            } else {//非标准
                return obj.currentStyle[attr];//100px
            }
        }
        console.log(getStyle(oBox, 'position'))

获取盒模型宽高
offsetWidth 和 offsetHeight 盒模块的宽高。没有单位。

事件类型

onkeydown 键盘的如何健都可以触发这个事件 (要加e)
***********keyCode 输出按键对应得数字编码。
***********which属性,获取按键对应得数字同时获取鼠标按键对应得值,新的属性,老版本的ie浏览器不支持。

***********表单
onfocus 当页面或者元素获得焦点时在 window 及相关元素上面触发。

onblur 当页面或元素失去焦点时在 window 及相关元素上触发。

onchange: 当文本框(input 或 textarea)内容改变且失去焦点后触发。

onsubmit: 当用户点击提交按钮在元素上触发。


onmousemove 鼠标在文档移动触发 (要加e)

onmousedown 鼠标点击
***********button属性:获取鼠标的键码–低版本浏览器有兼容问题。
***********which属性,获取按键对应得数字同时获取鼠标按键对应得值,新的属性,老版本的ie浏览器不支持。

onmouseover 鼠标移入事件

onmouseout 鼠标移出事件

鼠标按下(onmousedown)

鼠标松开(onmouseup)

获取鼠标坐标的属性

clientX clientY 原点位置,窗口可视区域左上角为原点

pageX pageY 原点位置,整个页面的左上角(带滚动高度)

screenX screenY 原点位置,整个屏幕的左上角

offsetX offsetY 获取当前操作的盒子离盒子左上角的距离

document.onclick = function (e) {
    var e = e || window.event
    console.log(e.clientX,e.clientY)
}

事件流
netscape-网景-事件捕获(从最不具体的元素到最具体的元素)
microsoft-微软-事件冒泡(从具体的元素到最不具体的元素)

事件冒泡
冒泡是一直存在的,如果你看不到,只是代表父级你没有添加对应得输出。
冒泡必须是事件类型相同。不相同直接跳过,继续上面存在的冒泡。

e.stopPropagation() 停止事件冒泡 最好的方法 标准
e.cancelBubble = true;//了解的 非标准

以上是我个人笔记,不是js全部

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值