js学习笔记

// alert('1123123');  弹窗

// prompt('请输入你想要的东西');   输入框

// console.log('输出')   日志框

// var name;   var声明变量

// parseInt() 转化为数字型 去掉单位

// var age = prompt('请输入出生日期');

// 前置++ 先自加，再计算  后置++ 先返回原值，后自加

// 逻辑中断
// 或运算，第一个为真，返回第一个
// 与运算，第一个为真，返回第二个

// 数组创建， var arr = new Array();
//          var arr = [];

// var a = b = c =9;
// 相当于 var a = 9;b = 9;c = 9; bc没有var声明，相当于全局变量

/* 对象构建
function Star(name){
    this.name = name;
    this.fun = function(){

    }
}
var ldh = new Star('刘德华');
------------------------------
function Star(){
    this.name;
    this.fun = function(){
        console.log('冷雨');
    }
}
var ldh = new Star();
ldh.name = '刘德华'
ldh.fun();

遍历对象，
for (var k in obj){
     console.log(obj[k]);  输出属性值
     console.log(k);       输出属性名

}
*/

/* 
    内置对象：
    Math.floor() 向下取整
    Math.ceil() 向上取整
    Math.round() 四舍五入
    Math.abs() 取绝对值

    Date() 构造函数
*/

/*  instanceof  [arr instanceof Array]
    Array.isArray(arr)   检测是否为数组
    unshift() 前面加元素  push() 后面加元素
    pop()删除最后一个元素  shift()删除前面的元素

    升序： arr.sort((a, b) => a - b);
    降序： arr.sort((a,b) => b - a);

    indexof('值') 返回第一个的索引号
*/

// 基本包装类型：Number Boolean String

// ----------------------------Web Apis---------------------------------
/*
    获取元素 :

    document.getElementById()       通过ID获取
    document.getElementsByTagName() 通过标签获取

    通过指定父元素获取  父元素不能是伪元素:(一般通过父元素的ID指定父元素)
    var ul = document.getElementById('ul')
    console.log(ul.getElementsByTagName('li'));

    《H5》通过class选择元素：
    document.getElementsByClassName('')

    《H5》选择器   .name为类 #name为ID  
    document.querySelector('')      返回第一个元素对象
    document.querySelectorAll('')   返回指定元素的所有

    document.body   获取body
    document.documentElement  获取html


*/

/*
    事件:   
    三要素：事件源,事件类型（触发条件）,事件处理程序
    * 先获取事件
    * 触发事件的类型
    * 事件所触发的内容
    eg:
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            alert('hi');
        }
        点击按钮触发 弹出框hi

    鼠标触发：
        onclick             点击
        onmouseover         经过
            自身和子盒子都会触发
        onmouseenter
            自身触发
        onmouseout          离开
        onfoucus            获得焦点
        onblur              失去焦点
        onmousemove         鼠标移动
        onmouseup           鼠标弹起
        onmousedown         鼠标按下

    修改元素的文本：
    element.innerText  不识别HTML标签
    element.innerHTML   识别HTML标签 （推荐） 
    
    修改属性：
    type value checked selected disabled

    修改样式属性：
    element.style 单条
    element.className eg:this.className = 'change' 覆盖原来类
    
    获取属性：
    element.getAttribute('属性'); 可获取自定义属性  
    element.dataset.属性名 H5新增

    更改自定义属性值：【重要】
    命名方式：  data-属性名 = '1' 
    element.setAttrbute('属性','值');
    element.getAttrbute('属性')  获取值
    element.setAttribute('class','name') 修改类

    删除属性：
    element.removeAttribute('属性');

    节点操作：
    nodeType    节点类型
    nodeName    节点名称
    nodeValue   节点值
    
    元素节点 nodeType = 1 【重要】
    属性节点 nodeType = 2
    文本节点 nodeType = 3 （包括文字，空格，换行）

    node.parentNode 父节点 得到离元素最近的节点 如果没有返回null
    node.childNodes 获取子节点 包含文字节点
    node.children （非标准）获取子元素节点 【重要】
    node.firstChidl 第一个子节点
    node.lastChidl  最后一个子节点
    node.firstElenmentChild 第一个子元素节点【重要】
    node.lastElenmentChild  最后一个
    node.children[number]   获取子元素
    node.nextSibling    返回当前元素的下一个兄弟节点
    node.previousSibling 返回上一个兄弟节点
    node.nextElenmentSibling 下一个兄弟元素节点
    node.previousElenmentSibling 上一个兄弟节点

    创建节点：
    doucument.createElenment('tagName') 动态创建元素节点
    添加节点：
    node.appendChild(child) none父节点 child子节点
    node.insertBefore(child,指定元素)
    先创建，再添加
    node.removeChild()  删除子节点
    node.cloneNode()    复制节点 括号为空为浅拷贝  括号里为true为深拷贝
 
    innerHTML   采用数组形式 创建多个元素效率更高 
    createElement 结构更清晰
 
 
    注册事件（绑定事件）：
    传统注册事件的唯一性，相同元素只能设置一个处理函数
 
    w3c推荐：方法监听:
    addEventListener()
    eventTarget,addEventListener('type',listener,[useCapture])
    type:       事件类型字符串：click，mouseover
    listener:   事件处理函数
    useCapture: 可选参数
 
    删除事件：
    element.onclick = null;
    addEventListener() 在 funtion中添加removeEventListener()

    事件对象：e.event,evt
    element.addEventListener('click',funtion(event){

    })
 

    e.target    返回触发事件的对象
    this        返回绑定事件的对象
    e.srcElenment ie6使用
    e.type      返回触发事件类型

    阻止默认行为：链接不跳转，提交按钮不提交
    e.preventDefault(); 
    e.returnValue;      低版本浏览器

    阻止冒泡：
    e.stopPropagation();       w3c标准
    e.cancelBubble = ture;     低版本

    事件委托(代理，委派):
    不给子节点单独设置事件监听器，给父节点设置事件监听器，利用冒泡原理影响每个子节点
    给ul设置点击事件，利用事件对象target寻找当前点击的li

    常用鼠标事件：contextmenu   
    document.addEventListener('contextmenu',function(e){
        e.preventDefault();
    })禁用默认右键菜单

    document.addEventListener('selectstart',function(e){
        e.preventDefault();
    })禁止选中文字

    获取鼠标坐标：
    e.clientX
    e.clientY       可视窗口的坐标
    e.pageX
    e.pageY         文档页面的坐标 ie9+

    键盘事件：
    onkeyup     按键松开时触发
    onkeydown   按键按下时触发
    inkeypress  按下触发，不识别功能按键 优先于上面两个

    获取按下按键的ASCII码：
    e.keyCode   keyDown & keyUp 不区分字母大小写

            

    BOM对象：

    调整窗口大小触发事件：
    windouw.onresize = funtion(){}
    window.addEventListener('resize' funtion(){})

    window.innerWidth 获取当前窗口宽度


    一次性定时器：
    window.setTimeout(function(),延迟毫秒数)
    var time = setTime();
    
    循环定时器:
    setInterval(function(),循环时间)
    var timer = setInterval()

    清除定时器
    clearTimeout('name')
    clearInterval('name')

    location对象:
    location.href   获取url
    location.search 返回参数【重要】
----------------------------------------------------------------
    eg: 获取提交数据
        // 去掉问号
        var params = location.search.substr(1);
        // 分割字符串
        var uname = params.split('='); 
----------------------------------------------------------------
    location.hash   返回片段
    
    location.assign()    和href一样，可以跳转页面（重定向）
    location.replace()   替换当前页面，不能后退
    location.reload()    刷新页面 

    navigator.userAgent 获取用户设备信息[判断是否为手机或者电脑]

    
    history.forward()   页面前进
    history.back()      页面后退

    网页特效：
        offset: 动态获取元素属性
        element.offsetParent        返回带有定位的父元素，无则返回body
        element.offsetTop           返回带有定位父元素的上方偏移
        element.offsetLeft          返回父元素的左偏移
        element.offsetWidth         返回自身padding，边框，内容区域的宽度
        element.offsetHeight        返回高度

    client: 元素可视区
        element.clientTop           返回上边框
        element.clientLeft          返回左边框
        element.clientWidth         返回自身元素包括padding，不包括边框
        element.clientHeight

    立即执行函数：
        (function() {})() 无需调用，立马执行，多个函数用 ; 分割
    e.g:
        (function(a,b){
            console.log(a + b);
        })(1,2)

    pageshow:相当于页面重新加载
        window.addEventListener('pageshow',function(){})


    scroll：    元素滚动
        element.scroolTop           返回被卷上去的上侧距离
        element.scroolLeft          返回被卷去的左侧距离
        element.scroolWidth         返回自身实际宽度(包含超出内容)，不带单位
        element.scroolHeight        

        window.pageYOffset   整个页面被卷去上侧


    动画实现原理：【重要】 
        通过定时器setInterval()不断移动盒子位置；
    
    动画封装：
        animate(onj,target);
        传递 2 个参数；动画对象和移动距离
        通过对象给不同的元素指定不同的对象obj.timer
        点击执行时，先清除interval，保持只有一个定时器执行

        缓动动画：
            让盒子每次移动的距离减小
            算法：(目标值—现在位置) / 10  作为步长
            向上取整，Math.ceil()

    classList:
        classList.add()                 添加
        classList.remove()              删除
        classlist.replace('','')        前面代替后面
        classlist.toggle('')            切换类名



    window.sessionStorage       本地存储
        存储
            sessionStorage.setItem(key,value)
        获取
            sessionStorage.getItem(key)
        清除
            sessionStorage.removeItem(key)
        删除所有
            sessionStorage.clear()


    window.localStorage         本地存储，永久存在
        存储
            localStorage.setItem(key,value)
        获取
            localStorage.getItem(key)
        清除
            localStorage.removeItem(key)
        删除所有
            localStorage.clear()
*/

/**JQuery库
    
    $(funtion(){
        // 等页面加载完毕执行代码

    })
    
    jquery顶级对象 $
        获取对象:
            $('')
        转换对象：
            $(DOM对象)   DOM->JQuery
            $()[0]      JQery->DOM

    JQuery常用API
        获取对象：
            $("选择器")
        设置样式：
            $().css('属性','值')
        筛选选择器：
            $('li:first')
            $('li:eq(2)')
        选择器：
            $().parent()    父亲选择器
            $().children()  亲孩子选择器
            $().find()      后代选择器
            $().sibling()   兄弟选择器
            $().nextAll()   此元素之后的所有同级元素
            $().prevALL()   此元素之前的所有同级元素
            $().hasClass()  判断当前元素是否有某个类
        排他思想：
            $('button').click(function(){
                $(this).css('background','pink')
                $(this).siblings('button').css('background','pink')
            })
        操作类：
            $().addClass('')        添加类
            $().removeClass('')     删除类
            $().toggleClass('')     切换类


    JQuery效果
        滑动：
            slideDown();
            slideUp();
            slideToggle();
        淡入淡出：
            fadeIn()
            fadeOut()
            fadeToggle()
            fadeTo()
        自定义动画:
            animate()
        事件切换：
            $().hover(function(){},function(){})
        停止动画队列：
            $(this).children("ul").stop().slideToggle(200);
            .stop()写在动画的前面！
    
    JQuery属性：
        $().prop(属性)      获取自带属性
        $().prop('属性','属性值')       修改自带属性
        $().attr('属性','属性值')       修改自定义属性
        数据缓存： 
            $().data('','')            缓存数据，退出浏览器消失

    JQuery修改文本内容
        $().html('')        修改内容
        $().text('')        修改文本内容
        $().val('')         获取表单内容

    JQuery元素操作
        遍历：
            $().each(function(index,domEle){})
            处理数据：遍历数据
            $.each(obj,function(index,domELe){})
        添加：
            内部添加：
                $().append(ele)         放到内容的后面
                $().prepend(ele)        放到内容的前面
            外部添加：
                $().after()             放到后面
                $().before()            放到前面
        删除：
            $().remove()        删除元素本身
            $().empty()         删除所有子节点
            $().html('')        清空内容

    JQuery尺寸位置：
        width()             只算width和height
        innerWidth()        包含padding
        outerWidth()        包含padding border
        outerWidth(ture)    包含padding border margin

        offset()                获取元素对于文档的偏移坐标，和父级没有关系
        position()              获取元素对于有定位父级的坐标
        scrollTop()/Left()

    事件处理:
        $().on({
            mouseenter: function(){

            }
            click:function(){

            }
        })
    事件委派:
        $('ul').on('click','li',function(){
            // 可以适用未出现的元素上
        })
    事件解绑:
        $().off()
        $().one()       事件只触发一次
    自动触发事件:
        $().trigger('')     
        $().triggerHander('')       不会触发自带事件
    事件对象：
        阻止冒泡：
            event.stopPropagation()
        拷贝对象：
            $.extend([deep],target,obj)         obj拷贝给target
    多库共存：
        修改$名称
            var name = $.noConflict();
        


    JQuery插件：
        

 */