首页投稿(暂停使用,暂停投稿)程序员

jquery入门指南(三)

2016-12-06  本文已影响0人  经典de1956

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() -- 阻止事件冒泡

上一篇下一篇

猜你喜欢

热点阅读