Xem Mục lục lập trình JQuery
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();
});
});
$("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();
});
});
$("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")
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();
});
});
$("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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
Nếu vẫn chưa rõ các bạn xem thêm video clip sau:
Xem Mục lục lập trình JQuery
By #drM
Không có nhận xét nào:
Đăng nhận xét