2021/6/12 js基础+BOM+DOM+jQuery

‘‘‘
js小知识
    js注释
    /*多行注释*/
    //单行
    引入方式
    <script src="js路径"></script>
    <script>
        window.onload=function(){js}
        $(document).ready({js})
        $(function(){js})
    <script>
    结束符
        ;
js基础
    var
    let
    const
    数据类型
        number
            parseInt()
            parseFloat()
        string
            .length
            .trim()
            .trimLeft()
            .trimRight()
            .charAt(index)
            .concat(obj)
            .indexOf(substring, start)
            .substring(start,end)
            .slice(start, end)
            .split(‘‘, count)
            .toLowerCase()
            .toUpperCase()
            .match(‘re‘)
        boolean
            true false
            false:空字符串、0、null、undefined、NaN
        null：值为空，可用于赋值变量，清除原有值
        undefined：定义未初始化赋值，函数没有返回值也是返回undefined
        typeof  返回一个变量的类型
    运算符
        + - * / % ++ --
        > >= < <= != == !== ===
        && || !
        = += -= *= /= %=
    流程控制
        if (){}else {}
        if (){}else if (){}
        switch (){case: xxx;break;default: xxx;break;}
        for (;;){}
        while (){}
        a > b ? a : b
    函数
        function xx(){}
        var a = function(){}
        (function(){})();
        var a = b => b;
        arguments：以列表的形式存放所有参数值
        词法分析
            函数参数：参数名作为AO的属性名，属性值赋值undefined
            局部变量：变量名名作为AO的属性名，属性值赋值undefined
            函数声明：函数名作为AO的方法名，方法值赋值函数声明
    对象
        数组
            var a = [1,2,3]
                .length
                .push(obj)
                .pop()
                .unshift(obj)
                .shift()
                .reverse()
                .slice(start, end)
                .sort(func)
                .join(seq)
                .concat(obj)
                .splice(index, count, obj)
                .forEach(function(value, index, obj), thisValue)
                .map(function(value, index, obj), thisValue)
        自定义对象
            var a = new Object()
                k 只能是字符串
            var a = new Map()
                k 可以是任意
                a.set(k, v)
                a.get(k)
                a.delete(k)
                a.has(k)
        Date对象
            var a = new Date()
                ‘y/m/d h:m‘
                ‘m/d/y h:m‘
                getTime()
                (y,m,d,h,m,s,ms)
                .getYear/Month/Date/Hours/Minutes/Seconds/Milliseconds
                .getFullYear/Day/Time
                .toLocaleString()
        JSON对象
            JSON.parse()
            JSON.stringify()
        RegExp对象
            var a = new RegExp(‘re‘)
            var a = /re/g;
                .test(string)
                .lastIndex = 0
        Math对象
            Math
                .abs/pow/round/floor/random/sin/tan/max/min/sqrt/log/exp()
        FormData对象
            var a = new FormData()
            obj = $().files[0]
            a.readAsdataURL(obj)
            a.result
            a.append(k,v)
BOM操作
    window
        .innerHeight
        .innerWidth
        .open(url, ‘_blank/_self‘, ‘attr‘)
        .close()
    navigation
        .appName
        .appVersion
        .userAgent
        .platform
    screen
        .availHeight
        .availWidth
    history
        .back()
        .forward()
    location
        .href
        .href=""
        .reload()
    弹出框
        alert()
        confirm()
        prompt(‘‘, ‘‘)
    计时相关
        setTimeout(‘js代码‘,ms)
        clearTimeout()
        setInterval(‘js代码‘, ms)
        clearInterval()
DOM操作
    document：文档节点
    element：元素节点
    text：文本节点
    attribute：属性节点
    comment：注释节点
    查找标签：
        直接查找
            document.getElementById(‘‘)
                    .getElementsByClassName(‘‘)
                    .getElementsByTagName(‘‘)
        间接查找
            .parentElement()
            .children()
            .firstElementChild()
            .lastElementChild()
            .nextElementSibling()
            .previousElementSibling()
    元素节点操作
        创建节点
            document.createElement(‘标签名‘)
        增加儿子
            .appendChild()
            .insertBefore(new, old)
        删除儿子
            .removeChild()
        替换儿子
            .replaceChild(new, old)
    属性节点操作
        文本节点
            .innerText = ""
            .innerHTML
        节点属性
            .setAttribute(‘attr‘, ‘value‘)
            .getAttribute(‘attr‘)
            .removeAttribute(‘attr‘)
        获取节点属性
            .属性名
            .value  获取标签value属性值
            .files  获取标签传输的文件对象FileList [0]代表文件数据
        class属性操作
            classList
                add()
                remove()
                contains()
                toggle()
        CSS样式操作
            .style
                .样式属性名
事件
    常用事件
        .onclick
        .ondblclick
        .onfocus
        .onblur
        .onchange
        .onselect
        .onkeydown
        .onkeyup
        .onkeypress
        .onmousemove
        .onmouseover
        .onmouseout
        .onmousedown
        .onload
        .onsubmit
    事件绑定
        onclick="func()"
        $().onclick = function(){}
jQuery
    var $xxx = jQuery对象
    $(DOM对象) = jQuery对象
    $(选择器)[0] = DOM对象
    查找标签
        基本选择器
            $(‘#id/.class/TagName/*‘)
            $(‘#id, .class, TagName‘)
        层级选择器
            $(‘x y/x > y/x + y/x ~ y‘)
        属性选择器
            $(‘x[a=b/a!=b/a^=b/a$=b/a*=b/a~=b]‘)
        基本筛选器
            $(‘:first/last/eq(index)/even/odd/lt(index)/gt(index)/not(选择器)/has(选择器)‘)
        input筛选器
            $(‘:text/password/checkbox/radio/submit/button/reset/file‘)
        表单筛选器
            $(‘:enabled/disabled/checked/selected‘)
        筛选器方法
            next/nextAll/nextUntil(选择器)
            prev/prevAll/prevUntil(选择器)
            parent/parentsAll/parentsUntil(选择器)
            children()
            sibling()
            first()
            last()
            find()
            filter()
            not()
            has()
            eq()
    操作标签
        样式操作
            addClass()
            removeClass()
            hasClass()
            toggleClass()
        位置查看
            offset()
            position()
            scrollLeft()
            scrollTop()
        尺寸操作
            height()
            width()
            innerHeight()
            innerWidth()
            outerHeight()
            outerWidth()
        文本操作
            text()
            html()
            val()
        属性操作
            attr()
            removeAttr()
            prop()
            removeProp()
        标签操作
            append()
            appendTo()
            prepend()
            prependTo()
            after()
            insertAfter()
            before()
            insertBefore()
            remove()
            empty()
            replaceWith()
            replaceAll()
            clone(true)
事件
    常用事件
        click/keyup/hover/focus/blur/change/ready
    事件绑定
        $().on(‘事件‘, ‘选择器‘, function(){})
        $().click(function(){})
    事件解除
        $().off(‘事件‘, ‘选择器‘, function(){})
    阻止默认事件
        return false
        event.preventDefault()
    阻止冒泡事件
        return false
        event.stopPropagation()
    事件委托
        $().on(‘click‘, ‘div‘, function(){})
    页面载入
        $(function(){})
        $(document).ready(function(){})
动画效果
    show()
    hidden()
    Toggle()
    slideDown()
    slideUp()
    slideToggle()
    fadeIn()
    fadeOut()
    fadeTo(ms,淡化度)
    fadeToggle()
    animate()
增加
    .each(a, function(index, obj){})
    .data(k, v)
    .data(k)
    .removeData(k)
    jQuery.extend({
        zzw:function(){}
    })
    jQuery.zzw()
    jQuery.fn.extend({
        zzw:function(){
            return this.each({
                this.DOM方法
            })
        }
    })
    jQuery对象即可调用该方法
    $().serializeArray()
‘‘‘

原文：https://www.cnblogs.com/zhangzhuowei/p/14877731.html