• jQuery知识盲点


    一、属性操作

    元素的尺寸

    width() height()

    innerWidth() innerHeight()

     outerWidth() outerHeight()

     

    $('div').width() ;  //width
    
    $('div').innerWidth() ;  //width + padding
    
    $('div').outerWidth() ;  //width + padding + border
    
    $('div').outerWidth(true);  //width + padding + border + margin

     

    //$('#div1').width(200);
        
        //$('#div1').innerWidth(200);   //width : 200 - padding
        
        //$('#div1').outerWidth(200);     //width : 200 - padding - border
        
        $('#div1').outerWidth(200,true);   //width : 200 - padding - border - margin

     

        
        //alert( $('#div1').get(0).offsetWidth );   //原生JS是获取不到隐藏元素的尺寸
        
        alert( $('#div1').width() );  //JQ是可以获取隐藏元素的尺寸
    //alert( $(window).height() );     //可视区的高
        
        alert(  $(document).height()  );  //页面的高
    //alert( $(document).scrollTop() );   //滚动距离
            
            //$(document).scrollTop()  == $(document).height() - $(window).height()

     

     

    二、DOM操作

    insertBefore() before()

    insertAfter() after()

    appendTo() append()

    prependTo() prepend()

    append() : 把元素添加到指定的节点的里面的最后

    prepend() : 把元素添加到指定的节点的里面的最前面

    before() : 把元素添加到指定的节点的前面

    after() : 把元素添加到指定的节点的后面

     

     1.insertBefore

    <body>
    <div>div</div>
    <span></span>
    
    <script>
        $(function () {
            $('span').insertBefore($('div'));
            //把span 标签放到div的前面,类似剪切功能与js的用法一致
            //结果显示
           /* 
            <span>span</span>
            <div>div</div>
            */
        });
    </script>
    
    </body>

    2、insertAfter() 

    在原生js中是没有改方法的,用法与insertBefore类似

    3.appendTo()

    与原生的js中appendchild 用法类似的

    <body>
    <span>span</span>
    <div>div</div>
    
    <script>
        $(function () {
            $('span').appendTo($('div'));
            //结果显示 span在div里面的最后位置
            /*
             <div>
                div
                 <span>span</span>
             </div>
             */
        });
    </script>
    
    </body>

    4.prependTo()

    <body>
    <span>span</span>
    <div>div</div>
    <script>
        $(function () {
            $('span').prependTo($('div'));
            //结果显示 span在div里面的最前的位置
            /*
             <div>
                 <span>span</span>
                   div
             </div>
             */
        });
    </script>
    </body>

     before()  after()  append()  prepend()与之前是对应的

    如before()

    <body>
    <span>span</span>
    <div>div</div>
    <script>
        $(function () {
            $('span').before($('div'));
            //结果显示 这个before更像动词,把div放到了span的前面,
            /*
             <div>div</div>
             <span>span</span>
             */
        });
    </script>
    </body>

    三、get JQ转为原生的

    $(function(){
        
        //alert( $('div').get(0).innerHTML );get() : 把JQ转成原生JS , 默认情况获取的是一个原生的集合,那么可以通过参数来找到集合中的指定项
        
        alert( $('div').eq(0).html() );
        
    });

     

    四、事件细节

    ev : event对象

    在jquery中直接用ev 不需要再向js要做兼容处理var ev=ev || window.event

    <body>
    <span>span</span>
    <div>div</div>
    <script>
    
        /*$('div').click(function(ev){
    
         //ev : event对象
    
         //ev.pageX(相对于文档的) 与js中的 clientX(相对于可视区)类似
    
         //ev.which(键值) : js keyCode
            
         ev.preventDefault();  //阻止默认事件
    
         ev.stopPropagation();  //阻止冒泡的操作
    
         return false;   //阻止默认事件 + 阻止冒泡的操作
    
         });*/
    
        $('div').one('click',function(){  //只执行事件一次
            alert(123);
        });
    
    </script>
    </body>

     

  • 相关阅读:
    06-引用类初始化问题
    mac系统下Eclipse + pydev配置python Interpreter
    spring 整合mongodb报NoSuchMethodError错误
    mybatis在spring(Controller) 中的事务配置问题
    IT经理工作职责
    postman具体讲解
    用Jmeter进行接口测试及乱码问题
    购物车测试点
    web测试流程的总结及关注点
    fiddler常见的应用场景
  • 原文地址:https://www.cnblogs.com/nifengs/p/5313649.html
Copyright © 2020-2023  润新知