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>
