• 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>

     

  • 相关阅读:
    数据库操作,内外联查询,分组查询,嵌套查询,交叉查询,多表查询,语句小结
    重复控件Repeater和数据列表控件DataList
    网格视图控件GridView (2)
    用好VS2005之扩展membership服务(1)
    5.4 网格视图控件GridView (1)
    数据源控件
    ASP.NET程序中常用的三十三种代码
    在DataSet和DataReader之间选择
    自定义ASP.net 2.0 Membership的步骤,和entry 'AspNetSqlMembershipProvider' has already been added错误的解决
    INNER JOIN
  • 原文地址:https://www.cnblogs.com/nifengs/p/5313649.html
Copyright © 2020-2023  润新知