Jquery selector & Jquery events
Bài đăng này đã không được cập nhật trong 9 năm
Trước khi đi vào bài viết thì các bạn mới nhập môn jquery nên đọc 2 bài viết sau về căn bản jquery vì bài này sẽ đi từ 2 bài trên lên cùng một số điều hay ho mà mình vọc được
bài 1 : Jquery căn bản
bài 2: tổng quan về jquery selector
Jquery selector
Giống như đã đề cập ở 2 bài viết trên, Jquery selector giúp cho bạn có thể truy xuất các phần tử hoặc các nhóm phần tử trong DOM ( Document Object Model) một cách nhanh chóng và dễ dàng.
Vì cách cách sử dụng cơ bản selector đã được mô tả khá chi tiết ở bài 2 nên mình sẽ vào luôn phần tiếp đó là việc kết hợp các selector để code các bạn viết sau này tốt hơn, đẹp hơn.
Ở đây ta có thể kể hợp các selector bằng cách sử dụng các toán tử thông dụng như : +, ~, > ( Css 3 cũng có hỗ trợ các kiểu này)
một số các kết hợp phổ biến:
❖ $(“A B”) : Chọn tất cả các phần tử B trong DOM là phần tử con của phần tử A
ví dụ :
"company employee" // chọn phần tử <employee> là con của phần tử <company>
❖ $(“A > B”): Chọn tất cả các phần tử B trong DOM là phần tử con trực tiếp của các phần tử A
"ul > li" // chọn phần tử <li> là con trực tiếp của phần tử <ul>
❖ $(“A ~ B”) : Chọn các phần tử B theo sau phần tử A( anh chị em)
"div ~ ul" // chọn phần tử <ul> theo sau phần tử <div>
❖ $(“A + B”): Chọn các phần tử B theo sát ngay sau phần tử A( giữa A và B không tồn tại bất cứ phần tử nào khác)
"div + ul" // chọn phần tử <ul> ngay sát sau phần tử <div>
Ngoài cách sử dụng đơn giản trên, ta còn có thể kết hợp với các kiểu khác đa dạng hơn như là dùng selector theo class, id hay kết hợp nhiều điều kiện 1 lúc
ví dụ:
sử dụng selector trường ID
"#data_index + *" // chọn phần tử bất kỳ ngay sát sau phần tử có id=”data_index” hay có thể dùng kết hơp như:
"div.content> ul + p" // chọn phần tử có thẻ <p> ngay sau thẻ <ul> là con của thẻ <div> mà có trường class="content"
Ngoài ra ta còn có thể nhóm các selector đơn lẻ với nhau thông qua việc ngăn cách bới dấu "," . Đây là một điều rất tiện lợi trong jquery khi ta muốn xử lý nhiều selector một lúc
ví dụ:
"h1, h2, h3" // tất cả các thẻ <h1>, <h2>, <h3>
"#p1, .content, div" // chọn các phần tử có id ="p1", class="content", hoặc thẻ tag <div>
"body > p, div.content > p" // chọn các thẻ p là con của thẻ <body> hoặc của thẻ <div > có class="content".
Tuy nhiên ta không thể nhóm các selector đơn lẻ với nhau thành một nhóm và sử dụng như 1 selector:
ví dụ:
(h1, h2, h3) > p // sai
h1 > p, h2 > p, h3 > p // đúng
Tối ưu hóa selector (đây là phần khá hay ho)
Khi các bạn viết, chạy code thì trình duyệt sẽ duyệt selector từ phải sang trái điều đó có nghĩa là các phần tử con sẽ được thu thập đầu tiên sau đó mới được lọc và loại bỏ dựa trên các điều kiện
ví dụ với selector sau:
$(“#data p”)
thì ở đây, đầu tiên Selector sẽ lọc phần tử thẻ <p> đầu tiên và lấy hết ra sau đó mới kiểm tra xem phần tử thẻ <p> nào có cha là thẻ có trường id="data".
Dựa vào điều này nếu để ý khi code bạn có thể giúp cho code mình chạy nhanh hơn tương đối so với viết thông thường nhất là trong trường hợp dùng selector các phần tử có tên được dùng phổ biến trong DOM
Một số cách để viết tối ưu:
Ưu tiên chọn phẩn tử id hoặc class trước vì các phần tử này thường có các giá trị phân biệt. Kết hợp dùng hàm find() để chia selector và tìm kiếm 1 cách chủ định hơn
ví dụ:
$(“#data p”) // cách cũ chậm
$("#data").find("p") // cách tối ưu nhanh hơn
Nên để các phần tử cụ thể ở bên phải selector, không nên để các phần tử phổ bên ở bên phải selector
$(“.buttons > *”); //không nên dùng * vì chương trình sẽ lọc lấy tất cả các phần tử
$(“.buttons”).children() //tối ưu hơn vì đã lọc trước điều kiện có phần tử cha class="buttons"
Jquery events
Trước tiên phải kể tới $(document).ready(). Đây là bộ quản lý sự kiện cơ bản nhất của jquery, được gọi tới sử dụng ngay khi trang web của bạn được load xong. Ngoài ra hàm này có thể được gọi lại nhiều lần nếu bạn cần load lại các event đầu tiên khi mở trang web.
Một số cách viết khác: $(function(){ code_here }) hay $().ready(function(){ code_here })
ví dụ:
html code:
<button id=”target”>click here to hide "Notice"</button>
<body> Notice </body>
code jquey:
$(document).ready( function () {
$("#target").click(function( e ){
$(“body”).hide();
});
});
ta có thể dễ dàng hiểu được cơ chế hoạt động trên, đó là khi ta click vào button có id="target" thì tất cả nội dung trong thẻ tag <body> sẽ bị biến mất. Và hàm function() bên trong $(document).ready( function ()) được gọi là eventHandler. EventHandler này dùng để xử lý sự kiện click chuột trong ví dụ trên.
Khá dễ hiểu và đơn giản phải không nào! Okie, ở đây chắc có không ít bạn đặt câu hỏi, thế cái biến "e" trong eventHandler dùng để làm gì, có tác dụng gì. Mình xin trả lời luôn đối số "e" đó được gọi là event object còn cái tên "e" là do mình đặt, các bạn có thể thay thế bằng các tên biến mà bạn thích. Event object này được dùng trong khá nhiều trường hợp khi bạn muốn thiết lập cho các trường hợp cụ thể nào đó, như ngăn cản hành vi của sự kiện, lấy các giá trị về tọa độ con trỏ chuột ...
ví dụ về lấy tọa độ con trỏ chuột:
code jquery:
$(document).click( function ( e ){
alert ( “X is: “+ e.pageX + “Y is: “ + e.pageY);
});
Khi chạy code trên thì mỗi khi ta kick chuột vào 1 ví trí trên trang web thì sẽ có 1 bảng thông báo báo hiệu vị trí tọa độ của con trỏ chuột hiện tại.
pageX, pageY được gọi là thuộc tính (properties) của event object. Ngoài 2 thuộc tính này ra thì còn rất nhiều thuộc tính khác như: prevValue, relatedTarget, screenX, screenY, shiftKey, target, view, which ...
các bạn có thể tham khảo thêm ở trang api jquery đây. Có thể phần tới mình sẽ viết rõ hơn về các thuộc tính của event object của mục này.
ngoài click ra, jquery còn hỗ trợ rất nhiều các sự kiện khác như:
chuột:
-
bdlclick: kích hoạt sự kiện khi phẩn tử được click đúp 2 lần
-
mouseenter: kích hoạt sự kiện khi phẩn tử được click chuột
-
mouselave: kích hoạt sự kiện khi di chuyển chuột ra khỏi phẩn tử
-
mouseup: kích hoạt sự kiện khi nhả chột ra khỏi phần tử
Ngoài con trỏ chuột ra ta còn có thể bắt các sự kiện khác như sự kiện từ
bàn phím:
-
keydown: kích hoạt sự kiện khi nhấn phím
-
keypress: kích hoạt sự kiện sau khi nhấn và thả phím
-
keyup: kích hoạt sự kiện sau khi bạn thả phím ra
sự kiện trình duyệt:
-
scroll: kích hoạt sự kiện khi cuộn trang
-
resize: kích hoạt sự kiện khi thay đổi kích cỡ cửa sổ
form:
-blur : khi người dùng thoát khỏi focus khi nhập thông tin
- change: khi một thành phần bị thay đổi
-submit: khi submit lên
Lời kết:
Sau bài viết này hi vọng các bạn đã có thêm cái nhìn rõ nét hơn khi sử dụng jquery để tạo hiệu ứng cho trang web của mình thêm đẹp, mượt mà khi chạy cũng như code tốt hơn, tối ưu hơn khi chạy. Chúc các bạn code thật vui vẻ 
All rights reserved
