�ݺ�ߣ

J Q U E R Y
&
B O O T S T R A
P

1.JQUERY
1.1 Jquery là gì?
• jQuery là thư viện javascript nổi bật nhất, phổ biến nhất
trong lập trình web. Ra đời vào năm 2006 bởi John Resig.
Nó đã trở thành một thành phần không thể thiếu trong các
website có sử dụng Javascript. Với slogan “Write less –
Do more” (viết ít hơn – làm nhiều hơn) nó đã giúp lập
trình viên tiết kiệm được rất nhiều thời gian và công sức
trong việc thiết kế website
• Những gì Jquery có thể làm:
 Hướng tới các thành phần trong tài liệu HTML
 Thay đổi giao diện của một trang web.
 Tương tác với người dùng
 Tạo hiệu ứng động cho những thay đổi của tài liệu.
 Lấy thông tin từ server mà không cần tải lại trang web
 -Tại sao jQuery làm việc tốt:
 Tận dụng kiến thức về CSS.
 Hỗ trợ Plugin…………

1.1 Jquery là gì?
 Tham chiếu:
• Hàm $() chính là một jQuery Object, đây là nên móng cho
tất cả những gì chúng ta sẽ học từ
• bây giờ. Jquery Object bao gồm không hoặc nhiều thành
phần DOM và cho phép chúng ta
• tương tác với chúng bằng nhiều cách. Trong trường hợp
này chúng ta muốn thay đổi cách
• hiển thị của những phần này trong trang, chúng ta thực
hiện nó bằng cách thay đổi class của nó.

1.2 Truy cập các
phần tử HTML
• $(selector).text() - Đặt hoặc trả về nội dung văn bản của các phần
tử đã chọn
• $(selector).html() - Đặt hoặc trả về nội dung của các phần tử đã
chọn (bao gồm đánh dấu HTML)
• demo:
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_h
tml_get
• $(selector).val() - Đặt hoặc trả về giá trị của trường biểu mẫu
• demo:
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_v
al_get
• $(selector).attr("tên thuộc tính") - lấy giá trị thuộc tính

1.2 Truy cập các
phần tử HTML
• $(selector).attr("tên thuộc tính", "giá trị cần thay đổi") -
thay đổi giá trị thuộc tính
• $(selector).html('<b>văn bản thay đổi</b>') - thay đổi văn
bản trong thẻ

1.3 Chọn các
phần tử
HTML,thuộc
tính và vị trí
• -jQuery selectors là gì
• Thư viện jQuery tận dụng kiến thức và thế mạnh của CSS Selector để
cho phép bạn nhanh chóng và dễ dàng truy cập nhiều phần tử hoặc nhóm
các phần tử trong DOM (Document Object Model
• -Các selector hay dùng trong jQuery
• ---selector cơ bản

1.3 Chọn các
phần tử
HTML,thuộc
tính và vị trí
• ---selector nâng cao

1.3 Chọn các
phần tử
HTML,thuộc
tính và vị trí
• demo:

1.3 Chọn các
phần tử
HTML,thuộc
tính và vị trí

1.4 Quản lí sự
kiện
 Gọi jQuery khi tải trang
• Cú pháp: $(selector).load(URL,data,callback);
- URL: Một chuỗi chứa url mà yêu cầu được gửi.
• Type: String
- Data: Một đối tượng hoặc chuỗi đơn giản được gửi đến máy chủ với yêu cầu.
• Type: PlainObject or String
- Callback: Một hàm gọi lại được thực thi khi yêu cầu hoàn thành.
• Type: Function
• Demo: https://www.w3schools.com/jquery/jquery_ajax_load.asp
 Sự kiện Clicks, double-clicks, mouse move
- Clicks: Phương thức click () kích hoạt sự kiện nhấp chuột hoặc đính kèm một
hàm để chạy khi sự kiện nhấp chuột xảy ra.
• +) Cú pháp: $(selector).click(function)
• +) Ví dụ:
• <!DOCTYPE html>
• <html>
• <head>
• <script
src=/slideshow/jquery-251183066/251183066/"https:/ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></scri
pt>
• <script>
• $(document).ready(function(){
• $("p").click(function(){
• alert("The paragraph was clicked.");
• });

1.4 Quản lí sự
kiện
- Double-clicks: Sự kiện dblclick xảy ra khi một phần tử được nhấp đúp.
Phương thức dblclick () kích hoạt sự kiện dblclick hoặc đính kèm một hàm
để chạy khi sự kiện dblclick xảy ra.
• +) Cú pháp: $(selector).dblclick(function)
• +) Chú thích: Sự kiện dblclick cũng tạo ra một sự kiện nhấp chuột. Điều
này có thể gây ra sự cố nếu cả hai sự kiện được áp dụng cho cùng một
phần tử.
• +) Ví dụ:
• <!DOCTYPE html>
• <html>
• <head>
• <script
src=/slideshow/jquery-251183066/251183066/"https:/ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></sc
ript>
• <script>
• $("p").dblclick(function(){
• alert("The paragraph was double-clicked.");
• });
• });
• </script>
• </head>
• <body>
•
• <p>Double-click on this paragraph.</p>
•
• </body>
• </html>
- Mouse move: Sự kiện di chuyển chuột xảy ra bất cứ khi nào con trỏ chuột di
chuyển trong phần tử đã chọn. Phương thức mousemove () kích hoạt sự kiện
mousemove hoặc đính kèm một hàm để chạy khi sự kiện mousemove xảy
ra.

1.4 Quản lí sự
kiện
• Cú pháp: $(selector).mousemove(function)
• +) Chú thích: Mỗi khi người dùng di chuyển chuột một pixel, một sự
kiện di chuyển chuột sẽ xảy ra. Cần tài nguyên hệ thống để xử lý tất cả
các sự kiện di chuyển chuột. Sử dụng sự kiện này một cách cẩn thận.
• +) Ví dụ:
• <!DOCTYPE html>
• <html>
• <head>
• <script
src=/slideshow/jquery-251183066/251183066/"https:/ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>
• <script>
• $(document).mousemove(function(event){
• $("span").text(event.pageX + ", " + event.pageY);
• });
• });
• </script>
• </head>
• <body>
•
• <p>Mouse is at coordinates: <span></span>.</p>
•
• </body>
• </html>

1.4 Quản lí sự
kiện
 Focus: Sự kiện tiêu điểm xảy ra khi một phần tử được lấy tiêu điểm (khi được
chọn bằng cách nhấp chuột hoặc bằng cách "điều hướng tab" đến phần tử đó).
Phương thức focus () kích hoạt sự kiện tiêu điểm hoặc đính kèm một hàm để
chạy khi sự kiện tiêu điểm xảy ra.
- Cú pháp: $(selector).focus(function)
- Chú thích: Phương pháp này thường được sử dụng cùng với phương thức blur()
- Ví dụ:
• <!DOCTYPE html>
• <html>
• <head>
• <script
src=/slideshow/jquery-251183066/251183066/"https:/ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></scrip
t>
• <script>
• $("input").focus(function(){
• $("span").css("display", "inline").fadeOut(2000);
• });
• });
• </script>
• <style>
• span {
• display: none;
• }
• </style>
• </head>
• <body>
• <input>
• <span>Nice to meet you!</span>
• <p>Click in the input field to get focus.</p>
• </body>
• </html>

1.4 Quản lí sự
kiện
 Sự kiện bàn phím
 Keydown: Sự kiện Keydown xảy ra khi một phím bàn phím được nhấn
xuống. Phương thức keydown () kích hoạt sự kiện keydown hoặc đính kèm
một hàm để chạy khi sự kiện keydown xảy ra.
- Cú pháp: $(selector).keydown(function)
- Chú thích: Sử dụng thuộc tính event.which để trả về phím bàn phím đã
được nhấn.
- Ví dụ:
• <!DOCTYPE html>
• <html>
• <head>
• <script
src=/slideshow/jquery-251183066/251183066/"https:/ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></s
cript>
• <script>
• $("input").keydown(function(){
• $("input").css("background-color", "yellow");
• });
• });
• </script>
• </head>
• <body>
• Enter your name: <input type="text">
• <p>Enter your name in the input field above. It will change background
color on keydown and keyup.</p>
• </body>
• </html>

1.4 Quản lí sự
kiện
 Keypress: Phương thức keypress () kích hoạt sự kiện nhấn phím hoặc đính
kèm một hàm để chạy khi sự kiện nhấn phím xảy ra. Sự kiện Keypress tương
tự như sự kiện Keydown. Sự kiện xảy ra khi một nút được nhấn xuống.
- Cú pháp: $(selector).keypress(function)
- Chú thích: sự kiện nhấn phím không được kích hoạt cho tất cả các phím (ví
dụ: ALT, CTRL, SHIFT, ESC). Sử dụng phương thức keydown () để kiểm
tra các khóa này.
- Ví dụ:
• <!DOCTYPE html>
• <html>
• <head>
• <script
src=/slideshow/jquery-251183066/251183066/"https:/ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></sc
ript>
• <script>
• i = 0;
• $("input").keypress(function(){
• $("span").text(i += 1);
• });
• });
• </script>
• </head>
• <body>
• <p>Keypresses: <span>0</span></p>
• </body>
• </html>

1.4 Quản lí sự
kiện
 Keyup: Sự kiện Keyup xảy ra khi một phím bàn phím được nhả ra. Phương
thức keyup () kích hoạt sự kiện keyup hoặc đính kèm một hàm để chạy khi
sự kiện keyup xảy ra.
- Cú pháp: $(selector).keyup(function)
- Chú thích: Sử dụng thuộc tính event.which để trả lại phím nào đã được nhấn.
- Ví dụ:
• <!DOCTYPE html>
• <html>
• <head>
• <script
src=/slideshow/jquery-251183066/251183066/"https:/ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></scr
ipt>
• <script>
• $("input").keydown(function(){
• $("input").css("background-color", "yellow");
• });
• $("input").keyup(function(){
• $("input").css("background-color", "pink");
• });
• });
• </script>
• </head>
• <body>
• <p>Enter your name in the input field above. It will change background
color on keydown and keyup.</p>
• </body>
• </html>

1.5 Ẩn và tìm
kiếm phần tử
trang web
 Ẩn phẩn tử
- Cú pháp: $(selector).hide(speed,callback)
- Ví dụ:
• <!DOCTYPE html>
• <html>
• <head>
• <script
src=/slideshow/jquery-251183066/251183066/"https:/ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.m
in.js"></script>
• <script>
• $("#hide").click(function(){
• $("p").hide();
• });
• });
• </script>
• </head>
• <body>
•
• <p>If you click on the "Hide" button, I will disappear.</p>
•
• <button id="hide">Hide</button>
•
• </body>
• </html>

1.5 Ẩn và tìm
kiếm phần tử
trang web
 Hiện thị các phần tử đang ẩn
- Cú pháp: $(selector).show(speed,callback);
- Ví dụ:
• <!DOCTYPE html>
• <html>
• <head>
• <script
src=/slideshow/jquery-251183066/251183066/"https:/ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.mi
n.js"></script>
• <script>
• $("#hide").click(function(){
• $("p").hide();
• });
• $("#show").click(function(){
• $("p").show();
• });
• });
• </script>
• </head>
• <body>
• <p>If you click on the "Hide" button, I will disappear.</p>
• <button id="hide">Hide</button>
• <button id="show">Show</button>
• </body>
• </html>

1.6 Trượt và
làm mờ rõ
các phần tử
 Trượt các phần tử lên xuống:
 (Link VD: https://www.laixe.xyz/2020/07/hieu-ung-truot-len-
xuong-slide-method-jquery.html)
• Trượt lên:
 Code: $(selector).slideUp(speed,callback);
• Trượt xuống:
 Code: $(selector).slideDown(speed,callback);
• Chú thích:
 selector: Đây là bộ chọn jQuery để xác định phần tử hoặc
những phần tử được chọn
 speed: Không bắt buộc. Dùng để chỉ định tốc độ của hiệu ứng
trựợt lên/xuống. (Giá trị mặc định là 400 milliseconds)
Giá trị có thể được sử dụng:
o milliseconds (nếu 1 giây thì bạn sẽ ghi là 1000)
o "slow"
o "fast"
 callback: Không bắt buộc. Dùng để thực thi một hàm sau khi
phương thức slideUp()/slideDown() hoàn thành.

1.6 Trượt và
làm mờ rõ
các phần tử
 Làm mờ/rõ:
 (Link VD: https://www.laixe.xyz/2020/07/hieu-ung-an-hien-
mo-dan-fade-jquery.html)
 Làm mờ:
 Code: $(selector).fadeOut(speed,easing,callback);
 Làm rõ:
 Code: $(selector).fadeIn(speed,easing,callback);
• Chú thích:
 selector: Đây là bộ chọn jQuery để xác định phần tử hoặc
những phần tử được chọn
 speed: Không bắt buộc. Dùng để chỉ định tốc độ của hiệu ứng
mờ/rõ dần. (Giá trị mặc định là 400 milliseconds)
o "slow"
o "fast"
 easing: Không bắt buộc. Dùng để chỉ định tốc độ của phần tử
trong các điểm khác nhau của sự chuyển động.(Giá trị mặc
định là "swing")
o "swing" - di chuyển chậm hơn ở đầu và cuối, nhưng
nhanh hơn ở giữa
o "linear" - di chuyển tốc độ không đổi

1.7. Tạo hiệu ứng cho
các phần tử
(Animate)
• (Link VD:
https://www.laixe.xyz/2020/07/phuong-thuc-
animate-tao-hieu-ung-jquery.html)
• Code:
(selector).animate({styles},speed,easing,callback)
• Chú thích:
 styles: Bắt buộc. Dùng để chỉ định một hoặc
nhiều thuộc tính / giá trị CSS để tạo hiệu
ứng.Những thuộc tính CSS có thể áp dụng được
phương thức animate()
o backgroundPositionX
o backgroundPositionY
o borderWidth
o borderBottomWidth
o borderLeftWidth
o borderRightWidth
o borderTopWidth
o borderSpacing
o margin
o marginBottom
o marginLeft
o marginRight
o marginTop
o opacity

1.7. Tạo hiệu ứng cho
các phần tử
(Animate)
• Selector:Đây là bộ chọn jQuery để xác định phần tử
hoặc những phần tử được chọn
• Speed:Không bắt buộc. Dùng để chỉ định tốc độ của
hiệu ứng animate. (Giá trị mặc định là 400
milliseconds)
 Giá trị có thể được sử dụng:
o "slow"
o "fast“
 easing: Không bắt buộc. Dùng để chỉ định tốc độ
của phần tử trong các điểm khác nhau của sự
chuyển động.(Giá trị mặc định là "swing")
o "swing" - di chuyển chậm hơn ở đầu và cuối,
nhưng nhanh hơn ở giữa
o "linear" - di chuyển tốc độ không đổi
• Callback: không bắt buộc. Dùng để thực thi một hàm
sau khi phương thức animate() hoàn thành

1.8 Làm động
nội dung
trang web
• Điều khiển văn bản (text) trên trang
• contents(): Lấy phần tử con của mỗi thành phần trong tập hợp các phần tử phù hợp,
bao gồm cả nốt văn bản (text nodes) và nốt bình luận (comment nodes), node có thể hiểu
như sau: Theo DOM, tất cả mọi thứ trong tài liệu XML là một node.
• Toàn bộ văn bản (document) là một document node
• Cấu trúc :
• .contents()
• $('.test').contents();
• Ví dụ :
• <!DOCTYPE HTML>
• <html>
• <head>
• <meta charset="utf-8">
• <title>Tiêu đề</title>
• <script src=/slideshow/jquery-251183066/251183066/"https:/code.jquery.com/jquery-
latest.js"></script>
• <script>
• $(function(){
$('.test').contents().filter('p').css('color','red');
• });
• </script>
• </head>
• <body>
• <div class="test">
• <p>Thành phần p</p>
• <span>Thành phần span</span>
• </div></body>
• </html>

1.8 Làm động
nội dung
trang web
• Thay đổi nội dung:
 Để thay đổi nội dung của bất cứ thẻ nào có thể chứa
văn bản chúng ta sử dụng hàm text (‘{nội dung}’)
 Ví dụ : ta có thẻ p như sau <p id=‘test’ > Đâyb là đoạn
văn bản ban đầu</p>
 Nếu muốn thay đổi src của thẻ img hoặc href của thẻ a
thì bạn sử dụng hàm attr({‘thuộc tính ’},{‘giá trị’});
• Bao phủ(Wrap) phần tử này bằng phần tử khác:
 Bao bọc cấu trúc HTML xung quanh mối phần tử trong tập
hợp các phần tử phù hợp
 Hàm Wrap có thể nhận bất kì choỗi hoặc đối tượng nào có
thể được chuyển đến $() để chỉ định cấu trúc DOM. Được
lồng với nhiều cấp độ ,nhưng chỉ nên chứa một phần tử
trong cùng.Một bản sao của cấu trúc này có thể bao quanh
từng phần tử trong tập hợp..Phương thức này trả về tập
hợp các phần tử ban đầu.
 Cách sử dụng: : $( ".inner" ).wrap( "<div
class='new'></div>" );

1.8 Làm động
nội dung
trang web
• -Lấy giá trị các phần tử của form
 Phương thức val() trong jQuery
 Phương thức val() dùng để thiết lập hoặc trả về giá trị của phần
tử.
• Cách sử dụng phương thức val() trong jQuery
 Đối với phương thức val()
 Lấy giá trị các phần tử: $(selector).val();
• Thay đổi thứ tự order của các phần tử
• jQuery có hai phương thức dùng để chèn phần tử này vào trước
phần tử kia là: .insertBefore() và .before(). Hai phương thức
này có cùng chức năng, nhưng khác nhau ở điểm là nó sẽ được
kết hợp với các phương thức khác như thế nào. Còn hai phương
pháp nữa là, .insertAfter() và .after(), cũng có nguyên lý hoạt
động như nhau nhưng nó được sử dụng để chèn phần tử này vào
sau phần tử kia. Với ví dụ về back to top của ta, chúng ta sẽ sử
dụng phương pháp .insertAfter().
• $(document).ready(function() { $('back to top')
.insertAfter('div.chapter p'); $(''); });

1.9 Thay thế loại
bỏ,sao chép
phần tử
• Thay thế phần tử này bởi phần tử khác:
 Để thay thế một phần tử này với phần tử khác hoặc chữ sử
dụng .html() .text() .replaceAll() .replaceWith()
 Thay thế tất cả các phần tử <p> bởi <h3>Lập Trình
Web</h3>
• <script>
$(document).ready(function(){
• $("button").click(function(){
• $("<h3>Lập Trình Web</h3>").replaceAll("p");
• });
• });
• </script>
• Điểm giống và khác giữa replaceAll() & replaceWith()
Điểm giống
- Cả hai phương thức này đều được dùng để thay
đổi phần tử được chọn bởi một nội dung khác.
Điểm khác
- Nội dung mà bạn muốn thay thế cho phần tử
được chọn phải là phần tử (tức là bắt đầu bằng thẻ
và kết thúc bởi thẻ)
- Bộ chọn được đặt ở phía sau.

bỏ,sao chép
phần tử
• Xóa Phần Tử
• Để loại bỏ một phần tử và con cái của nó trong một tài liệu
mà không thực sự xoá nó dùng .remove()
• Cú Pháp : $("selector1,selector2,....,relectorN").remove();
• Ví dụ:
• Câu lệnh dưới đây sẽ xóa và các phần tử <div> có class là
"abc", và các phần tử <p>
• $("p, div.abc").remove();
• Sao chép phần tử không kèm sự kiện
• Để sao chép phần tử, phương thức .clone() là tất cả những
gì chúng ta cần. Phương thức này sẽ tạo ra một bản sao của
phần tử mà chúng ta chọn để dùng sau này. Cũng như
những phương thức tạo ra các phần tử mới mà chúng ta đã
học ở trên, phương thức này cũng không tạo ra thay đổi gì
cho đến khi chúng ta sử dụng một trong những phương
thức chèn. Cũng giống như khi bạn copy một đoạn văn
trong Microsoft Word, khi bạn vừa bôi đen và chọn copy.
Thì MS Word sẽ lưu đoạn văn đó trong bộ nhớ của máy,
nhưng trên tài liệu chưa có gì xuất hiện. Cho đến khi bạn
chọn Paste thì đoạn văn copy mới được hiển thị. Phương
thức .clone() cũng hoạt động theo nguyên lý đó.
• Để sử dụng phương thức clone(), ta dùng cú pháp như sau:
• $(selector).clone(eventHandles)

bỏ,sao chép
phần tử
• Trong đó, tham số "eventHandlers" dùng để xác định việc các
sự kiện trên phần tử có được sao chép hay không, nó có thể nhận
một trong hai giá trị:
o true: có sao chép các sự kiện trên phần tử.
o false: không sao chép các sự kiện trên phần tử.
• - Lưu ý: Tham số "eventHandlers" là không bắt buộc vì mặc
định nó có giá trị là false.
• Tạo bản sao cho phần tử và sự kiện
• Sao chép kèm sự kiện Mặc định của phương thức .clone() là
không sao chép bất cứ sự kiện nào hoặc “họ hàng nội ngoại” của
đối tượng được chọn. Nhưng nó cũng có thể lấy vào một tham số
Boolean, mà khi giá trị này là true, nó sẽ sao chép cả sự kiện đi
kèm: .clone(true). Như vậy chúng ta đỡ phải mất công gán lại sự
kiện cho nó trong trường hợp chúng ta muốn nó đi kèm.
•

�ݺ�ߣ

Jquery

Recommended

More Related Content

What's hot (15)

Similar to Jquery (20)

Jquery