jQuery - html và text

html và text là hai hàm thường được dùng để thao tác với nội dung của một jQuery object.

• html: Lấy ra toàn bộ nội dung của đồi tượng đang truy xuất dưới dạng HTML (bao gồm cả các thẻ div, table...).
• html(html text): Thiết lập nội dung của đối tượng đang truy xuất bằng chuỗi HTML truyền vào.
• text: Lấy toàn bộ nội dung của các thẻ HTML con nhưng bỏ qua các thẻ đó (không lấy ra các thẻ HTML như div, table,br...).
• text (text): thay đổi chuỗi nội dung của đối tượng(cho dù bạn truyền chuỗi HTML vào nhưng mặc định hàm này sẽ hiểu nó là text chứ không phải là mã HTML và sẽ hiển ra đúng những gì bạn truyền vào).

Ví dụ: ở đây ta có 1 thẻ div trong đó có chứa 2 thẻ p và một thẻ a(nội dung của nó là lorem text). Như sau:

<div style="float:left;border:1px color gray;background-color:#EAEAEA;width:200px;" id="content_div">

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper sapien nec urna feugiat convallis sed sit amet velit.</p>

	<p>Curabitur vehicula, dui eu rutrum sollicitudin.</p>

	<a href="#">vehicula</a>

</div>

• Nút getHTML: Lấy nội dung HTML của thẻ div(dùng hàm html)
• Nút setHTML: dùng hàm html để set chuỗi HTML sau <b>Xin chao jQuery</b> cho thẻ div
• Nút getText: Dùng hàm text lấy nội dung của thẻ div
• Nút setText: Dùng hàm text thiết lập thử đoạn mã HTML sau <b>Xin chao jQuery</b> cho thẻ div
• Nút Restore: Khôi phục lại nội dung ban đầu của thẻ div

Code

<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery("#gettext").click(function(){
  alert(jQuery("#content_div").text());
 });
 jQuery("#settext").click(function(){
  jQuery("#content_div").text("<b>Xin chao jQuery</b>");
 });

 jQuery("#gethtml").click(function(){
  alert(jQuery("#content_div").html());
 });

 jQuery("#sethtml").click(function(){
  jQuery("#content_div").html("<b>Xin chao jQuery</b>");
 });

});
</script>
<div>
 <div style="float:left;border:1px color gray;background-color:#EAEAEA;width:200px;" id="content_div">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper sapien nec urna feugiat convallis sed sit amet velit.</div>
  <p>Curabitur vehicula, dui eu rutrum sollicitudin.</p>
  <a href="#">vehicula</a>
 </div>
 <div style="float:left;padding:0px 20px;">
  <input type="button" value="getHtml" id="gethtml"/><br/>
  <input type="button" value="getText" id="gettext"/><br/>
  <input type="button" value="setHtml" id="sethtml"/><br/>
  <input type="button" value="setText" id="settext"/><br/>
 </div>
 <div style="clear:both;"></div>
</div>

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper sapien nec urna feugiat convallis sed sit amet velit.

Curabitur vehicula, dui eu rutrum sollicitudin.

vehicula

jQuery và hàm each

each là vòng lặp mà jQuery cung cấp sẵn cho ta, cách thức hàm each hoạt động tương tự như vòng lặp foreach trong C#.

• each( function() ) vòng lặp chạy tuần tự từ object đầu mảng tới object cuối mảng.
• each( function(index) ) vòng lặp chạy tuần tự từ object đầu mảng tới object cuối mảng, có kèm theo biến thứ tự (index).

Lưu ý:

• each lả một vòng lặp foreach được viết bằng jQuery.
• Để truy xuất đối tượng đang được hàm each truy xuất tới ta dùng từ khóa this, cách dùng như sau jQuery(this)

Cú pháp:

Ví dụ với hàm each( function() ) ta có thẻ ul có ba thẻ con li, dùng hàm each hiện alert có nội dung là nội dung của thẻ li đang được truy xuất tới.

<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery("#butEach1").click(function(){
  jQuery("#ul_1 li").each(function(){
   alert("Đang truy xuất tới phần tử có nội dung: " + jQuery(this).html());
  });
 });
});
</script>
<div>
 <div style="float:left;border:1px color gray;background-color:#EAEAEA;padding-right:20px;">
  <ul id="ul_1">
   <li>Dòng 1</li>
   <li>Dòng 2</li>
   <li>Dòng 3</li>
  </ul>
 </div>
 <div style="float:left;padding-left:20px;"><input type="button" value="Each" id="butEach1"/></div>
 <div style="clear:both;"></div>
</div>

Demo

• Dòng 1
• Dòng 2
• Dòng 3

Ví dụ với hàm each(function(index)) ta cũng có một thẻ ul với ba thẻ li con khi nhấn vào button Each thì ta dùng hàm each để gắn giá trị index vào từng thẻ ul con.

<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery("#butEach2").click(function(){
  jQuery("#ul_2 li").each(function(index){
   jQuery(this).html(jQuery(this).html()+" "+index);
  });
 });
});
</script>
<div>
 <div style="float:left;border:1px color gray;background-color:#EAEAEA;padding-right:20px;">
  <ul id="ul_2">
   <li>Dòng</li>
   <li>Dòng</li>
   <li>Dòng</li>
  </ul>
 </div>
 <div style="float:left;padding-left:20px;"><input type="button" value="Each" id="butEach2"/></div>
 <div style="clear:both;"></div>
</div>

Demo

• Dòng
• Dòng
• Dòng

Mình xin đính chính lại là each không chỉ hoạt động với mảng jQuery object mà còn có thể hoạt động với mảng thông thường trong javascript

Cách thức sử dụng:

jQuery.each(array, callback function(index, value))

Giả sử ta có mảng gồm 10 phần tử bất kỳ, ta dùng hàm each duyệt qua từng phần tử.

Code

<script type="text/javascript">
jQuery(document).ready(function(){
 var arr = [1,2,3,40,1,20,3,50]; 
 jQuery("#arr_each_1").click(function(){
  jQuery.each(arr, function(index,value){
   alert("STT " + index + ": Gia tri "+value);
  });
 });
});
</script>
<input type="button" value="contains method" id="arr_each_1"/>

Demo

jQuery - appendTo và prependTo

Hàm appendTo và prependTo được dùng để chèn một đối tượng HTML DOM đang truy xuất vào đối tượng HTML DOM ta chọn ở tham số của hàm. Có nghĩa là nó sẽ cắt toàn bộ đoạn HTML của đối tượng ta đang truy xuất để chèn vào đối tượng mà ta chọn ở tham số của hàm.

• appendTo(jQuery selector): Chèn đối tượng HTML DOM đang được truy xuất vào cuối danh sách con của đối tượng được tham số selector chọn ra.
  • VD: jQuery("#a").appendTo("#b"); có nghĩa là toàn bộ nội dung thẻ có id là a sẽ được chèn vào cuối thẻ có id là b
• prependTo(jQuery selector): Chèn đối tượng HTML DOM đang được truy xuất vào đầu danh sách con của đối tượng được tham số selector chọn ra.
  • VD: jQuery("#a").prependTo("#b"); có nghĩa là toàn bộ nội dung thẻ có id là a sẽ được chèn vào đầu thẻ có id là b

Ví dụ ta có hai thẻ ul như sau:

<ul id="input_ul">
 <li>chèn 1</li>
 <li>chèn 2</li>
 <li>chèn 3</li>
</ul>
<ul id="choose_ul">
 <li>Con 1</li>
 <li>Con 2</li>
</ul>

Khi ta nhấn nút:

• appendTo thì toàn bộ thẻ input_ul sẽ được chèn vào sau thẻ li con 2
• prependTo thì toàn bộ thẻ input_ul sẽ được chèn vào trước thẻ li con 1

Code

<script>
jQuery(document).ready(function(){
 jQuery("#butAppendTo").click(function(){
  jQuery("#input_ul").appendTo("#choose_ul");
 });
 jQuery("#butPrependTo").click(function(){
  jQuery("#input_ul").prependTo("#choose_ul");
 });
});
</script>
<div>
 <div style="float:left;border:1px solid gray;displày:block;width:350px;">
  <ul id="input_ul">
   <li>chèn 1</li>
   <li>chèn 2</li>
   <li>chèn 3</li>
  </ul>
  <ul id="choose_ul">
   <li>Con 1</li>
   <li>Con 2</li>
  </ul>
 </div>
 <div style="float:left;padding:20px;">
  <input type="button" id="butAppendTo" value="appendTo"/><br/>
  <input type="button" id="butPrependTo" value="prependTo"/><br/>
 </div>
</div>

Demo

• chèn 1
• chèn 2
• chèn 3

• Con 1
• Con 2

Lưu ý:

• Chỉ nên sử dụng hàm này khi biết rõ đối tượng bạn cần chèn là gì.
• Tốt nhất nên dùng với cách select bằng id, tránh dùng hàm này với các selector trả về một mảng đối tượng như selector bằng name hoặc tag name. Ví dụ minh họa: Bạn hãy click nhiều lần vào bất kỳ button nào bạn sẽ thấy hàm sẽ không chạy chính xác với các selector trả về một mảng đối tượng

• chèn 1
• chèn 2
• chèn 3

1. Con 1
2. Con 2

1. Con 1
2. Con 2