jquery入门指南(三)
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() -- 阻止事件冒泡