jquery入门指南(三)

作者: 经典de1956 | 来源:发表于2016-12-06 00:32 被阅读0次

    jquery的内容很多,可以查看参考手册,参考手册我不知道怎么发,想要的可以留言。
    位置:
    原生: offsetLeft 、 offsetTop 、 left top

    jquery:

         var l = $('#div1').position().left;
         var t = $('#div1').position().top;
    

    宽度:
    $(obj).width()/height(); 纯宽高
    $(obj).innerWidth()/innerHeight() 宽高+padding
    $(obj).outerWidth()/outerHeight() 盒子模型宽高

    $(obj).offset().left/top; 绝对位置
    $(obj).position().left/top; 到定位父级

    $(window).width()/height() 可视区

    .innerWidth() 普通宽度 + padding
    .outerWidth() 普通宽度 + padding + border

    <style>
            #div1{
                width: 100px;
                height: 200px;
                padding: 20px;
                margin: 30px;
                border: 10px solid #000000;
            }
        </style>
        <script src="js/jquery-1.7.2.js"></script>
        <script>
            $(function(){
                var w = $('#div1').outerWidth();
                alert(w);
            });
        </script>
    </head>
    <body>
    <div id="div1"></div>
    </body>
    

    DOM操作:
    $('#div1').append($('< p >内容区</p >'));
    $('< p>内容区2< /p>').appendTo($('#div1'));
    在元素里面追加(append)

    $('#div1').prepend($('< p >内容区< /p >'));
    $('< p >内容区< /p >').prependTo($('#div1'));
    在元素里面-前面加(insertBefore)

    $('#div1').after($('<a href="#">连接</a>'));
    .after 目标后面
    $('#div1').before($('<a href="#">连接</a>'));
    目标前面

    .remove() 删除
    .remove(表达式) 把匹配的元素删除

    事件:
    jquery 都是绑定
    .bind();
    .unbind();

    事件委托:

     $('ul').delegate('li','click',function(){
                alert($(this).html());
            });
          $('ul').undelegate();
    

    阻止默认行为:
    return false; -- 阻止默认行为 和 事件冒泡
    ev.preventDefault(); -- 阻止默认行为
    ev.stopPropagation() -- 阻止事件冒泡

    相关文章

      网友评论

        本文标题:jquery入门指南(三)

        本文链接:https://www.haomeiwen.com/subject/ivblmttx.html