,e.clientX 元素坐标
原生js中有三大家族: offset scroll client
//offset家族中有:offsetLeft offsetTop offsetWidth offsetHeight
//offsetLeft: 元素左外边框距离他的定位父级(offsetParent)左内边框之间的距离.
//offsetTop: 元素上外边框距离他的定位父级上内边框之间的距离.
DOM中的方法
scrolltop向上卷曲出去的值
scrollleft向左卷曲出去的值
scrollWith元素内容的宽
scrollHigth元素内容的宽
onscroll 事件
jq中是scroll
jq中
//1.jQuery中,也有offset()方法. 他代表什么意思,是不是和原生js中的offsetLeft/offsetTop一样的. 不是.
//offset()方法返回的是一个对象,里面包含top和left的值.
//offset()方法获取元素距离document的位置
$('#btn1').on('click', function () {
//console.log($('#son').offset());
//设置,参数是一个对象.
$('#son').offset({
left:200,
top:200
});
//注意:
//如果这个元素没哟定位,设置offset()系统会自动给他添加一个relative的定位.
});
//2.position()方法获取的是元素距离有定位的父元素(offsetParent)的位置
//position()方法返回的也是一个对象,包含top和left的值.
$('#btn2').on('click', function () {
//console.log($('#son').position());
//不能设置.下面代码没有效果
// $('#son').position({
// left:200,
// top:200
// });
});
$(function () {
//原生js中的三大家族:scrollTop scrollLeft.
//jQuery中也有scrollLeft(); scrollTop();他们代表的意思和原生的一样吗? 是一样
//都表示滚动出去的距离.
$('#btn').on('click', function () {
//获取.
//console.log($('div').scrollLeft() + ":" + $('div').scrollTop());
//设置滚动出去的部分的距离.
$('div').scrollLeft(100);
$('div').scrollTop(100);
});
//2.2 事件对象e里面的 常用的三个坐标
// console.log("screenX :"+e.screenX + "-" + e.screenY); //屏幕左上角 距离触发事件的那一点的距离
// console.log("clientX :"+e.clientX + "-" + e.clientY); //页面可视区左上角距离触发事件的那一点之间的距离.
// console.log("pageX :"+e.pageX + "-" + e.pageY);//页面左上角 距离触发事件那一点之间的距离.
outerWidth(true); outerHeight(true); //方法返回元素的宽度/高度(包括内边距和边框和外边距)。
innerWidth(); innerHeight(); //方法返回元素的宽度/高度(包括内边距)。
//7.获取网页的可视区宽高
// 获取可视区宽度 $(window).width();
// 获取可视区高度 $(window).height();
console.log($(window).width());
console.log($(window).height());