zoukankan      html  css  js  c++  java
  • jquery appendTo 和 append 的用法

    appendTo 会移动元素。

    比如:

    <div class="wrap">
    
      <div class="div1">111</div>
    
      <div class="div1">222</div>
    
    </div>
    

      

    $(".div1").appendTo(".div2") 会变成如下结构:

    <div class="wrap">
    
      <div class="div1">222 <div class="div1">111</div> </div>
    
    </div>
    

      

    可以看到 div1 被移动到div2的内部。

    append 也会移动元素:$(".div2").append(".div1") 会变成如下结构:

    <div class="wrap">
    
      <div class="div1">222 <div class="div1">111</div> </div>
    
    </div>
    

     

     一个实例:图片向上滚动。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery 延时执行</title>
    <style type="text/css">
    	*{ margin: 0; padding: 0;}
    	.wrap{ 200px; height:200px; border: 1px solid #f00;}
    	.wrap ul{  180px; height: 400px;}
    	.wrap ul li{  50px; height: 30px; float: left; background: #f00; list-style: none; margin-left: 10px; margin-bottom: 10px;}
    	.div2{ color: #f00;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
    	$(function(){
    		scrollTimer = setInterval(scrollcoorp, 3000 );  
            function scrollcoorp(){ 
                var $self = $("ul"); 
                $self.animate({ "margin-top" : "-40px" },600 , function(){ 
                $self.css({"margin-top":"0px"}).find("li:lt(3)").appendTo($self); 
                }) 
                } 
            $("ul").mouseover(function(){
                    clearInterval(scrollTimer);
                });
            $("ul").mouseleave(function() {
                scrollTimer=setInterval(scrollcoorp,3000);
            } )
    
    
    	})
    </script>
    </head>
    
    <body>
        <div class="wrap">
        	<ul>
        		<li>1</li>
        		<li>2</li>
        		<li>3</li>
        		<li>4</li>
        		<li>5</li>
        		<li>6</li>
        		<li>7</li>
        		<li>8</li>
        		<li>9</li>
        	</ul>
        </div>
    
    </body>
    </html>
    

      

  • 相关阅读:
    poj 2312 Battle City
    poj 2002 Squares
    poj 3641 Pseudoprime numbers
    poj 3580 SuperMemo
    poj 3281 Dining
    poj 3259 Wormholes
    poj 3080 Blue Jeans
    poj 3070 Fibonacci
    poj 2887 Big String
    poj 2631 Roads in the North
  • 原文地址:https://www.cnblogs.com/smjia/p/3700652.html
Copyright © 2011-2022 走看看