jquery-get-data(width,height,position,(top,left),s

作者:上海建筑防水有限公司  来源:www.yxjzfs.com   发布时间:2018-04-07 09:43:55
jquery-get-data(width,height,position,(top,left),scrollTop,s

获取尺寸
如下:
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代码块

jquery代码块

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

html代码块

反馈回的结果为:
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()) ; }) }); span

in pass

p_h1

dhgszfjzdggxdgxdgxfgxgxfdhdhcgdhchxcgcfftgcfgchcgghcgh

运行之后点击就可以获得滚动的上下值了。
同样的这个方法和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代码块

啊,好美的风景啊! 你好啊!大自然 大自然:我很好!

返回来的结果是:
当点击h3 ==>>8+52.916628247070314
当点击h3或者任意地方(点击h3第二个才是我们所要的data)
==>>19.916671752929688+8
这样我们就明白其用法了
(大神勿喷啊!)

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:洪山网站建设 http://www.hswzjs.com.cn


上一篇:ASP.Net课堂--实验1(登录注册页面实现)
下一篇:最后一页