Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người cách sử dụng jquery để thao tác với các thành phần của trang web là như thế nào?
Jquery cung cấp cho chúng ta 3 phương thức để [nhận] lấy giá trị hoặc thiết lập [thiết lập] giá trị trên các phần tử của web
- chữ[]. used to set or get value text of the web section used to be select
- html[]. used to set or get value of the web section's điện tử được chọn nhưng có kèm theo định dạng HTML
- giá trị[]. used to set or get value from a field in a form
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
This is some bold text in a paragraph.
Show Text
Show HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Name:
Show Value
Chúng ta sử dụng phương thức attr[] để lấy giá trị thuộc tính của phần tử HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
W3Schools.com
Show href Value
Để đặt giá trị cho một phần tử web được chọn, ta cũng sử dụng 3 phương thức text[], html[] và val[]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
This is a paragraph.
This is another paragraph.
Input field:
Set Text
Set HTML
Set Value
Để đặt giá trị cho thuộc tính ta sẽ sử dụng phương thức attr
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
W3Schools.com
Change href Value
Mouse over the link [or click on it] to see that the value of the href attribute has changed.
Jquery cung cấp cho chúng ta 4 phương thức để thêm mới một phần web vào phần được chọn
- nối thêm []. add content to the end of the web section are select
- trả trước[]. thêm nội dung vào phần đầu tiên của thành phần web được chọn
- sau đó[]. add content to after the web section are select
- trước[]. thêm nội dung vào trước thành phần được chọn
This is some bold text in a paragraph.
Show Text
Show HTML
0
This is some bold text in a paragraph.
Show Text
Show HTML
11
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
This is some bold text in a paragraph.
Show Text
Show HTML
3
This is some bold text in a paragraph.
Show Text
Show HTML
4
This is some bold text in a paragraph.
Show Text
Show HTML
5Để xóa thành phần trên trang web hoặc nội dung của nó thì chúng ta sử dụng 2 phương thức
- di dời[]. xóa các phần tử được chọn và các phần tử con của nó
- trống[]. xóa các phần tử con của phần tử được chọn
This is some bold text in a paragraph.
Show Text
Show HTML
6
This is some bold text in a paragraph.
Show Text
Show HTML
7
This is some bold text in a paragraph.
Show Text
Show HTML
8
This is some bold text in a paragraph.
Show Text
Show HTML
9Chúng ta có thể thêm hoặc xóa các lớp CSS trong một phần tử web với các phương thức
- thêmClass[]. thêm một hoặc nhiều CSS cho phần tử được chọn
- loại bỏClass[]. xóa một hoặc nhiều CSS cho phần tử được chọn
- chuyển đổiClass[]. chuyển đổi [hoán đổi] giữa hành động bổ sung và xóa CSS cho phần tử được chọn
- css[]. đặt hoặc lấy kiểu thuộc tính
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
01
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật những video mới nhất về kỹ thuật và kỹ năng mềm
Các khóa học cài đặt phụ kiện tại đây
- Phương thức append[] dùng để thêm nội dung vào vị trí cuối cùng bên trong phần nội dung của phần tử được chọn
- Thêm nội dung từ cơ bản đến nâng cao vào vị trí cuối cùng bên trong phần nội dung của tất cả các phần tử
when user click to a node
Xem ví dụ- Gợi ý. Để thêm nội dung vào vị trí đầu tiên bên trong phần nội dung của tử được chọn, ta sử dụng phương thức prepend[]
Sự miêu tả. Chèn nội dung, được chỉ định bởi tham số, vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp
phiên bản thêm. 1. 0
nội dung
Kiểu. hoặc hoặc hoặc hoặc hoặc
Phần tử DOM, nút văn bản, mảng phần tử và nút văn bản, chuỗi HTML hoặc đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp
nội dung
Kiểu. hoặc hoặc hoặc hoặc hoặc
Một hoặc nhiều phần tử DOM bổ sung, nút văn bản, mảng phần tử và nút văn bản, chuỗi HTML hoặc đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp
phiên bản thêm. 1. 4
chức năng
Kiểu. [ chỉ mục, html ] => hoặc hoặc hoặc
Một hàm trả về một chuỗi HTML, [các] phần tử DOM, [các] nút văn bản hoặc đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp. Nhận vị trí chỉ mục của phần tử trong tập hợp và giá trị HTML cũ của phần tử làm đối số. Trong hàm, this
đề cập đến phần tử hiện tại trong tập hợp
Phương thức
$[ ".inner" ].append[ "Test
" ];
0 chèn nội dung được chỉ định làm phần tử con cuối cùng của mỗi phần tử trong bộ sưu tập jQuery [Để chèn nội dung đó làm phần tử con đầu tiên, hãy sử dụng $[ ".inner" ].append[ "Test
" ];
1]Các phương thức
$[ ".inner" ].append[ "Test
" ];
0 và $[ ".inner" ].append[ "Test
" ];
3 thực hiện cùng một nhiệm vụ. Sự khác biệt chính là ở cú pháp cụ thể, ở vị trí của nội dung và mục tiêu. Với $[ ".inner" ].append[ "Test
" ];
0, biểu thức bộ chọn đứng trước phương thức là vùng chứa nội dung được chèn vào. Mặt khác, với $[ ".inner" ].append[ "Test
" ];
5, nội dung đứng trước phương thức, dưới dạng biểu thức bộ chọn hoặc dưới dạng đánh dấu được tạo nhanh chóng và nó được chèn vào vùng chứa đíchHãy xem xét HTML sau
1
2
3
4
5
Greetings
Hello
Goodbye
Bạn có thể tạo nội dung và chèn nó vào nhiều thành phần cùng một lúc
1
$[ ".inner" ].append[ "Test
" ];
Mỗi phần tử bên trong
$[ ".inner" ].append[ "Test
" ];
6 có nội dung mới này1
2
3
4
5
6
7
8
9
10
11
Greetings
Hello
Test
Goodbye
Test
Bạn cũng có thể chọn một thành phần trên trang và chèn nó vào một thành phần khác
1
$[ ".container" ].append[ $[ "h2" ] ];
Nếu một phần tử được chọn theo cách này được chèn vào một vị trí duy nhất ở nơi khác trong DOM, thì phần tử đó sẽ được chuyển vào mục tiêu [không được sao chép]
1
2
3
4
5
Hello
Goodbye
Greetings
Quan trọng. Tuy nhiên, nếu có nhiều hơn một phần tử đích, các bản sao nhân bản của phần tử được chèn sẽ được tạo cho từng mục tiêu ngoại trừ mục tiêu cuối cùng
Đối số bổ sung
Tương tự như các phương pháp thêm nội dung khác như
$[ ".inner" ].append[ "Test
" ];
7 và $[ ".inner" ].append[ "Test
" ];
8, $[ ".inner" ].append[ "Test
" ];
0 cũng hỗ trợ truyền nhiều đối số làm đầu vào. Đầu vào được hỗ trợ bao gồm các phần tử DOM, đối tượng jQuery, chuỗi HTML và mảng các phần tử DOMVí dụ: phần sau sẽ chèn hai
$[ ".inner" ].append[ "Test
" ];
6 mới và một $[ ".inner" ].append[ "Test
" ];
6 hiện có làm ba nút con cuối cùng của phần thân1
2
3
4
5
var $newdiv1 = $[ "" ],
newdiv2 = document.createElement[ "div" ],
existingdiv1 = document.getElementById[ "foo" ];
$[ "body" ].append[ $newdiv1, [ newdiv2, existingdiv1 ] ];
Vì
$[ ".inner" ].append[ "Test
" ];
0 có thể chấp nhận bất kỳ số lượng đối số bổ sung nào, nên có thể đạt được kết quả tương tự bằng cách chuyển ba $[ ".inner" ].append[ "Test
" ];
6 thành ba đối số riêng biệt, như vậy. Greetings
Hello
Test
Goodbye
Test
4. Loại và số lượng đối số sẽ phụ thuộc phần lớn vào cách bạn thu thập các phần tử trong mã của mình