jquery-get-data(width,height,position,(top,left),scrollTop,scrollLeft)获取数据

获取尺寸

如下:

heigh([val|fn])

width([val|fn])

innerHeight()

innerWidth()

outerHeight([soptions])

outerWidth([options])

下面就一一介绍(这里多说一下jquery中很多都是既可以返回匹配元素的值,又可以设置匹配元素值)

height()取得匹配元素当前计算的高度值(px)。

width()取得第一个匹配元素当前计算的宽度值(px)。

/此2个方法对可见和隐藏元素均有效。另外这个补白就是padding/

innerHeight() 获取第一个匹配元素内部区域高度(包括补白、不包括边框)。

innerWidth() 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。

/此2个方法对可见和隐藏元素均有效。另外这个补白就是margin(当outerheight()值为true时才会包括margin一会用例子说明)/

outerHeight([soptions]) 获取第一个匹配元素外部高度(包括补白和边框)。

outerWidth([options]) 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。

下面是一个例子:

css代码块

 <style type="text/css">
        .div{
            width: 150px;height: 120px; background-color: green; padding: 10px;border: 12px solid #009999;
            margin: 20px
        ;
        }
    </style>

jquery代码块

 $(function(){
            console.log($(‘div‘).width()+‘+‘+$(‘div‘).innerWidth()+‘+‘+$(‘div‘).outerWidth());
            var k = $(‘div‘).height()+‘+‘+ $(‘div‘).innerHeight()+‘+‘+$(‘div‘).outerHeight()+‘+‘+$(‘div‘).outerHeight(true) ;
            alert(k);
})

html代码块

<body>
     <div class="div"></div>
</body>

反馈回的结果为:

alert==>>120+140+164+204

console==>>150+170+194

从( k = (′div′).height()+′+′+(‘div’).innerHeight()+’+’+(′div′).outerHeight()+′+′+(‘div’).outerHeight(true))中我们可以得到:

$(‘div’).height()为120

$(‘div’).innerHeight()=120+padding(left,right)10+10=140

$(‘div’).outerHeight()=140+border(left,right)12+12=164

$(‘div’).outerHeight(true)=164+margin(left,right)20+20=204

所以这样我们就明白了get 元素 data的用法了

这个对于以width,innerwidth,outerwidth同样相同

接下来说下get获取scroll data元素滚动数据

首先看个例子

$(document).ready(function(){
              $(document).click(function(){
                    alert($(window).scrollTop()) ;
              })
 });
<body>
      <Span>span</Span>
<p>in pass</p>
<h1>p_h1</h1>
<p>dhgszfjzdggxdgxdgxfgxgxfdhdhcgdhchxcgcfftgcfgchcgghcgh</p>
</body>

运行之后点击就可以获得滚动的上下值了。

同样的这个方法和scrollLeft([val])用法一样

不过scrollLeft([val])是获取的左右值。

另外老话长谈jquery中很多或者说是大部分吧都是可以既能够获取元素值,又能够设置元素值

如我用scrollLeft([val])设置左右值:

$("div.demo").scrollLeft(300);

最后说下offset([coordinates])和position()

关于这两个方法我用一个例子来说明

如:

jquery代码块

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
/*window*/window.onload = function(){
    var position_$ = function(){
        $(function(){
            var h2 = $(‘h2:last‘) ;
            var position = h2.position() ;
            $(‘h3‘).click(function(){
                var k = position.left + ‘+‘ + position.top;
                alert(k);
            });
        });
    };
    position_$();/*调用*/
    (function(){
        var h2 = $(‘h2:first‘);
        var offset = h2.offset();
        var k = offset.top + ‘+‘ + offset.left;
        $(document).click(function(){
            alert(k);
        })
    }()) /*调用*/

};/*window*/

    </script>

html代码块

<body>
         <h2>啊,好美的风景啊! </h2>
         <h2>你好啊!大自然    </h2>
         <h3>大自然:我很好!  </h3>
</body>

返回来的结果是:

当点击h3 ==>>8+52.916628247070314

当点击h3或者任意地方(点击h3第二个才是我们所要的data)

==>>19.916671752929688+8

这样我们就明白其用法了

(大神勿喷啊!)

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-02 19:46:45

jquery-get-data(width,height,position,(top,left),scrollTop,scrollLeft)获取数据的相关文章

js中width,height,left,top计算

①offset    包括了元素的边框和内边距和滚动条 offsetWidth.offsetHeight元素的宽度和高度 offsetLeft .offsetTop元素相对于文档左边和顶部的距离(定位了的元素相对于祖先元素) ②client  不包括边框大小不包含滚动条 clientWidth.clientHeight元素的宽度和高度 clientLeft .clientTop元素相对于文档左边和顶部的距离(定位了的元素相对于祖先元素) ③scroll scrollWidth .scrollHe

jQuery easyui 绑定下拉框控件 从数据库获取数据 MVC controller传值过去

这是在做OA系统的时候,需要用到的一个小功能,比较通用的,因为本人也是才接触easyui不久,希望有错的地方大家指出来,谢谢 //界面  用的easyui-combobox <td><label for="lab_con_id">服务合同编号:</label></td> <td><input class="easyui-combobox" data-options="required:fal

Jquery中的offset()和position()深入剖析(元素定位)

先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父元素的偏移. 返回的对象包含两个整形属性:top 和 left.为精确计算结果,请在补白.边框和填充属性上使用像素单位.此方法只对可见元素有效. 真的就这么简单吗?实践出真知. 先来看看在jquery框架源码里面,是怎么获得position()的: 1 // Get *real* offsetPar

jQuery的position(),offset(),scrollTop()/scrollLeft()

---恢复内容开始--- jquery定位函数:offset,position,scrollTop/scrollLeft (1)offset:获取当前元素相对于文档的偏移.只对可见元素有效. (2) position:获取元素相对于最近的一个position为relative or absolute的元素的祖父节点的相对偏移. (3)scrollTop()/scrollLeft()是分别获取元素滚动条距顶端的距离. $(selector).offset()与$(selector).positio

Jquery中的offset()和position()深入剖析

jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢? 先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父元素的偏移. 返回的对象包含两个整形属性:top 和 left.为精确计算结果,请在补白.边框和

如何正确使用width height 进行合理布局

两个问题引题 1)width,height设置为百分比 2)max-width , max-height 到底是什么意思 0.max-width,max-height 一帮情况使用在图形元素当中,原因是怕图片超出了父容器的大小,那么控制图片最大就是这个值,超过了则按这个值显示,如果没有超过则按 width height进行布局. 1.针对所有HTML元素都具有width 与 height ,而且 HTML标签属性与CSS属性在width和height中都是同样的作用. 2.关于width使用百分

关于JQuery中$.data绑定数据原理或逻辑

问题: JQuery中,对于.data([key],[value])函数,当使用其进行数据绑定时,假设要绑定的数据是“引用数据类型”,也就是对象:那么.data函数绑定的是该对象的副本还是该对象的一个引用?下面通过以下小例子来测试下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Test<

onCreate中View的width,height为0的问题

FBI Warning:欢迎转载,但请标明出处:http://blog.csdn.net/codezjx/article/details/45341309,未经本人同意请勿用于商业用途,感谢支持! 当我们在onCreate()回调方法中去调用View的getWidth().getHeight().getTop().getLeft()等方法的时候,是无法获取到正确值的,此时只会返回0. 为什么呢? 因为View的显示必须经历Measure(测量).Layout(布局)和Draw(绘制)过程.而在M

jQuery中的width()、heihgt()、innerWidth()、innerHeight()、outerWidth()和outerHeight()方法的区别

jQuery中的 width().innerWidth().outerWidth().outerWidth(true)和 height().innerHeight().outerHeight().outerHeight(true)方法的区别 相信有些刚开始接触jquery的友友们,对这几个方法的区别总是模棱两可,似乎清楚似乎有是一个模糊的概念,下面是我自己整理的一张图,相信看了之后会对这几个方法有一个全新的认识.