[jQuery] Truy cập các phần tử DOM

Events happening in the community are now at Drupal community events on www.drupal.org.
thehong's picture

jQuery hỗ trợ các phương thức truy cập các phần tử trong trang web sau: theo ID, theo tên thẻ HTML, theo thuộc tính HTML, theo tên CSS, theo XPath.

1. Thông qua ID
Cú pháp truy cập phần tử DOM theo ID có dạng: $('#ID'). Thí dụ 1, ẩn phần tử DOM có ID là 'MyID':

<script>
<!--
$(function(){
  $('#MyID').hide();
});
-->
</script>

2. Thông qua tên thẻ HTML
Cú pháp truy cập phần tử DOM theo thẻ HTML có dạng: $('tagName'). Thí dụ 2, ẩn tất cả các phần tử DOM có tên thẻ 'p':

<script>
<!--
$(function(){
  $('p').hide();
});
-->
</script>

Thí dụ 3, ẩn phần tử DOM đầu tiên có tên thẻ là 'DIV':

<script>
<!--
$(function(){
  $('p:eq(0)').hide();
});
-->
</script>

3. Thông qua thuộc tính HTML
Cú pháp truy cập phần tử DOM theo thuộc tính HTML có dạng $('[@key=@val]'). Thí dụ 4, chọn lựa các phần tử DOM có tên thẻ là 'input' và thuộc tính 'type' là 'hidden', sau đó, thay đổi giá trị của các phần tử đó thành 'I am a hidden field':

<script>
<!--
$(function(){
  $('input[@type=hidden]').each(function(){
    $(this).val('I am a hidden field');
  });
});
-->
</script>

Kỳ tới:
4. Truy cập phần DOM theo phương thức XPath
5. Truy cập phần DOM theo phương thức CSS
6. Các phương thức truy cập đặc biệt

Thế Hồng,

Comments

duchanhtb's picture

để tôi giúp thehong một tay.
4. Truy cập phần DOM theo phương thức XPath: cái này chưa tìm hiểu mà hình như thế này:

truy cập tất cả các liên kết trong thẻ "p"

<script>   
   $(document).ready(function(){      
            $("/p//a", this)

});
</script>

5. Truy cập phần DOM theo phương thức CSS
ví dụ: đặt lại đường viền màu đỏ cho những thẻ có class="abc"

<script>   
   $(document).ready(function(){      
            $(".abc").css("border","3px solid red");

});
</script>

làm mờ dần, rõ dần những những thẻ html có class ="abc"

<script>   
   $(document).ready(function(){      
            $(".abc").fadeOut("slow",function(){
                              $(".abc").fadeIn("slow");
                         });

});
</script>

6. Các phương thức truy cập đặc biệt

không biết đặc biệt theo thehong là thế nào lấy ví dụ đại 1 cái

truy cập tất cả các thẻ input có tên chứa từ duchanh và đặt value cho nó là "Nguyễn Đức Hạnh";

<script>   
   $(document).ready(function(){      
            $("input[name*='duchanh']").val("Nguyễn Đức Hạnh");

});
</script>

jquery

vietnux's picture

đến đây là hết hả