前端学习(二十四)一些总结(笔记)

javascript的组成部分?
    ECMAScript             核心解释器
    DOM                 文档对象模型
    BOM                 浏览器对象模型

    DOM
        DOM树
            html页面的结构关系
        获取子节点
            父级.children             获取第一层子节点
        获取父节点
            结构父级
                oEle.parentNode
            定位父级
                oEle.offsetParent
        创建节点
            document.createElement('标签名');
        插入
            父级.appendChild(新节点);
                从父级的后面添加
            父级.insertBefore(新节点,在谁之前插入);
                在某个节点之前插入
        删除    
            父级.removeChild(子节点);
事件
    事件对象
        包含了事件触发的详细信息
        ev         高版本浏览器
        event     低版本浏览器
        oBtn.onclick = function(ev){
            var oEvent = ev||event;
            oEvent.clientX
            oEvent.clientY

            oEvent.pageX
            oEvent.pageY
        };

        事件绑定(事件监听)
            oEle.addEventListener('sEv', fn, false);
            高版本
            oEle.attachEvent('onsEv', fn);
            低版本

        定义函数
        function addEvent(obj, sEv, fn){
            if(obj.addEventListener){
                obj.addEventListener(sEv,fn,false);
            }else{
                obj.attachEvent('on'+sEv,fn);
            }
        }
        调用
        addEvent(oBtn,'click',function(){
            alert(1);
        });

        事件解绑
        定义函数
        function removeEvent(obj, sEv, fn){
            if(obj.removeEventListener){
                obj.removeEventListener(sEv,fn,false);
            }else{
                obj.detachEvent('on'+sEv,fn);
            }
        }
        调用
        removeEvent(oBtn,'click',function(){
            alert(1);
        });

        匿名函数不能被解绑

        原因:匿名函数虽然长得一样,但是不是一个
            var show = new Function();
            function show(){}

        事件流
            DOM事件流
                冒泡阶段         捕获阶段
            IE事件流
                冒泡阶段


            取消冒泡
                ev.cancelBubble = true;

        默认事件、默认行为
            浏览器自己实现的功能
            阻止默认事件
                return false;
                遇到addEventListener不兼容
                ev.preventDefault&&ev.preventDefault();

        事件委托、事件委派、事件派生
            给父级添加事件
            获取事件源
                var oSrc = ev.srcElement||ev.target;


        onmouseover和onmouseout的bug
            换事件
                onmouseenter
                onmouseleave

        DOMReady
            方法一          推荐
                document.addEventListener('DOMContentLoaded',function(){

                },false);
            方法二
                document.onreadystatechange = function(){
                    if(document.readyState=='complete'){

                    }
                };
================================================================
键盘事件
    键盘按下事件
        onkeydown
    键盘抬起事件
        onkeyup

        区分按键:键码
            oEvent.keyCode

            backspce         8
            回车             13
            空格             32

=============================================================
    拖拽回放
=============================================================
jquery
    $(function(){

    })();
    推荐以下做法
    $(document).ready(function(){

    });


    DOM操作
        appendTo
        prependTo
        remove



------------------------------------------------------------
JQuery中的事件
    都是绑定上去的
        $().on             绑定事件
        $().off          解绑事件

        事件委托
        $('ul').on('click','li',function(){

        });
=============================================================
    原生对象和jquery对象
        原生对象
            document.getElementById();
            document.getElementsByTagName();
        jquery对象
            $();

            原生对象和jquery对象不互通。

            原生对象和jquery对象之间的转换
                原生对象-》jquery对象
                    $(原生对象)
                jquery对象-》原生对象
                    $().get(下标)
                    $()[下标]

    $().each()             //操作jquery元素的
        $('ul li').each(function(index,oEle){
            index             索引
            oEle             遍历出来的原生对象
            this             遍历出来的原生对象

            oEle==this
        });
=============================================================


    获取相对位置
    obj.offsetLeft
    obj.offsetTop


    $().position()

    --------------------------------------------------

    获取绝对位置
    getPos().left/top


    $().offset()
=============================================================
    宽
    $().width()
    高
    $().height()
    宽+padding*2
    $().innerWidth()
    高+padding*2
    $().innerHeight()

    宽+padding*2+border*2
    $().outerWidth()
    高+padding*2+border*2
    $().outerHeight()

=============================================================
    插件机制
        定义一个插件
        $.fn.toRed = function(){
            this.css('background','red');
        };
        批量定义插件             √
        $.fn.extend({
            名字:function(){}
        });
============================================================
    jquery中
        return false
            阻止默认事件
            取消冒泡
============================================================
CSS3
    选择器
    transition
    transform
    text-shadow
    linear-gradient
    radial-tradient
    border-radius
    animation
    -webkit-mask
    浏览器前缀

    box-shadow: x y blur color;


=====================================================
    浏览器前缀
        -webkit-         Chrome、Safari、Opera
        -moz-             Firefox
        -ms-             IE
        -o-             Opera
        不加前缀


        -webkit-transition:1s all ease;
        -moz-transition:1s all ease;
        -ms-transition:1s all ease;
        -o-transition:1s all ease;
        transition:1s all ease;


        用js操作浏览器前缀
        css                     js
        -webkit-transition        WebkitTransition
        -moz-transition         MozTransition
        -ms-transition             msTransition
        -o-transition            OTransition
        transition              transition


        setC3Style(obj,sName,sValue);

    transform         变形
        rotate             旋转         deg
        translate         平移
        scale             缩放

        原点
            中心点
            transform-origin

        CSS3简易时钟

            1圈         360°
            12h         1h     ==     30°
            60m         1m     ==     6°
            60s         1s    ==    6°


            5             1
            10             2
            15             3
            20            4
==============================================================
    transform     多个值
        有先后执行顺序,后面的先执行
    transform 注意
        不能操作行元素

    文本切片
        -webkit-background-clip:text;
        -webkit-background-clip     一定要设置在背景颜色后面
==============================================================
    移动端
        手机、平板、watch、电视

        pc端怎么写,移动端就怎么写。
        而且还简单了。不需要注意兼容。东西少。
        只不过移动端需要注意尺寸。


        移动端方式:
            定宽
            百分比
            ----------------------------------------------
            响应式
                只有一套页面,在不能尺寸的设备上用不同的样式
            弹性
            rem
=============================================================
总结:
    键盘事件
        onkeydown             键盘按下
        onkeyup                 键盘抬起

            获取键码
                oEvent.keyCode

    JQuery
        $(document).ready();
        事件
            $().on(sEv,['委托'],function(){});
            off
        循环
        $().each(function(index,oEle){
            index             索引
            oEle             原生对象
            this             原生对象
        });
        原生对象和jquery对象的转换
            原生对象-》jquery对象
                $(原生)
            jquery对象-》原生对象
                $()[下标]
                $().get(下标)
        宽高
        $().width()
        $().height()
        宽高+padding
        $().innerWidth()
        $().innerHeight()
        宽高+padding+border
        $().outerWidth()
        $().outerHeight()

        获取定位
            相对定位
                $().position().left/top;
            绝对定位
                $().offset().left/top;
        插件扩展
            //jquery中所有的this都是原生对象,只有一个例外
            插件中的this是jquery对象
            $.fn.xxx = function(){
            };
            $.fn.extend({
                xxx:function(){}
            });

        取消冒泡,阻止默认事件
            return false;

            单独阻止默认事件
                ev.preventDefault()
            单独取消冒泡
                ev.stopPropagation();
-------------------------------------------------------
    CSS3
        浏览器前缀
            -webkit-             Chrome,Safari,Opera
            -moz-                 Firefox
            -ms-                 IE
            -o-                 old Opera
            不加前缀             
        transform
            原点
                -webkit-transform-origin
            transform的书写顺序:
                后写的先执行
            文本切片
                -webkit-background-clip:text;
                切记,一定要写在背景色后面。

posted @ 2018-09-03 16:48  王小鱼Oo  阅读(128)  评论(0编辑  收藏  举报