Người Viết : ViKiMi Editor

Xây dựng giao diện người dùng sử dụng thư viện jQuery với các phương thức Text / Html / Val
Thư viện jQuery thật thuận tiện khi có thể thao tác với tất cả dữ liệu. Điều này cho phép bạn có thể dễ dàng tạo ra dữ liệu cho giao diện Website. Khi giao diện Website phù hợp theo các hoàn cảnh khác nhau sẽ đáp ứng yêu cầu từ người dùng. Chính việc tạo ra một Website có tính động sẽ làm cho nó trở nên tương tác nhiều hơn, thậm chí bạn có thể tương tác CSDL
Chúng ta sẽ xem sự thao tác dữ liệu của jQuery với giao diện ra sao?
JQuery không chỉ có thể tạo ra các hiệu ứng, Nó còn có thể hỗ trợ tạo ra các dữ liệu dành cho người dùng bằng cách xử lý các dữ liệu cần thiết.
Bạn có thể hình dung một kích bản rằng : Các dữ liệu sẽ được lấy về từ Cơ sở dữ liệu, được xử lý theo các yêu cầu khác nhau bằng ngôn ngữ lập trình. Ngôn ngữ này bạn có thể lựa chọn là thư viện jQuery, Và bạn sẽ xử lý các dữ liệu này với thư viện jQuery.
Cuối cùng, khi dữ liệu đã được xử lý xong. Bạn sẽ dùng jQuery để hiển thị tới giao diện người dùng.
VẬY JQUERY CUNG CẤP NHỮNG ĐIỀU GÌ
Thưc viện jQuery cung cấp cho chúng ta 3 phương thức thao tác với những dữ liệu có thể hiển thị với giao diện người dùng.
Tất nhiên, với các dữ liệu tại cơ sở dữ liệu thì bạn phải thực hiện kết nối và xử lý phù hợp để có thể hiển thị tới người dùng. Thư viện jQuery là một trung gian xử lý cần thiết
3 phương thức như sau :
+ Phương thức 1 text() – Thiết lập hoặc Lấy về nội dung văn bản / text của các thành phần HTML được chọn
+ Phương thức 2 html() – Thiết lập hoặc Lấy về nội dung của các phần tử HTML đã chọn (bao gồm cả các thẻ đánh dấu HTML)
+ Phương thức 3 val() – Thiết lập hoặc Lấy về giá trị của các trường biểu mẫu của HTML : textbox, selectbox …
Tất cả phương thức này cung cấp bởi thư viện jQuery đều giúp bạn có thể dễ dàng thao tác với DOM. Việc thao tác trực tiếp với DOM là một thế mạnh của jQuery, điều này cho phép thao tác, thay đổi trên tất cả các phần tử và thuộc tính HTML
Để dễ dàng hiểu chúng ta có thể xem các ví dụ sau :
EXAMPLE 1 : Phương thức text()
+ Nội dung trang test.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#show_text").click(function(){
/* Tạo hộp thông báo nội dung text */
alert("Text: " + $( "#i_text" ).text () );
});
});
</script>
</head>
<body>
<p id="i_text">Thư viện <b>jQuery</b> thật thuận tiện.</p>
<button id="show_text">Show Text</button>
</body>
</html>
+ Nội dung Output
Thư viện jQuery thật thuận tiện.
Chúng ta thấy rằng phương thức text() chỉ lấy về nội dung văn bản của thẻ <P> có id = “i_text” . Nhưng cũng thấy: các thẻ HTML có trong thẻ <P> này thì không được phương thức text() trả về
Cụ thể là : Nội dung trả về không có thẻ <b>
EXAMPLE 2 : Phương thức html()
Vậy để nội dung trả về có thẻ <b> thì chúng ta cần sử dụng phương thức nào? Câu trả lời là phương thức html()
Phương thức html : Thiết lập hoặc Lấy về nội dung của các phần tử HTML đã chọn (bao gồm cả các thẻ đánh dấu HTML)
+ Ở đây chúng ta lấy về nội dung các phần tử HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#show_text").click(function(){
/* Tạo hộp thông báo nội dung text */
alert("Text: " + $("#i_text").html());
});
});
</script>
</head>
<body>
<p id="i_text">Thư viện <b>jQuery</b> thật thuận tiện.</p>
<button id="show_text">Show Text</button>
</body>
</html>
+ Nội dung Output
Thư viện <b>jQuery</b> thật thuận tiện.
Chúng ta đã thấy nội dung trả về bao gồm cả thẻ <b>jQuery</b>
Đó là tác dụng của phương thức html () . Nhưng có một nhược điểm là nội dung trả về sẽ không có các style mà bạn muốn định nghĩa, chẳng hạn : chữ đậm, chữ nghiêng, màu chữ ….
+ Nhưng khi bạn dùng phương thức html () để thiết lập nội dung cho thẻ HTML thì bạn sẽ thấy ngạc nhiên. Vì tất cả những định dạng html mà bạn thiết lập sẽ được đảm bảo đưa ra tới giao diện.
Chẳng hạn :
<script>
$(document).ready(function(){
$("#show_text").click(function(){
$("#i_text").html(“Thay đổi >> <b>Thư viện jQuery</b> thật thuận tiện.”);
});
});
</script>
Nội dung THIẾT LẬP output tới giao diện (Mẫu chữ Bold được thể hiện) :
Thay đổi >> Thư viện jQuery thật thuận tiện.
Thật hiệu quả vì khi dùng phương thức html() chúng ta có thể tạo ra một giao diện
Đó chính là khác biệt khi bạn sử dụng nó để thiết lập hoặc trả về.
EXAMPLE 3 : Phương thức val()
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#i-text").val());
});
});
</script>
</head>
<body>
<p>Your Comment: <input type="text" id="i-text" value="please type your comment "></p>
<button>Show Value</button>
</body>
</html>
+ Phương thức val() thật hiệu quả khi bạn muốn lấy về giá trị của các trường nhập liệu của HTML . Bạn có thể thấy ở trên !
Nội dung Output của hộp thông báo :
please type your comment
+ Tương tự, với phương thức Val() bạn cũng có thể thiết lập giá trị cho các trường nhập liệu HTML.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#i-text").val("Write your agreement or disagreement");
});
});
</script>
Tổng kết, chúng ta dễ dàng thấy rằng cách dùng 3 phương thức cơ bản của thư viện jQuery cho phép xây dựng giao diện Website rất tốt. Nhất là khi bạn có thể thao tác dữ liệu nhờ các xử lý phù hợp, khi dữ liệu đã ổn thì bạn có thể dùng jQuery để output tới người dùng.
Nếu bạn muốn tăng tốc cho Website, thì bạn có thể dùng thư viện jQuery để giao những công viện cho phía Client. Nhờ vậy bạn sẽ có một sinh thái Website mạnh mẽ hơn khi có cách xử lý.