jquery怎么取到当前div中滚动条的位置

jquery怎么取到当前div中滚动条的位置,第1张

可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位。

var

container

=

$('div'),

scrollTo

=

$('#row_8');

containerscrollTop(

scrollTooffset()top

-

containeroffset()top

+

containerscrollTop()

);

//

Or

you

can

animate

the

scrolling:

containeranimate({

scrollTop:

scrollTooffset()top

-

containeroffset()top

+

containerscrollTop()

})

<ul>

   <li>1</li>

   <li>2</li>

   <li class="x">current</li>

   <li>3</li>

   <li class="y">4</li>

   <li class="y">5</li>

</ul>//依次运行这些代码。

$("x")siblings()css("background", "red"); //取此对象的同级所有对象。

$("x")prev()css("background", "red"); //取此对象的上一个对象。

$("x")prevAll()css("background", "red"); //取此对象前面的所有对象。

$("x")next()css("background", "red"); //取此对象后一个对象。

$("x")nextAll()css("background", "red"); //对此对象后面的所有对象。

//其中,siblings, prevall, nextall, 还可以加入选择器,进行进一步筛选。比如:

$("x")nextAll("y")css("background", "red");

想要使用jQuery将元素移动到另一个元素中,可以使用jQuery的内置方法append()或prepend()。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

方法1:使用append()方法

jQuery的append()方法用于在所选元素的末尾插入一些内容。

语法:

参数: 此方法接受上述两个参数

● content:它是必需参数,用于指定要在所选元素末尾插入的内容。content的可能值是HTML元素,jQuery对象和DOM元素。

● function(index,html):它是可选参数,用于指定将返回要插入的内容的函数。

● index:用于返回元素的索引位置。

● html:用于返回所选元素的当前HTML。

示例:

效果图:

方法2:使用prepend()方法

prepend()方法是jQuery中的内置方法,用于在所选元素的开头插入指定的内容。

语法:

参数: 此方法接受上述两个参数

● content:需要参数,用于指定需要插入的内容。

● function:可选参数,用于指定调用后执行的函数。

示例:

效果图:

更多 前端开发 知识,请查阅 HTML中文网 !!

可以用jquery选择器的:eq选择器或者jquery遍历的eq()方法,下面带那给出ul下第4个li的内容

$("ul li:eq(3)")  // 元素的index位置工0开始计数,所以这里的3实际为第4个元素

$("ul")find("li")eq(3)

示例代码如下

创建Html元素

<div class="box">

<span>点击按钮获取指定位置元素:</span><br>

<div class="content">

<li>梨子</li>

<li>李子</li>

<li>栗子</li>

<li>荔枝</li>

</div>

第&nbsp;<input type="text" name="num">&nbsp;个li元素<input type="button" value="确定">

</div>

设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

li{margin:10px 0;}

input[type='text']{width:50px;padding:5px 10px;border:1px solid #ff9966;}

input[type='button']{height:30px;margin:10px;padding:5px 10px;}

编写jquery代码

$(function(){

$("input:button")click(function() {

num = $("input:text[name='num']")val()-1;  // index从0开始计算

str = $("divcontent")find("li")eq(num)text(); // eq()遍历方法

// 或者使用如下:eq()选择器的方法,单数之一要拼接字符串

// str = $("divcontent li:eq("+num+")")text()   // :eq()选择器

alert(str);

})

})

观察效果

$('h2#answers-title')offset()top-$(document)scrollTop();

$('h2#answers-title')offset()top h2#answers-title元素相对于document的垂直位置

$(document)scrollTop() 整个文档被上卷的高度

2者差就是$('h2#answers-title')相对于当前浏览器视图窗口的垂直位置

jquery获取元素索引值index()方法:

jquery的index()方法

搜索匹配的元素,并返回相应元素的索引值,从0开始计数。

如果不给

index()

方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。

如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。

复制代码代码如下:

foo

bar

baz

$('li')index(documentgetElementById('bar'));

//1,传递一个DOM对象,返回这个对象在原先集合中的索引位置

$('li')index($('#bar'));

//1,传递一个jQuery对象

$('li')index($('li:gt(0)'));

//1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置

$('#bar')index('li');

//1,传递一个选择器,返回#bar在所有li中的做引位置

$('#bar')index();

//1,不传递参数,返回这个元素在同辈中的索引位置。

jquery获取元素索引值index()示例

复制代码代码如下:

//用于二级或者三级联动

建站素材

jquery特效

懒人主机

前端路上

$("#nav

a")click(function(){

//四个经典的用法

var

index1

=

$("#nav

a")index(this);

var

index2

=

$("#nav

a")index($(this));

var

index3

=

$(this)index()

var

index3

=

$(this)index("a")

alert(index3);

return

false;

});

以上就是关于jquery怎么取到当前div中滚动条的位置全部的内容,包括:jquery怎么取到当前div中滚动条的位置、js或jquery如何获取到某元素周围的元素呢、如何使用jQuery将元素移动到另一个元素中等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9722567.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存