Thực hành trên thư viện jQuery
Tất cả đoạn văn p, bên trong chúng
có thẻ b, hãy bọc
trong thẻ div.
Tìm tất cả đoạn văn p với lớp
www, đặt cho chúng ở đầu văn bản
'!', sau đó thêm vào những đoạn văn này
cả tiêu đề h1-h6 và
tô màu những đoạn văn và tiêu đề này thành đỏ.
Tìm tất cả đoạn văn p và thay thế chúng
bằng thẻ div với nội dung giống nhau.
Đặt cho tất cả
checkbox không bị khóa
checkbox
trạng thái <a href="/vi/markup/manual/html/attr/checked/">'đã chọn'</a>.
Cho phần tử #test. Đặt cho phần tử láng giềng trực tiếp
phía trên nó văn bản '!', còn phần tử láng giềng
phía dưới - văn bản '?'. Giải bài toán bằng một
chuỗi lệnh.
Cho phần tử #test. Đặt cho các phần tử láng giềng trực tiếp
phía trên và phía dưới nó văn bản của phần tử #test.
Cho phần tử #test. Tìm trong số các phần tử láng giềng phía trên
đoạn văn gần nhất và đặt cho nó văn bản của phần tử
#test.
Tìm li thứ hai trên trang,
thêm cho nó lớp www, bọc
nó bên trong bằng thẻ i, chèn sau
nó li với văn bản 'xin chào'.
Tìm li thứ mười trên trang,
tìm cha của nó, lấy phần tử láng giềng trực tiếp
của cha phía trên, bọc nó trong
<div class="www"></div>.
Mỗi đoạn văn p, ngoại trừ các đoạn văn
có lớp www, hãy thêm vào cuối nó
số thứ tự của nó.
Tìm tất cả đoạn văn p và đặt
trước mỗi đoạn văn một bản sao của nó. Bản sao tô màu
đỏ, còn đoạn văn gốc tô màu xanh lá.
Tìm các đoạn văn p, đứng
trực tiếp dưới h2
và di chuyển mỗi đoạn văn sao cho nó
đứng trực tiếp trên h2.
Tìm tất cả đoạn văn p trống
(không có văn bản) và chèn vào chúng văn bản của
phần tử láng giềng trực tiếp phía trên.
Phần tử cha của thẻ b, nếu đó là
phần tử có lớp www hoặc đoạn văn
p, hãy đặt màu đỏ và
kích thước
văn bản thành 30px.
Tất cả đoạn văn p trống, hãy đặt
văn bản của thẻ h2 gần nhất phía trên chúng.
Cho các input với số. Hãy làm sao để trong các input trở thành bình phương của các số đó.
Cho phần tử #test. Đặt cho nó ở đầu văn bản
của phần tử láng giềng trực tiếp phía trên, còn ở cuối
- văn bản của phần tử láng giềng trực tiếp phía dưới.
Cho phần tử #test. Tìm phần tử láng giềng thứ hai của nó
phía trên và phần tử láng giềng thứ hai của nó phía dưới. Hãy làm
sao để các phần tử tìm được hoán đổi
văn bản (phần tử láng giềng phía trên lấy văn bản của phần tử láng giềng
phía dưới và ngược lại).
Cho phần tử div. Chọn
từ nó tất cả các phần tử con trực tiếp, không
phải là tiêu đề và tô chúng màu
đỏ.
Tìm tất cả đoạn văn p, tô màu
chúng thành đỏ. Sau đó chọn trong số các đoạn văn tìm được
các đoạn văn có lớp www và đặt
cho chúng văn bản '!'.
Tìm tất cả đoạn văn p có lớp
www, tô màu chúng thành đỏ.
Sau đó chọn trong số các đoạn văn tìm được phần tử đầu tiên
và đặt cho nó văn bản '!', sau đó chọn
phần tử cuối cùng và đặt cho nó văn bản '?'.
Giải bài toán bằng một chuỗi lệnh.
Tìm tất cả đoạn văn p, đặt
cho mỗi đoạn văn ở cuối cùng một văn bản giống với văn bản
nằm bên trong nó (tức là văn bản trong đoạn văn
sẽ được viết hai lần).
Tìm tất cả đoạn văn p, đặt
cho mỗi đoạn văn ở cuối số thứ tự của nó
trong tập hợp.
Cho các đoạn văn có số. Đặt cho mỗi đoạn văn ở cuối số, nằm trong nó, nhân với số thứ tự của nó trong tập hợp.
Khi nhấp vào đoạn văn p hãy xóa
các phần tử láng giềng trực tiếp phía trên và phía dưới của nó.
Khi nhấp vào đoạn văn p hãy xóa
tất cả các phần tử láng giềng phía trên của nó cho đến tiêu đề đầu tiên
h1-h6 (tức là các phần tử đứng
trên tiêu đề này và chính tiêu đề
không cần xóa).
Khi nhấp vào đoạn văn p hãy xóa
phần tử láng giềng phía dưới gần nhất của nó có
lớp www.
Khi nhấp vào đoạn văn p hãy xóa
phần tử láng giềng thứ năm phía dưới của nó.
Khi nhấp vào đoạn văn p hãy xóa
phần tử láng giềng thứ năm phía dưới của nó, nếu đó không phải là
h2.
Khi nhấp vào đoạn văn p hãy xóa
phần tử láng giềng thứ năm phía dưới của nó, nếu phần tử láng giềng này
không có bên trong thẻ b.
Khi nhấp vào đoạn văn p hãy xóa
phần tử láng giềng thứ năm phía dưới của nó, nếu phần tử láng giềng này
không đứng trực tiếp sau h2.
Cho phần tử #test. Hãy hoán đổi phần tử này
vị trí với phần tử láng giềng trực tiếp
phía dưới của nó.
Cho phần tử #test. Sau
phần tử láng giềng trực tiếp phía dưới của nó hãy chèn
bản sao của phần tử của chúng ta.
Cho phần tử #test. Hãy hoán đổi phần tử này
vị trí với phần tử láng giềng
phía dưới gần nhất có lớp www.
Tìm tất cả đoạn văn p, mà
trong cùng một phần tử cha nằm giữa một
h2 và một h2 khác.
Bọc mỗi đoạn văn p bên ngoài
và bên trong bằng div.
Tìm tất cả đoạn văn p, mà
phần tử cha trực tiếp không phải là div
và bọc mỗi đoạn văn trong <div class="www"></div>.
Tìm tất cả đoạn văn p. Xóa
phần tử cha của chúng (thực hiện unwrap cho nó),
nếu phần tử cha này không phải là div có lớp
www. Sau đó với những đoạn văn, mà
phần tử cha đã bị xóa, hãy bọc trong div
có lớp zzz.
Tìm tất cả các phần tử cha của phần tử #test
và tạo một mảng từ các lớp CSS của những phần tử cha đó.
Tìm tất cả đoạn văn p, có
thuộc tính class, và mỗi đoạn văn
bọc trong div với cùng các lớp,
như của đoạn văn tìm được, còn các lớp của mỗi
đoạn văn hãy xóa cùng với thuộc tính class.
Tìm tất cả đoạn văn p trong
#test, đặt cho chúng ở cuối văn bản
'!', sau đó loại trừ khỏi các đoạn văn tìm được
các đoạn văn có lớp www và với những đoạn văn còn lại
đặt màu đỏ.
Tìm tất cả li trên trang,
sau đó trước phần tử áp chót trong số tìm được hãy chèn
một li khác với văn bản 'mục'.
Tìm tất cả li trên trang,
sau đó chọn trong số tìm được phần tử thứ hai, thứ ba
và thứ tư từ cuối và đặt cho chúng văn bản
'!'.
Tìm ol với #test
và sắp xếp lại tất cả li
trong đó theo thứ tự ngược lại.
Cho phần tử #test. Tìm tất cả
phần tử láng giềng phía trên của nó và tất cả phần tử láng giềng phía dưới của nó và
hoán đổi vị trí của chúng (tức là tất cả những gì đứng
trước phần tử, phải đứng sau nó và ngược lại).
Lấy tất cả li có lớp
www, đặt màu đỏ cho chúng, sau đó
tìm trong số tìm được những li,
có lớp bbb và xóa
chúng. Giải tất cả bằng một chuỗi lệnh.
Lấy tất cả li trên trang. Các phần tử chẵn
trong số lấy được hãy làm cho trống, còn
các phần tử lẻ hãy xóa.
Tìm tất cả thẻ div và tăng gấp đôi
chiều cao của chúng.
Tìm tổng chiều cao của tất cả div
trên trang.
Với phần tử #test hãy tìm phần tử cha
gần nhất có lớp www, ở cuối phần tử cha này
thêm một đoạn văn với văn bản '!'.
Khi nhấp vào phần tử #test hãy tìm phần tử cha
gần nhất của nó có lớp www, bên trong
phần tử cha này hãy tìm tất cả đoạn văn và tô màu chúng
thành đỏ.
Tô màu 10 phần tử li
đầu tiên trên trang thành màu đỏ.
Tô màu từ phần tử 5 đến phần tử 10 li
trên trang thành màu đỏ.
Tìm 10 phần tử li
cuối cùng trên trang, tô màu chúng thành đỏ.
Sau đó trong số tìm được hãy tìm các phần tử li chẵn
và bọc chúng bên trong bằng thẻ b.
Trên trang có checkbox. Hãy đếm xem có bao nhiêu checkbox được chọn.
Cho 5
checkbox.
Hãy làm sao để sau khi người dùng
chọn hai trong số chúng, tất cả checkbox
bị khóa.
Hãy làm sao để tất cả checkbox được chọn checkbox thay đổi trạng thái của chúng thành không được chọn và ngược lại.
Cho một input.
Di chuyển nội dung của thuộc tính value vào thuộc tính
placeholder,
còn chính thuộc tính value hãy xóa hoàn toàn.
Cho một liên kết.
Nếu thuộc tính href bắt đầu bằng http://,
hãy thêm cho liên kết thuộc tính target="_blank".
Cho một input, mà có thể nhập số vào. Hãy làm sao để khi nhập số vào input này và mất focus trên trang sẽ tìm checkbox với số đó và trở thành được chọn, còn các checkbox khác trở thành không được chọn.
Cho một select và các radio button, số lượng radio bằng số lượng mục trong select. Hãy làm sao để khi chọn một mục trong select tự động trở thành được chọn radio button tương ứng (tương ứng theo số thứ tự: mục đầu tiên của danh sách - radio đầu tiên và cứ thế).