NTM Solutions

Facebook Youtube Google+

Chủ Nhật, 22 tháng 1, 2017

TỰ HỌC JQUERY – CƠ BẢN - BÀI 3 - SELECTORS

jQuery selectors là phần quan trọng nhất trong thư viện jQuery.

jQuery Selectors

jQuery selectors cho phép bạn chọn và xử lý các phần tử HTML(s).
jQuery selectors dùng để "tìm" (hoặc chọn) phần tử HTML dựa trên tên, id, class, loại, thuộc tính, giá trị của các thuộc tính và nhiều hơn nữa. Nó dựa vào thư viện các CSS Selectors, và phần selectors tự định nghĩa.
Tất cả selectors trong jQuery bắt đầu với dấu $ và cặp dấu ngoặc đơn: $().

Selector phần tử

jQuery chọn phần tử HTML dựa trên tên thẻ.
Bạn có thể chọn tất cả thẻ <p> trên 01 trang bằng cú pháp:
$("p")
Ví dụ:
Khi người dùng bấm chuột lên 01 nút , tất cả thẻ <p> sẽ ẩn đi:

$(document).ready(function(){
    $(
"button").click(function(){
   
     $("p").hide();
    });
});

Chọn qua #id Selector

jQuery #id selector dùng để tìm các thẻ HTML qua thuộc tính id.
Cú pháp:
$("#test")



Khi người sử dụng bấm lên 01 nút, phần tử có id="test" sẽ bị ẩn đi:

Ví dụ:

$(document).ready(function(){
    $(
"button").click(function(){
   
     $("#test").hide();
    });
});

Chọn qua .class Selector

jQuery class selector tìm các phần tử trong 01 class xác định.
Tên class đặt sau dấu chấm:
$(".test")
Ví dụ:
Khi người dùng bấm lên 01 nút, các phần tử có class="test" sẽ bị ẩn đi:
$(document).ready(function(){
    $(
"button").click(function(){
   
     $(".test").hide();
    });
});

Vài ví dụ về jQuery Selectors

Cú pháp
Mô tả
$("*")
Chọn tất cả phần tử
$(this)
Chọn phần tử HTML hiện hành
$("p.intro")
Chọn tất cả thẻ <p> có class="intro"
$("p:first")
Chọn thẻ <p> đầu tiên
$("ul li:first")
Chọn thẻ <li> đầu tiên trong danh sách <ul>
$("ul li:first-child")
Chọn thẻ <li> đầu tiên trong mỗi danh sách <ul>
$("[href]")
Chọn tất cả phần tử có thuộc tính href
$("a[target='_blank']")
Chọn tất cả thẻ <a> với thuộc tính target có giá trị "_blank"
$("a[target!='_blank']")
Chọn tất cả thẻ <a> với thuộc tính target có giá KHÔNG LÀ "_blank"
$(":button")
Chọn tất cả <button> và <input> với type="button"
$("tr:even")
Chọn tất cả thẻ <tr> chẵn
$("tr:odd")
Chọn tất cả thẻ <tr> lẻ



Sử dụng công cụ jQuery Selector Tester để tìm công dụng của các selectors.
Và đây là danh mục chứa tất cả jQuery Selectors Reference.

Đặt các hàm trong 01 file riêng

Nếu trang web của bạn có nhiều trang, và bạn muốn các hàm jQuery dễ dàng truy cập, bạn có thể đặt các hàm jQuery của bạn trong 01 file .js riêng biệt.
Khi minh họa jQuery trong các bài hướng dẫn, các hàm được viết thẳng vào thẻ <head>. Tuy vậy, nếu bạn muốn đặt chúng trong 01 file riêng bạn có thể dùng thuộc tính src để khai báo đường dẫn:

Ví dụ:


<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>