Cùng học jQuery

jQuery - empty và remove

empty và remove thường được dùng để xóa các phần tử trong jQuery. Tuy hai hàm này có cùng chung một hành động nhưng chúng có một chút khác biệt như sau:

empty chỉ xóa các phần tử con của phần tử đang truy xuất.
remove giống hàm empty nhưng bao gồm cả phần tử đang truy xuất và phần tử con.

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

<ul id="test_ul">
 <li>lorem isum1</li>
 <li class="current">lorem isum2</li>
 <li>lorem isum3</li>
 <li>lorem isum4</li>
</ul>

Khi ta sử dụng:

jQuery("#test_ul").empty() jQuery sẽ xóa toàn bộ nội dung của thẻ ul có id là test_ul nhưng vẫn giữ lại bản thân thẻ đó.

<ul id="test_ul">
</ul>

jQuery("#test_ul").remove() jQuery sẽ xóa toàn bộ nội dung của thẻ ul có id là test_ul và xóa luôn cả thẻ ul test_ul. Tuy nhiên hàm remove sẽ trả về đối tượng mà nó vừa remove để chúng ta có khả năng lưu trữ và khôi phục lại khi cần

Demo ta có ô vuông bên trái chứa thẻ ul như trên và ô bên phải sẽ chứa giá trị trả về của lần lượt từng câu lệnh phía trên.

lorem isum1
lorem isum2
lorem isum3
lorem isum4

Code

<style>
.fly {
float:left;
display:inline;
}
.clean{
clear:both;
}
.current{
color:red;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#butEmpty").click(function(){
        var rmvObj = jQuery("#test_ul").empty();
        jQuery("#showReturn").html(rmvObj);
    });
    jQuery("#butRemove").click(function(){
        var rmvObj = jQuery("#test_ul").remove();
        jQuery("#showReturn").html(rmvObj);
    });
});
</script>
<div>
    <div class="fly" style="width:200px;border:1px solid gray;height:120px;">
        <ul id="test_ul">
            <li>lorem isum1</li>
            <li>lorem isum2</li>
            <li>lorem isum3</li>
            <li>lorem isum4</li>
        </ul>
    </div>
    <div class="fly" style="margin:0px 5px;">
        <input type="button" value="empty" id="butEmpty"/><br/>
        <input type="button" value="remove" id="butRemove"/><br/>
    </div>
    <div class="fly" style="width:200px;border:1px solid gray;height:120px;" id="showReturn"></div>
    <div class="clean"></div>
</div>

jQuery - XML

Khởi tạo XML

Để khởi tạo XML trong jQuery ta làm như sau:

var xml = $('<xml>');
xml.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");

Biến xml giờ đây được hiểu là một XML object. Ta chỉ việc append các node con vào trong object này.

Thêm node

Hàm find được dùng để tìm kiếm các thẻ trong xml. Ví dụ ta muốn tạo một danh sách employee. Ta làm như sau:

 //Đầu tiên ta tạo thẻ employees chứa các thẻ employee
 xml.append("<employees></employees>");

 //Tạo thẻ employee con
 var employee = "";
 employee += "<employee>";
 employee += "<name>Tran Van A</name>";
 employee += "<date>202020</date>";
 employee += "<email>abc@yahoo.com</email>";
 employee += "<phone>00000000</phone>";
 employee += "</employee>";

 // Sau đó ta tạo các thẻ employee con.
 // Ta dùng hàm find để tìm thẻ employees vừa tạo
 xml.find("employees").each(function(){
       
   // Thêm thẻ employee vào thẻ employees
   jQuery(this).append(employee);

 });

Cập nhật thông tin node

Sau khi thực hiện các lệnh trên ta có được nội dung xml như sau:

<?xml version="1.0" encoding="UTF-8"?>
<employees>
 <employee>
   <name>Tran Van A</name>
   <date>202020</date>
   <email>abc@yahoo.com</email>
   <phone>00000000</phone>
 </employee>
</employees>

Ta cần cập nhật thông tin tên của employee thành Nguyễn Văn B. Ta làm như sau:

// Lấy ra danh sách tất cả các thẻ name trong file xml
//Cách một
xml.find("name").each(function(){
  if (jQuery(this).text()=="Tran Van A"){
    jQuery(this).text("Nguyen Van B");
  }
});

//Cách hai
xml.find("employees").each(function(){
  jQuery(this).find("employee").each(function(){
    jQuery(this).find("name").each(function(){
      if(jQuery(this).text()=="Tran Van A"){
       jQuery(this).text("Nguyen Van B");
      }
    });
  });
});

Xóa một node

Sau khi thực hiện lệnh cập nhật, ta có nội dung xml như sau

<?xml version="1.0" encoding="UTF-8"?>
<employees>
 <employee>
   <name>Nguyen Van B</name>
   <date>202020</date>
   <email>abc@yahoo.com</email>
   <phone>00000000</phone>
 </employee>
</employees>

Bây giờ ta sẽ xóa node name của employee có tên là Nguyen Van B ra khỏi nội dung XML(Dùng hàm remove)

xml.find("employees").each(function(){
  jQuery(this).find("employee").each(function(){
    jQuery(this).find("name").each(function(){
      if(jQuery(this).text()=="Nguyen Van B"){
       // Dùng hàm remove để xóa node
       jQuery(this).remove();
      }
    });
  });
});

Nội dung file XML cuối cùng sẽ như sau

<?xml version="1.0" encoding="UTF-8"?>
<employees>
 <employee>
   <date>202020</date>
   <email>abc@yahoo.com</email>
   <phone>00000000</phone>
 </employee>
</employees>

jQuery - contains selector

contains selector thường được dùng để tìm kiếm những HTML DOM có chứa chuỗi cần tìm(có phân biệt chữ hoa, chữ thường).

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

jQuery(":contains('text')"): trả ra danh sách tất cả các object có chứa chuỗi text.
jQuery("div:contains('text')"): trả ra danh sách các object là thẻ div có chứa chuỗi text.

Ví dụ ta có thẻ ul có 5 thẻ con như sau

<ul id="contains_ul" style="float:left;">
 <li>Lorem ipsum dolor sit amet.</li>
 <li>Consectetur adipiscing elit.</li>
 <li>Fusce semper sapien nec urna.</li>
 <li>Curabitur vehicula, dui eu rutrum sollicitudin.</li>
 <li>Feugiat convallis sed sit amet velit.</li>
</ul>

Điền từ cần tìm kiếm vào ô textbox, click button contains. Nếu chuỗi cần tìm kiếm nằm trong nội dung của 1 trong 5 dòng thì chữ ở dòng đó sẽ chuyển sang màu đỏ.