码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-07-26 19:20:45      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:jquery   数据   get-data   

获取尺寸
如下:
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
这样我们就明白其用法了
(大神勿喷啊!)

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

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

标签:jquery   数据   get-data   

原文地址:http://blog.csdn.net/u010061287/article/details/47069813

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!