jQuery - append và prepend

append và prepend là hai hàm dùng để thao tác trên các con của một HTML DOM.

• append(html): Chèn đoạn html text hoặc jQuery object vào cuối các thẻ con của HTML DOM đang truy xuất.
• prepend(html): Chèn đoạn html text hoặc jQuery object vào đầu các thẻ con của HTML DOM đang truy xuất.

Ví dụ ta có một thẻ ul có 3 thẻ li như sau:

<ul>
<li>Con 1</li>
<li>Con 2</li>
<li>Con 3</li>
</ul>

Giả sử ta muốn chèn một thẻ li có nội dung là Con 0 vào trong thẻ ul đó.

• Hàm append sẽ chèn thẻ li đó vào sau thẻ li Con 3.
• Hàm prepend sẽ chèn thẻ li đó vào trước thẻ Con 1.

Code

Ví dụ ta có một thẻ ul có 5 thẻ li như sau:

<script>
jQuery(document).ready(function(){
jQuery("#butAppend").click(function(){
jQuery("#test_ul").append("<li>Con 0</li>");
});
jQuery("#butPrepend").click(function(){
jQuery("#test_ul").prepend("<li>Con 0</li>");
});
});
</script>
<div>
<div style="float:left;border:1px solid gray;displày:block;width:350px;">
<ul id="test_ul">
<li>con 1</li>
<li>con 2</li>
<li>con 3</li>
</ul>
</div>
<div style="float:left;padding:20px;">
<input type="button" id="butAppend" value="Append"/><br/>
<input type="button" id="butPrepend" value="Prepend"/><br/>
</div>
</div>

Demo

• con 1
• con 2
• con 3

jQuery - find và children

find và children là hai hàm được jQuery xây dựng để truy xuất tới các phần tử con của một HTML DOM được chọn

• find(jquery selector): dùng để lấy toàn bộ các phần tử con(cấp 1, 2, 3...) của đối tượng hiện hành theo selector.
• children(): dùng để lấy toàn bộ các phần tử con cấp 1 của đối tượng hiện hành theo selector.
• children(jquery selector): dùng để lấy toàn bộ các phần tử con cấp 1 của đối tượng hiện hành theo selector.

Code

<script>
jQuery(document).ready(function(){
 jQuery("#butChild1").click(function(){
  jQuery("#test_ul").children().css("color","red");
 });
 jQuery("#butChild2").click(function(){
  jQuery("#test_ul").children(".green").css("color","blue");
 });
 jQuery("#butFind1").click(function(){
  jQuery("#test_ul").find("li").css("color","green");
 });
 jQuery("#butFind2").click(function(){
  jQuery("#test_ul").find(".gray").css("color","yellow");
 });
});
</script>
<style>
.red{color:red;}
.green{color:green;}
.blue{color:blue;}
.gray{color:gray;}
</style>
<div>
 <div style="float:left;border:1px solid gray;displày:block;width:350px;">
  <ul id="test_ul">
   <div>con cấp 1 khong phai thẻ li</div>
   <li>con cấp 1 thẻ li
    <ul>
     <li>con cấp 2 thẻ li
      <ul>
       <li>con cấp 3 thẻ li</li>
       <li class="gray">con cấp 3 thẻ li có class là gray</li>
      </ul>
     </li>
     <li class="gray">con cấp 2 thẻ li có class là gray</li>
     <li class="gray">con cấp 2 thẻ li có class là gray</li>
    </ul>
   </li>
   <li class="green">con cấp 1 thẻ li có class là green</li>
   <li class="green">con cấp 1 thẻ li có class là green</li>
   <li>con cấp 1 thẻ li</li>
  </ul>
 </div>
 <div style="float:left;padding:20px;">
  <input type="button" id="butChild1" value="Children not selector"/><br/>
  <input type="button" id="butChild2" value="Children with selector"/><br/>
  <input type="button" id="butFind1" value="Find li"/><br/>
  <input type="button" id="butFind2" value="Find li with class"/><br/>
 </div>
</div>

Demo

con cấp 1 khong phai thẻ li
• con cấp 1 thẻ li
  • con cấp 2 thẻ li
    • con cấp 3 thẻ li
    • con cấp 3 thẻ li có class là gray
  • con cấp 2 thẻ li có class là gray
  • con cấp 2 thẻ li có class là gray
• con cấp 1 thẻ li có class là green
• con cấp 1 thẻ li có class là green
• con cấp 1 thẻ li

jQuery - animate

Hàm animate dùng để thực hiện một số hiệu ứng đơn giản do người dùng tự định nghĩa dựa theo các css properties của đối tượng. Các cú pháp thường dùng của nó như sau:

• animate(tập thuộc tính css, thời gian).
• animate(tập thuộc tính css, thời gian, hàm trả về khi kết thúc).

Một số lưu ý:

• += và -=: ví dụ ta có một thẻ div có width là 50px, khai báo trong hàmg width:"+=50px" có nghĩa là kết thúc hàm animate đối tượng sẽ có width = 100px. Tương tự với -=.
• "slow" and "fast": đây là hai từ khóa được jQuery hỗ trợ để định nghĩa thời gian cho hiệu ứng, slow tương đương 600ms, fast tương đương 200ms.
• "show", "hide" and "toggle": là những từ khóa được jQuery hỗ trợ dùng để thay thế giá trị của các thuộc tính css. VD:
  1. opacity:"toggle" có nghĩa là khi hàm animate được thực thi thuộc tính opacity của đối tượng sẽ có giá trị thay đổi như hàm hiệu ứng toggle.
  2. width:"hide" khi hàm animate được thực thi xong thuộc tính width của đối tượng sẽ bằng 0.
  3. width:"show" ngược lại với hide.
• Để thao tác được trên các thuộc tính left, top, right, bottom thì bắt buộc position của đối tượng phải là absolute.

Ví dụ:

1. Hiệu ứng move in, move out đơn giản
   Code

    <script type="text/javascript">
     jQuery(document).ready(function(){
      jQuery("#move_div").css("top",(jQuery("#border_div").position().top + 10)+"px");
      jQuery("#move_div").css("left",(jQuery("#border_div").position().left + 10)+"px");
      jQuery("#MoveOut").click(function(){
       jQuery("#move_div").animate({
        left:"+=200px",
        opacity:"hide"
       },2000);
      });
      jQuery("#MoveIn").click(function(){
       jQuery("#move_div").animate({
        left:"-=200px",
        opacity:"show"
       },2000);
      });
     });
    </script>
    <style>
    #border_div{
     display:block;
        width:580px;
        height:150px;
     background-color:#FBF9EA;border:1px solid black;
    }
    #move_div {
     position:absolute;
     width:250px;
     height:120px;
     border:1px solid gray;
     background-color:#F0F0F0;
    }
    </style>
    <input type="button" value="Move Out" id="MoveOut"/>
    <input style="margin-left:10px;" type="button" value="Move In" id="MoveIn"/>
    <div id="border_div">
     <div id="move_div">
      <div style="padding:9px;">
       <span style="color:gray;font-style:italic;">It hurts to love someone and not be loved in return, but what is the most painful is to love someone and never finding the courage to let the person know how you feel.</span>
      </div>
     </div>
    </div>

   Demo

   It hurts to love someone and not be loved in return, but what is the most painful is to love someone and never finding the courage to let the person know how you feel.


2. Hiệu ứng zoom hình đơn giản.
   Code

   <script type="text/javascript">
   jQuery(document).ready(function(){
    jQuery("[name='hover_image']").css("top",(jQuery("#hover_div").position().top + 20)+"px");
    var left = 40;
    jQuery("[name='hover_image']").each(function(i,val){
     jQuery(this).css("left",(jQuery("#hover_div").position().left + left)+"px");
     left+=100;
    });
    jQuery("[name='hover_image']").hover(function(){//ham callback hoverIn
     jQuery(this).animate({
      width:"+=20",
      height:"+=20",
      left:"-=10",
      top:"-=10",
      opacity:"1",
      filter:"alpha(opacity=100)"
     },300);
    },function(){//ham callback hoverOut
     jQuery(this).animate({
      width:"-=20",
      height:"-=20",
      left:"+=10",
      top:"+=10",
      opacity:"0.4",
      filter:"alpha(opacity=40)"
     },300);
    });
   });
   </script>
   <style>
   #hover_div img{
    float:left;
    position:absolute;
    width:60px;
    height:60px;
    opacity:0.4;
    filter:alpha(opacity=40)
   }
   </style>
   <div id="hover_div" style="height:120px;background-color:#FBF9EA;border:1px solid black;">
   <img name="hover_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX0KCZGWY-pbPmlFERA5PqYs5mcXV5UGQK3xdvJbr1VgbAffbht0M_Q9rTovIa3XlOcLMIhqRy7SaLDQL6iuyom6qjIQUzh71I5rd9-K1L7eErhpX-nNf1ELE1oqFd1v9OuPwKAB82mIJY/s400/puppy"/>
   <img name="hover_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX0KCZGWY-pbPmlFERA5PqYs5mcXV5UGQK3xdvJbr1VgbAffbht0M_Q9rTovIa3XlOcLMIhqRy7SaLDQL6iuyom6qjIQUzh71I5rd9-K1L7eErhpX-nNf1ELE1oqFd1v9OuPwKAB82mIJY/s400/puppy"/>
   <img name="hover_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX0KCZGWY-pbPmlFERA5PqYs5mcXV5UGQK3xdvJbr1VgbAffbht0M_Q9rTovIa3XlOcLMIhqRy7SaLDQL6iuyom6qjIQUzh71I5rd9-K1L7eErhpX-nNf1ELE1oqFd1v9OuPwKAB82mIJY/s400/puppy"/>
   </div>

   Demo

   


3. Ví dụ về hàm trả về khi thực thi xong.
   Code

   <div style="display:block;width:580px;height:180px;background-color:#FBF9EA;">
    <script type="text/javascript">
    jQuery(document).ready(function(){
     jQuery("#animate_image").css("top",(jQuery("#animate_div").position().top + 5)+"px");
     jQuery("#animate_image").css("left",(jQuery("#animate_div").position().left + 5)+"px");
     jQuery("#hflip").click(function(){
      jQuery("#vflip").attr("disabled","true");
      jQuery("#hflip").attr("disabled","true");
      jQuery("#animate_image").animate({
       width:"-=130px",
       left:"+=65" 
      },2000,function(){
       jQuery("#animate_image").attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQon1AZE6YTMvpQhAexBVKzHKmXkhKMlQJ2uSzhfQ7ubwPr0DneArskx7p7Y5FPNa94Wjw0VW8k9R_XkmW7Y1iCmgSiJtM-D7wy0zD25TMS05L76vg1VaJ9L-mECVgoDJhz-MF3cigG4n8/s1600/hadat1.jpg").animate({
        width:"+=130px",
        left:"-=65" 
       },2000,function(){
        jQuery("#animate_image").attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQon1AZE6YTMvpQhAexBVKzHKmXkhKMlQJ2uSzhfQ7ubwPr0DneArskx7p7Y5FPNa94Wjw0VW8k9R_XkmW7Y1iCmgSiJtM-D7wy0zD25TMS05L76vg1VaJ9L-mECVgoDJhz-MF3cigG4n8/s1600/hadat1.jpg").animate({
         width:"-=130px",
         left:"+=65" 
        },2000,function(){
         jQuery("#animate_image").attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3S53eiH_TNlJT1OWhjrzjXlyll4u1ntN2KDDck0fNS1sS9b3fhKEclthS8eYA8EJK4VuTwXLgfPiFjEazLqfuEOFAmxoZRJqJ8MqNR1FLlYRMXMIchZe-eq792uEJTaDKB_bx5R8PQO7R/s320/hadat.jpg").animate({
          width:"+=130px",
          left:"-=65" 
         },2000,function (){
          jQuery("#vflip").removeAttr("disabled");
          jQuery("#hflip").removeAttr("disabled");
         });
        });
       });   
      });
     });
     jQuery("#vflip").click(function(){
      jQuery("#hflip").attr("disabled","true");
      jQuery("#vflip").attr("disabled","true");
      jQuery("#animate_image").animate({
       height:"-=130px",
       top:"+=65" 
      },2000,function(){
       jQuery("#animate_image").attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsEvDt3shkMqDFwlnKfrWq_pl3Dr2PyVGts1cez_J8Q-ScKSq2wWDEaug946yiDHip05j_48sx4SUXIpU0gUs7hctvYMCP5vgCV29zwEotFK1bhdGdQBFikxw9uXo1fJj7apTdGrip_7QP/s1600/hadat2.jpg").animate({
        height:"+=130px",
        top:"-=65" 
       },2000,function(){
        jQuery("#animate_image").attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsEvDt3shkMqDFwlnKfrWq_pl3Dr2PyVGts1cez_J8Q-ScKSq2wWDEaug946yiDHip05j_48sx4SUXIpU0gUs7hctvYMCP5vgCV29zwEotFK1bhdGdQBFikxw9uXo1fJj7apTdGrip_7QP/s1600/hadat2.jpg").animate({
         height:"-=130px",
         top:"+=65" 
        },2000,function(){
         jQuery("#animate_image").attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3S53eiH_TNlJT1OWhjrzjXlyll4u1ntN2KDDck0fNS1sS9b3fhKEclthS8eYA8EJK4VuTwXLgfPiFjEazLqfuEOFAmxoZRJqJ8MqNR1FLlYRMXMIchZe-eq792uEJTaDKB_bx5R8PQO7R/s320/hadat.jpg").animate({
          height:"+=130px",
          top:"-=65" 
         },2000,function (){
          jQuery("#vflip").removeAttr("disabled");
          jQuery("#hflip").removeAttr("disabled");
         });
        });
       });   
      });
     });
   
    });
    </script>
    <style>
    #animate_div {
     width:130px;
     height:130px;
     max-height:130px;
     max-height:130px;
     margin-top:10px;
    }
    #animate_div img{
     display:block;
     position:absolute;
     width:130px;
     height:130px;
    }
    </style>
    <input type="button" value="animate 1" id="hflip"/>
    <input style="margin-left:10px;" type="button" value="animate 2" id="vflip"/>
    <div id="animate_div">
     <img id="animate_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3S53eiH_TNlJT1OWhjrzjXlyll4u1ntN2KDDck0fNS1sS9b3fhKEclthS8eYA8EJK4VuTwXLgfPiFjEazLqfuEOFAmxoZRJqJ8MqNR1FLlYRMXMIchZe-eq792uEJTaDKB_bx5R8PQO7R/s320/hadat.jpg"/>
    </div>
   <div>

   Demo