jQuery 获取容器宽度和长度

使用过程中需要主要获取的高度范围包含 盒子模型中的哪些元素、

height() : 其高度范围是所匹配元素的高度 height；（content 的高度）

innerHeight() : 其高度范围是所匹配元素的高度 height + padding ；

outerHeight() : 其高度范围是所匹配元素的高度height + padding + border ；

outerHeight(true) : 其高度范围是所匹配元素的高度 height + padding + border + margin ；

同理宽度有： width() | innerWidth() | outerWidth() | outerWidth(true)

 <script>

   $(function() {

 var h_max = 0;

 //求最大高度

 $("class")each(function() {

      var h = $(this)innerHeight();

      h_max = h > h_max  h : h_max;

 })

     //将class的高度赋值为最大高度，

     //最大高度innerheight=padding+内容高度height

 $("class")each(function() {

        //求padding的值

       var h_pad = $(this)innerHeight() - $(this)height();

       $(this)height(h_max - h_pad);

 })

   })

 </script>

jQuery 选择器中 :last 表示最后一个元素，所以表示含有某类属性的最后一个元素可用如下代码表示

$("test-class:last")  // 表示最后一个属于test-class类的元素

示例如下：

创建Html元素

<div class="top">

<ul>

<li>list-1</li>

<li class="selected">list-2</li>

<li class="selected">list-3</li>

<li>list-4</li>

<li class="selected">list-5</li>

</ul>

<span>红色列表项表示属于selected类，d出框显示了最后一个属于selected类的元素的内容</span>

</div>

设置css样式

divtop{margin:50px;padding:10px;width:300px;height:250px;border:2px dashed #ebbcbe;}

li{padding:5px;}

liselected{color:red;font-weight:bold;}

span{color:#999;}

编写jquery代码

$(function(){

$("ul")click(function() {

alert($("liselected:last")text());

});

})

观察显示效果

jQuery 的 index() 方法返回指定元素相对于其他指定元素的索引值，注意：索引值是从0开始计数的。获得当前元素的索引值可用click事件触发

示例代码如下：获取被点击的a标签的索引值

1，创建Html元素

2，设置css样式

3，编写jquery代码

4，观察效果：因为index从0开始计数，所以点击第三个元素，获取的索引值是2

扩展资料

jQuery的核心特性：

1，具有独特的链式语法和短小清晰的多功能接口；

2，具有高效灵活的css选择器，并且可对CSS选择器进行扩展；

3，拥有便捷的插件扩展机制和丰富的插件。

4，jQuery兼容各种主流浏览器，如IE 60+、FF 15+、Safari 20+、Opera 90+等。

参考资料：

jQuery - 百度百科

一下是相关代码，JS中定义的变量margin就是你所说的每个div的间距，这样你就不用去设置margin-right了。

另外，在运行我贴上的代码的时候请应用jquery类库

<style type="text/css">

body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px "微软雅黑"; }

/瀑布流布局样式/

#lxf-box { position: relative; }

#lxf-box li { position: absolute; background: #fff; border: solid 1px #ccc; text-align: center; padding: 10px; left: 0px; top: 0; }

h3 { padding-top: 8px; }

img { width: 200px; height: auto; display: block; border: 0 }

/css3动画/

li { -webkit-transition: all 7s ease-out 1s; -moz-transition: all 7s ease-out; -o-transition: all 7s ease-out 1s; transition: all 7s ease-out 1s }

</style>

<ul id="lxf-box">

<li><a ><img /></a>

<h3>标题</h3>

</li>

<li><a ><img /></a>

<h3>标题</h3>

</li>

<li><a ><img /></a>

<h3>标题</h3>

</li>

<li><a ><img /></a>

<h3>标题</h3>

</li>

<li><a ><img /></a>

<h3>标题</h3>

</li>

<li><a ><img /></a>

<h3>标题</h3>

</li>

<li><a ><img /></a>

<h3>标题</h3>

</li>

</ul>

<script>

/

原理：1把所有的li的高度值放到数组里面

2第一行的top都为0

3计算高度值最小的值是哪个li

4把接下来的li放到那个li的下面

/

var margin = 10; //这里设置间距

var li=$("li"); //这里是区块名称

varli_W = li[0]offsetWidth+margin; //取区块的实际宽度（包含间距，这里使用源生的offsetWidth函数，不适用jQuery的width()函数是因为它不能取得实际宽度，例如元素内有pandding就不行了）

function liuxiaofan(){//定义成函数便于调用

var h=[];//记录区块高度的数组

var n = documentdocumentElementoffsetWidth/li_W|0;//窗口的宽度除以区块宽度就是一行能放几个区块

for(var i = 0;i < lilength;i++) {//有多少个li就循环多少次

li_H = li[i]offsetHeight;//获取每个li的高度

if(i < n) {//n是一行最多的li，所以小于n就是第一行了

h[i]=li_H;//把每个li放到数组里面

lieq(i)css("top",0);//第一行的Li的top值为0

lieq(i)css("left",i li_W);//第i个li的左坐标就是ili的宽度

}

else{

min_H =Mathminapply(null,h) ;//取得数组中的最小值，区块中高度值最小的那个

minKey = getarraykey(h, min_H);//最小的值对应的指针

h[minKey] += li_H+margin ;//加上新高度后更新高度值

lieq(i)css("top",min_H+margin);//先得到高度最小的Li，然后把接下来的li放到它的下面

lieq(i)css("left",minKey li_W);//第i个li的左坐标就是ili的宽度

}

$("h3")eq(i)text("编号："+i+"，高度："+li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面

}

}

/ 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) /

function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}

/这里一定要用onload，因为不加载完就不知道高度值/

windowonload = function() {liuxiaofan();};

/浏览器窗口改变时也运行函数/

windowonresize = function() {liuxiaofan();};

</script>

</body>

</html>

$(window)height();//是文档窗口高度

$("div")offset()top//是标签距离顶部高度（没有到下面的距离，比如$("div")offset()down）

$("div")offset()left//是标签距离右边高度（没有到下面的距离，比如$("div")offset()right）

$(document)scrollTop();//是滚动条高度

$("div")height();//是标签高度

你要的高度+$("div")height()+[$("div")offset()top-$(document)scrollTop()]=$(window)height();

经过简单的数学变换即可得到你要的值了

获取页面某一元素的绝对X,Y坐标，可以用offset()：

var X = $(‘#DivID’)offset()top;

var Y = $(‘#DivID’)offset()left;

获取相对(父元素)位置:

var X = $(‘#DivID’)position()top;

var Y = $(‘#DivID’)position()left;

通过getBoundingClientRect方法获取对象位置，包含： left , top , right , bottom 4个参数值。

以上就是关于jQuery 获取容器宽度和长度全部的内容，包括:jQuery 获取容器宽度和长度、jquery 同一个class，如何获取高度最高的那个的数值赋给其他、JQUERY怎么获取一个类中的最后一个元素。等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！