重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
想要使用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中文网 !!
$(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个参数值。
原因很不好判定,这种方式定位出现错误的原因挺多的,要考虑css和html的具体写法,有时候某些不标准的写法会造成jQuery的定位数据不准确。
建议换个方式,例如每个tr中第一列放置一个th/th,后面是td,然后你的红框放到th里面,这样计算量就小多了,而且显示的也快一点。
本文实例讲述了jQuery简单获取DIV和A标签元素位置的方法。分享给大家供大家参考,具体如下:
一、获取DIV的位置
var
top
=
jquery("#div_id").offset().top;
//获取div的居上位置
var
left
=
jquery("#div_id").offset().left;
//获取div的居左位置
var
height
=
jquery("#div_id").height();
//获取div的高度
var
width
=
jquery("#div_id").width();
//获取div的宽度
jquery("#div_id").css({'top':top,'left':left,'height':height,'width':width});
//设置DIV的css属性
二、获取A标签的位置
a
href=""
rel="external
nofollow"
onclick="javascript:get_a(this,1)"获取A标签的位置/a
script
language="javascript"
function
get_a(thisObj,param){
var
top
=
jquery(thisObj).offset().top;
var
left
=
jquery(thisObj).offset().left;
var
height
=
jquery(thisObj).height();
var
width
=
jquery(thisObj).width();
}
/script
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jquery选择器用法总结》、《jQuery表单操作总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》及《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。
$("#onlyfix").css("left",$("#div1").width()+25);
$(window).resize(function(){
$("#onlyfix").css("left",$("#div1").width()+25);
});
$(window).resize();
$(window).resize();时再执行一下