Thao Tác Với HTML Bằng Jquery | Lê Vũ Nguyên Dạy Học Lập Trình

Trang chủ » Thêm Html Bằng Jquery » Thao Tác Với HTML Bằng Jquery | Lê Vũ Nguyên Dạy Học Lập Trình

Có thể bạn quan tâm

Nội dung bài viết
  • Giới thiệu nội dung bài viết
  • 1. Lấy nội dung và giá trị trên website
  • 2. Lấy thuộc tính của phần tử web
  • 3. Set giá trị cho phần tử web
  • 4. Set giá trị cho thuộc tính của phần tử web
  • 5. Thêm thẻ HTML vào thẻ có sẵn
  • 6. Xóa phần tử hoặc nội dung
  • 7. Thao tác với các CSS
Giới thiệu nội dung bài viết

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 website là như thế nào?

1. Lấy nội dung và giá trị trên website

Jquery cung cấp cho chúng ta 3 phương thức để (get) lấy giá trị hoặc set (thiết lập) giá trị trên các phần tử của web.

  • text() : dùng để set hoặc get giá trị text của phần tử web được chọn
  • html() : dùng để set hoặc get giá trị của phần tử web được chọn nhưng có kèm theo định dạng HTML
  • val() : dùng để set hoặc get giá trị từ một trường trong một 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 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); }); </script> </head> <body> <p id="test">This is some <b>bold</b> text in a paragraph.</p> <button id="btn1">Show Text</button> <button id="btn2">Show HTML</button> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert("Value: " + $("#test").val()); }); }); </script> </head> <body> <p>Name: <input type="text" id="test" value="Mickey Mouse"></p> <button>Show Value</button> </body> </html>
2. Lấy thuộc tính của phần tử web

Chúng ta sử dụng phương thức attr() để lấy giá trị của 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 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert($("#w3s").attr("href")); }); }); </script> </head> <body> <p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p> <button>Show href Value</button> </body> </html>
3. Set giá trị cho phần tử web

Để set 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 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); }); </script> </head> <body> <p id="test1">This is a paragraph.</p> <p id="test2">This is another paragraph.</p> <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p> <button id="btn1">Set Text</button> <button id="btn2">Set HTML</button> <button id="btn3">Set Value</button> </body> </html>
4. Set giá trị cho thuộc tính của phần tử web

Để set giá trị cho thuộc tính ta 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 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#w3s").attr("href", "https://www.w3schools.com/jquery/"); }); }); </script> </head> <body> <p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p> <button>Change href Value</button> <p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p> </body> </html>
5. Thêm thẻ HTML vào thẻ có sẵn

Jquery cung cấp cho chúng ta 4 phương thức để thêm mới một thành phần web vào thành phần được chọn.

  • append() : thêm nội dung vào cuối thành phần web được chọn
  • prepend(): thêm nội dung vào phần đầu tiên của thành phần web được chọn
  • after() : thêm nội dung vào sau thành phần web được chọn
  • before() : thêm nội dung vào trước thành phần được chọn
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 32 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>Appended text</b>."); }); $("#btn2").click(function(){ $("ol").append("<li>Appended item</li>"); }); }); </script> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">Append text</button> <button id="btn2">Append list items</button> </body> </html>
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 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").prepend("<b>Prepended text</b>. "); }); $("#btn2").click(function(){ $("ol").prepend("<li>Prepended item</li>"); }); }); </script> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">Prepend text</button> <button id="btn2">Prepend list item</button> </body> </html>
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 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("img").before("<b>Before</b>"); }); $("#btn2").click(function(){ $("img").after("<i>After</i>"); }); }); </script> </head> <body> <img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140"><br><br> <button id="btn1">Insert before</button> <button id="btn2">Insert after</button> </body> </html>
6. Xóa phần tử hoặc nội dung

Để xóa thành phần trên website hoặc nội dung của nó thì chúng ta sử dụng 2 phương thức.

  • remove() : xoá các phần tử được chọn và các phần tử con của nó.
  • empty() : xoá các phần tử con của phần tử được chọn
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 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> This is some text in the div. <p>This is a paragraph in the div.</p> <p>This is another paragraph in the div.</p> </div> <br> <button>Remove div element</button> </body> </html>
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 32 33 34 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").remove(".test, .demo"); }); }); </script> <style> .test { color: red; font-size: 20px; } .demo { color: green; font-size: 25px; } </style> </head> <body> <p>This is a paragraph.</p> <p class="test">This is p element with class="test".</p> <p class="test">This is p element with class="test".</p> <p class="demo">This is p element with class="demo".</p> <button>Remove all p elements with class="test" and class="demo"</button> </body> </html>
7. Thao tác với các CSS

Chúng ta có thể thêm hoặc xóa các CSS class trong một phần tử web với các phương thức:

  • addClass() : thêm một hoặc nhiều CSS cho phần tử được chọn.
  • removeClass() : xóa một hoặc nhiều CSS cho phần tử được chọn.
  • toggleClass() : toggle (hoán đổi) giữa hành động thêm và xóa một CSS cho một phần tử được chọn.
  • css() : set hoặc get thuộc tính style.
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 32 33 34 35 36 37 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("h1, h2, p").addClass("blue"); $("div").addClass("important"); }); }); </script> <style> .important { font-weight: bold; font-size: xx-large; } .blue { color: blue; } </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is some important text!</div><br> <button>Add classes to elements</button> </body> </html>

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Từ khóa » Thêm Html Bằng Jquery