您当前的位置: 站长圈 > 网页前端

jquery的dom操作(2)

来源:站长圈|0 作者:adminzzq 点击: 0
一,插入节点
插入节点里有很多对方法是一样的,只是插入和被插入的区别。
append();
appendTo();

$obj.prepend($obj1);在$obj里插入子元素$obj1,位置在所有子元素的第一位
$obj1.prependTo($obj);将$obj1这个元素插入到$obj这个的子节点的前面。
实例:

路航网络培训


<script type="text/javascript">
var $obj=$('#aa');
$obj.prepend("JQuery");
//$("JQuery").prependTo($obj);
</script>


after();在匹配的元素之后插入内容。(不是子元素哦)
insertAfter();和after()类似,只是颠倒了顺序。
实例:

路航网络培训


<script type="text/javascript">
var $obj=$('#aa');
$obj.after("JQuery");
//$("JQuery").insertAfter($obj);
</script>


before();
insertBefore()
实例:

路航网络培训


<script type="text/javascript">
var $obj=$('#aa');
$obj.before("JQuery");
//$("JQuery").insertBefore($obj);
</script>


二,删除节点。
remove();删除一个节点。返回值:被删除的节点。
empty();清除一个节点。

实例:

路航网络培训


<script type="text/javascript">
var $obj=$('#h');
$obj.remove();
//console.log($obj.remove());
</script>

解析:找到h1节点并把它删除以后,返回的就是被删除的那个元素对象,可以把它的返回值保存在一个变量里继续使用。我们可以用console.log($obj.remove());在火狐的控制台看一看它返回的是什么,如图:



路航网络培训


<script type="text/javascript">
var $obj=$('#h');
$obj.empty();
</script>

解析:从上面的图中可以看出remove()和empty()的区别,remove()是把整个h1节点删除了,而empty()是把h1节点里面的东西给清空了。

三,复制节点
$obj.clone();复制一个$obj这个对象。
实例:

路航网络培训


<script type="text/javascript">
$('.h').clone().appendTo("#aa");
</script>


四,替换节点
$obj.replaceWith($obj1);
$obj这个jquery对象用$obj1来替换。
实例:





<script type="text/javascript">
function rp(){
var $loading=$('#loading');
var $h=$('

这里的内容是ajax请求回来的

');

setTimeout(function(){$loading.replaceWith($h)},2000);
}
</script>
提交前:

提交后:


replaceAll();用于查找所要被替换的元素,和replaceWith()作用一样,只是选择器和内容位置的不同
$obj1.replaceAll($obj);把$obj这个对象用$obj1来替换。
上面的例子这句setTimeout(function(){$loading.replaceWith($h)},2000);可以改成setTimeout(function(){$h.replaceAll($loading)},2000);

五,wrap(),把所有匹配的元素用其他元素的结构化标记包裹起来。
实例:


<script type="text/javascript">
$("img").wrap("
");

</script>


wrapAll() 将所有匹配的元素用单个元素包裹起来,这于 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。


<script type="text/javascript">
$("img").wrapAll("
");

</script>


下面做一个图片滚动的实例,代码如下:








<script type="text/javascript" src="jquery-1.5.min.js"></script>












<script type="text/javascript">
//var lis = $('#scroll li');
var ul = $('#scroll ul');
function play(){
ul.animate({'marginLeft':'-310px'},1500,function(){
$('#scroll li').eq(0).remove().appendTo(ul);
ul.css('marginLeft',0);
})
}
$(function(){
setInterval(play,3000);
})
</script>



分析:
1,html中建立了一个
,设置它的css宽度为2张图片的宽度,其余部分溢出隐藏。
2、div里有个ul,它的宽度是6张图片的总和,li全部左浮动,这样确保所有图片都在一行上,只是后面的图片没有被显示出来而已。
3、jq部分,先$('#scroll ul')获取ul对象
4、声明一个名叫play的函数,它要执行以下动作:在ul对象上创建一个自定义动画的函数animate(params,[speed],[easing],[fn])
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数,每个元素执行一次。
在这个例子中就是在1500毫秒之内让ul本身的左外边距变成-310px,就是往左移动310px,后面的函数是回调函数,意思是动画完成以后执行这个函数里的动作,在这里就是每次找到ul里面的第一个li,删除它并把它移到ul所有子元素的最后,并且把ul的左外边距设为0,因为刚刚把ul往左移了310px,现在移回原来的地方。
5、$(function(){ })的意思是在页面加载时就执行里面的方法,方法是每3秒钟执行一次play函数