Tin tức hoạt động và xu hướng sử dụng phần mềm, tính năng phần mềm được Bắc Việt cập nhật liên tục
Hầu hết Frontend thường sử dụng rất nhiều hiệu ứng và giao tiếp server thông qua Javascript. Nhưng việc làm này vẫn gây ra rất nhiều hạn chế. Chính vì vậy, JQuery được dùng như một giải pháp hữu hiệu giúp giải quyết triệt để tình trạng này.
Ba ngôn ngữ cơ bản là HTML, CSS và Javascript
Để xây dựng một trang website, chúng ta cần có ba ngôn ngữ cơ bản là HTML, CSS và Javascript. Trong đó, HTML xây dựng cấu trúc web, CSS làm đẹp cho web và JavaScript tạo tương tác cho các chức năng. Hầu hết các thao tác hay các hành động bất kỳ trên web đều được tạo bằng JavaScript.
Tham khảo thêm bài viết: Javascript là gì? Cách nhúng Javascript lên website
jQuery đóng vai trò quan trọng trong việc đơn giản hoá các đoạn mã code Javascript trong việc lập trình thiết kế website. Vậy jQuery là gì? Tại sao chúng ta lại phải cần sử dụng jQuery? Hãy cùng BẮC VIỆT tìm hiểu thông qua bài viết này nhé!
Jquery được hiểu hình dung như một thư viện xây dựng hoàn toàn từ Javascript, chủ yếu để giúp cho những lập trình viên có thể xây dựng được các chức năng trên Javascript và sử dụng chúng một cách dễ dàng hơn. jQuery hiện nay đã được tích hợp thêm các nhiều loại module khác từ module hiệu ứng đến module truy vấn selector. Cũng vì thế mà không quá nhiều người xa lạ khi nhắc đến khái niệm về Jquery, bởi nó gần như được dùng ở hầu hết các website trên thế giới hiện nay (ngoại trừ một số website đang sử dụng JS Framework).
jQuery không phải là một ngôn ngữ lập trình, mà là một công cụ dùng để viết các tác vụ phổ biến của JavaScript một cách chính xác hơn. Ngoài ra, JQuery còn tương thích với nhiều trình duyệt, điều đó có nghĩa là các sản phẩm phần mềm của bạn chắc chắn sẽ được hỗ trợ trên bất kỳ trình duyệt hiện đại nào.
Để thấy được sự khác biệt của JavaScript và jQuery, hãy xem ví dụ dưới đây khi viết chương trình cơ bản “Hello, World!”
Ví dụ trên cho thấy cách jQuery có thể đạt được kết quả cuối cùng như JavaScript theo một cách ngắn gọn hơn.
jQuery là một thư viện JavaScript, giúp đơn giản hóa việc lập trình JavaScript
Bài viết này bao gồm các thông tin căn bản dành cho các đối tượng chưa có kiến thức gì về jQuery. Bao gồm các phần sau đây:
Trước khi đi sâu vào bài hướng dẫn này, bạn cần nắm một số kiến thức sau đây để có thể tiếp thu những kiến thức mới:
jQuery có các module chính bao gồm như sau:
Các tính năng của jQuery được đông đảo mọi người quan tâm đến rất nhiều. Hiện nay, jQuery đóng vai trò như bộ công cụ Javascript được thiết kế với mục đích đơn giản hoá các tác vụ khác nhau bằng cách viết ít code hơn. Thế nên, jQuery sở hữu một số tính năng quan trọng như:
Ngoài ra, nhờ được hỗ trợ bởi phần lớn là các trình duyệt hiện đại, jQuery luôn hoạt động tốt trên các ứng dụng IE 6.0+, FF 2.0+, Safari 3.0+, Chrome, Cốc Cốc và Opera 9.0+. Do đó, việc người dùng tìm hiểu xem jQuery là gì sẽ dễ dàng hơn rất nhiều nhờ vào những tính năng này.
Để sử dụng jQuery, hiện nay người ta thường dùng theo 2 cách cơ bản sau:
jQuery là một tập tin JavaScript mà bạn sẽ liên kết vào HTML của mình. Có hai cách để cài đặt jQuery vào dự án:
Lưu ý: Content Delivery Network (CDN) là một hệ thống bao gồm nhiều máy chủ cung cấp nội dung web cho người dùng dựa trên vị trí địa lý. Khi bạn liên kết đến tệp jQuery được lưu trữ thông qua CDN, nó có khả năng đến người dùng nhanh hơn và hiệu quả hơn so với khi bạn lưu trữ trên máy chủ của riêng mình.
Trong các ví dụ, chúng tôi sẽ sử dụng CDN để tham chiếu đến JQuery. Trên máy chủ của Google (Google’s Hosted Libraries) bạn có thể tìm và tải các phiên bản JQuery mới nhất. Ngoài ra bạn còn có thể tải bản sao của JQuery từ trang web chính thức của nó.
Hãy làm quen bằng một dự án web nhỏ được cấu thành từ style.css trong thư mục css/, script.css trong thư mục js/ và index.html trong phần cuối của project.
Trước tiên, hãy tạo một khung HTML và lưu nó dưới dạng index.html.
Ngay trước phần tag </body> cuối cùng bạn thêm các liên kết của JQuery CDN. Kế đến là các tệp JavaScript nguyên thủy script.js
Lưu ý: Nếu bạn tải bản sao chép cục bộ của jQuery, lưu nó trong thư mục js/ và liên kết với nó tại js/jquery.min.js.
Để các tệp JavaScript mà bạn đính kèm hoạt động, nó phải nằm trong thư viện của jQuery.
Tại đây, bạn có toàn quyền truy cập vào jQuery API do thư viện jQuery đã được tích hợp vào trang web của bạn.
Lưu ý: Application Programming Interface (API) là phần mềm hỗ trợ tương tác giữa client và server. Trong trường hợp này, API của jQuery bao gồm toàn bộ thông tin và tài liệu cần thiết để truy cập vào jQuery.
Về cơ bản, jQuery dùng để để kết nối với các phần tử HTML trong trình duyệt thông qua DOM.
DOM (Document Object Model) là phương thức mà JavaScript (và jQuery) dùng để tương tác với HTML trong trình duyệt. Bạn có thể thấy DOM bằng cách, tại trình duyệt web bạn nhấp phải chuột và chọn Inspect. Lúc này Developer Tools sẽ mở ra và các mã code HTML mà bạn nhìn thấy chính là DOM.
DOM chứa các node HTML – một đối tượng mà JavaScript có thể thao tác. Các đối tượng này được sắp xếp theo cấu trúc dạng cây, với <html> gần thành phần gốc hơn và những yếu tố lồng nhau là một nhánh xa hơn dọc theo cây. JavaScript có thể thêm, xóa bỏ hoặc thay đổi bất kỳ yếu tố nào.
Cũng tại trang web, bạn nhấp chuột phải và chọn View Page Source, lúc này bạn sẽ thấy đầu ra thô HTML của trang web. Có thể bạn sẽ nhầm lẫn giữa DOM và nguồn HTML, tuy nhiên nên nhớ rằng chúng là khác nhau. Đối với nguồn HTML, nó hoạt động cố định và không bị tác động bởi Javascript, trong khi DOM sẽ hoạt động linh hoạt hơn và dễ thay đổi hơn.
DOM được bao bọc bởi toàn bộ node HTML cho lớp ngoài cùng, nó được xem là đối tượng tài liệu. Để bắt đầu thao tác với JQuery, bạn cần chắc chắn rằng cái tài liệu đã được chuẩn bị sẵn sàng.
Bạn cần tạo một file scripts.js trong thư mục js/, và gõ dòng code sau đây:
Tất cả mã jQuery bạn viết sẽ được bao bọc bởi mã phía trên. khi DOM đã ở trạng thái sẵn sàng, nó sẽ phát tín hiệu cho jQuery để có mã trong hàm đồng thời thực thi JavaScript. Trong một số trường hợp, JavaScript sẽ không tải cho đến khi các phần tử được thực hiện.
Như ở phần giới thiệu, bạn đã thấy một bản thảo đơn giản “Hello, World!”, để có thể bắt đầu thực hiện tập lệnh và hiển thị văn bản ở trình duyệt. Đầu tiên bạn cần tạo một phần tử đoạn khối trống với id là “demo”.
Để gọi một jQuery bạn sử dụng kí hiệu $. Để truy cập vào DOM với jQuery, hầu hết là sử dụng cú pháp CSS đồng thời áp dụng hành động với một phương thức, sau đây là ví dụ về format của một JQuery cơ bản:
Kí hiệu # dùng để gọi một id, chúng ta sẽ truy cập id demo bằng selector #demo. html(), nó là một phương pháp thay đổi HTML trong một phần tử.
Bây giờ chúng ta sẽ đặt chương trình “Hello, World!” bên trong jQuery ready(). Thêm dòng này vào file scripts.js của bạn, hàm lúc này sẽ có format như sau:
Sau khi lưu file, bạn có thể mở file index.html trong trình duyệt. Nếu cú pháp và các dòng lệnh của bạn đã thực thi chính xác, trình duyệt sẽ hiển thị “Hello, World!”.
Nếu trước đó bạn vẫn chưa hiểu rõ về DOM, thì bây giờ bạn có thể thấy nó hoạt động bằng cách nhấp chuột phải vào văn bản “Hello, World!” ở trình duyệt, sau đó chọn Inspect Element, Lúc này DOM sẽ hiển thị như sau: <p id=”demo”>Hello, World!</p>. Nếu bạn chọn View Page Source, DOM sẽ hiển thị ở dạng: <p id=”demo”></p> , bản này là bản raw HTML mà trước đó bạn viết.
Selectors đưa tín hiệu cho jQuery biết những thành phần mà chúng ta muốn làm việc. Hầu hết các Selector của jQuery đều tương tự như cách bạn đã làm việc với CSS, cùng với một số thành phần bổ sung dành riêng cho JQuery. Toàn bộ thông tin về Selectors của jQuery đều có trên các trang tài liệu chính thức.
Để truy cập một bộ chọn, hãy sử dụng biểu tượng jQuery $, theo sau là dấu ngoặc đơn () như format dưới đây:
Bạn nên sử dụng dấu ngoặc kép (“) do nó theo style guide của jQuery nên được ưu tiên hơn. Nhưng bạn cũng có thể sử dụng dấu nháy đơn (‘) vì nó phổ biến.
Dưới đây là một số selectors được sử dụng phổ biến nhất:
$("*")
$(this)
$("p")
$(".example")
$("#example")
$("[type='text']")
$("p:first-of-type")
Trong một trang web, bạn thường thấy nhiều nhất là các classes và id. Trong đó, classes dùng để chọn nhiều phần tử còn id dùng để chọn một phần tử.
Tại ví dụ “Hello, World!”, do tài liệu đã sẵn sàng nên mã code sẽ được chạy và hiển thị ngay mà không cần tương tác người dùng, do đó không cần sử dụng đến jQuery mà chỉ cần một văn bản HTML. Tuy nhiên, trong trường hợp bạn muốn nó xuất hiện chỉ khi có tương tác người dùng thì bạn phải cần đến JQuery.
Bắt đầu lại với file index.html, bạn thêm phần tử <button> để tạo thao tác click trên button.
Để có thể click button, bạn dùng cú pháp click () để gọi hàm chứa mã “Hello, World!”
Phần tử <button> của bạn có một id gọi là trigger, nó được bạn chọn bằng selector $(“#trigger”). Khi thêm cú pháp click(), bạn đã gán cho button thao tác hoạt động khi được click vào. Tuy nhiên, việc này vẫn chưa hoàn thành, bạn cần thêm một hàm chứa mã cho cú pháp click(). Nó có format như bên dưới.Cuối cùng là đoạn mã như sau:
Sau khi đã hoàn tất các bước trên, bạn lưu file script.js và tiếp tục làm mới file index.html để nó hiển thị giao diện mới trên trình duyệt. Lúc này, sẽ xuất hiện thêm button, chữ “Hello, World!” sẽ xuất hiện khi bạn click vào button đó.
Event nghĩa thuần Việt là sự kiện, là bất kỳ hoạt động nào mà bạn tương tác trên trình duyệt bằng chuột, bàn phím, màn hình cảm ứng hay bất kỳ thiết bị vật lý nào.
Dưới đây là liệt kê một số các phương thức event phổ biến của jQuery. Nếu muốn tìm hiểu hết phương thức của jQuery bạn có thể tìm hiểu tại trang web chính thức của nó:
click()
hover()
mouseenter()
mouseleave()
submit()
scroll()
keydown()
Ngoài ra, để làm cho hình ảnh động hoặc mờ dần khi người dùng cuộn màn hình xuống, hãy sử dụng cú pháp scroll(). Để thoát menu bằng phím ESC, hãy sử dụng cú pháp keydown(). Để tạo một menu dropdown accordion, hãy sử dụng cú pháp click().
Để tạo nội dung cho trang web được sinh động và thu hút thì việc hiểu và biết sử dụng các sử kiện là điều được ưu tiên và cần thiết.
Nhờ vào các hiệu ứng mà jQuery cung cấp cùng với các event, bạn có thể thoải mái thêm thắt các ảnh động hay xử lý các phần tử trên trang.
Lấy ví dụ về việc đóng mở một popup overlay. Nếu như trước đó bạn cần sử dụng hai id, một cái dùng để đóng, một cái dùng để mở popup overlay. Thì bây giờ bạn có thể sử dụng một class chứa cả chức năng đóng và mở popup overlay.
Để thực hiện việc trên bạn cần làm theo hướng dẫn sau:
Đầu tiên, bạn xóa hai tag hiện có là <button> và <p> ở phần thân của file index.html. Sau đó thêm các phần như bên dưới vào file HTML của bạn:
Tiếp đến, bạn dùng CSS để ẩn overlay trong file style.css bằng cú pháp display: none đồng thời cho nó căn giữa màn hình.
Cũng tại file script.js, bạn thêm cú pháp toggle() để chuyển đổi giữa display: none và display: block để thực hiện tính năng ẩn hiển overlay khi click vào.
Cuối cùng bạn khởi động lại index.html để xem khả khả năng hiển thị chuyển đổi của khi click vào button. Ngoài ra, bạn còn có thể tham khảo một số hiệu ứng khác bằng cách thay đổi toggle() thành fadeToggle() hoặc slideToggle().
Một số hiệu ứng đang được sử dụng phổ biến nhất hiện nay bao gồm:
toggle()
fadeToggle()
slideToggle()
animate()
Bằng jQuery, bạn có thể nhận biết được tương tác người dùng thông qua việc nhấn vào các button. Đồng thời dùng các hiệu ứng mà jQuery cung cấp để thêm các phần tử mỗi khi thao tác với button.
Theo dữ liệu đánh giá từ các chuyên gia, jQuery sở hữu những thế mạnh về ưu điểm nổi bật như:
Mặc dù JQuery là một thư viện ấn tượng về số lượng, tùy thuộc vào mức độ tùy chỉnh yêu cầu trên trang web của bạn. Tuy nhiên, vẫn có nhiều chức năng có thể bị hạn chế, do đó việc sử dụng JavaScript thuần để xây dựng chức năng này.
Client không chỉ để hiển thị mà còn phải xử lý nhiều chức năng được tạo thành từ jQuery. Nếu jQuery bị lạm dụng quá nhiều sẽ làm cho client trở nên chậm chạp, đặc biệt là những client yếu. Vì thế, các lập trình viên cần phải dùng thêm cache.
Có rất nhiều khuôn khổ JavaScript khác nhau trên đó, nhưng có vẻ jQuery là thịnh hành phổ biến nhất, và cũng có thể mở rộng được nhiều nhất. Nhiều công lớn danh tiếng trên web đang sử dụng jQuery, điển hình như:
Các nhà phát triển tìm jQuery trực quan và dễ học – thư viện này được xây dựng dựa trên cấu trúc mã ngắn hơn, nhìn chung đơn giản hơn. Với tiêu chuẩn mã hoá mở và cú pháp đơn giản hơn, các nhà phát triển có thể tiết kiệm được thời gian để triển khai ứng dụng hoặc website.
Ngoài ra, thực chất các nhà phát triển không phải là chuyên gia về lập trình hoặc thiết kế web để tạo ra được phong cách hoàn mỹ cho các trang web của họ. Bất kỳ nhà phát triển nào đã dành hàng giờ để viết mã và thử nghiệm các tệp CSS hẳn sẽ đánh giá cao việc thực hiện đơn giản mà jQuery mang đến cho bảng. Bên cạnh đó, còn có một bộ bao gồm các thành phần jQuery UI mạnh mẽ mà các nhà phát triển có thể cắm vào các trang web của họ.
Tham khảo thêm bài viết: UI/UX là gì? Áp dụng công nghệ thiết kế UI/UX cho website
Nếu Adobe Flash không được cài đặt trên trình duyệt nào, một số phần nhất định của page có thể sẽ hiển thị không chính xác trong trường hợp chúng hiển thị hoàn toàn. Điều này ắt hẳn sẽ gây ra khó chịu cho người dùng. Nó buộc các nhà phát triển phải dành thêm thời gian nghiên cứu mã cho các trình duyệt thiếu Flash plugin, giúp gia tăng thêm thời gian phát triển.
Nhưng với jQuery thì lại khác, thao tác DOM HTML đã trở thành phương thức được chấp nhận sử dụng rộng rãi nhất trong việc vận hành trang web. Vì vậy nội dung vẫn sẽ hiển thị ngay cả khi bạn đã tắt JavaScript trong trình duyệt. Vì HTML DOM luôn hiện diện, bạn cũng không cần lo lắng về cài đặt trình duyệt nữa.Ngoài ra, việc phát triển Jquery giúp làm hạn chế các trường hợp của bảng trợ giúp.
Nuget là dạng phần mở rộng của Visual Studio, nó giúp dễ dàng thêm, xoá, và update các thư viện và công cụ trong tất cả dự án Visual Studio sử dụng Net Framework. Nuget đã tồn tại khoảng năm, và đó là nguồn đáng tin cậy cho các nhà phát triển để trao đổi và phát triển các gói Microsoft Visual Studio.
Visual Studio 2010 tích hợp với thư việc của jQuery qua hộp thoại Manage NuGet Packages. Điều này kích hoạt chức năng Intellisense của Visual Studio, cho phép các nhà phát triển tức khắc có thể truy cập vào các phương pháp Jquery với cú pháp mà không cần thiết phải để lại chế độ mã để thực hiện nghiên cứu. Không có công cụ nào lý tưởng hơn để làm việc trong môi trường .NET của Microsoft.
Đa phần các nhà phát triển .NET đều sử dụng Visual Studio và đã quen thuộc với Nuget. Đây cũng là lý do vì sao jQuery phổ biến và ngày một tiếp tục phát triển cùng với các nhà phát triển .NET. Với việp cập nhật bổ sung vấn đề di động jQuery cho Windows, bây giờ bạn đã có thể có toàn bộ các lợi ích của thư viện jQuery sẵn có trên nền tảng Windows Phone.
Theo nhận định có thể thấy, Microsoft nghiêm túc về HTML5, trong đó bao gồm rất nhiều yếu tố jQuery, bằng cách thúc đẩy việc sử dụng jQuery mà phần đông HTML5 đã thông qua. Microsoft khuyến khích, ủng hộ trong việc sử dụng jQuery, không chỉ riêng trong mảng phát triển điện thoại di động mà còn trong ứng dụng giao diện người dùng Metro theo kiểu mới.
Như vậy, qua bài viết trên chúng ta đã phần nào hiểu được jQuery là gì và tại sao chúng cần phải sử dụng nó, nhất là đối với Thiết kế website.
jQuery là một thư viện nhanh, “nhỏ mà có võ”, giàu tính năng, giúp đơn giản hoá client-side scripting của HTML. Việc tương tác với HTML phải sử dụng JavaScript đã từng là một công việc khá vất vả, khó khăn, khi đòi hỏi phải có những đoạn code dài, rắc rối và rườm rà. Nhờ có sự ra đời của Jquery mà việc tương tác trở nên dễ dàng hơn rất nhiều, và có thể rút ngắn được thời gian.
Nhìn chung, jQuery đã đáp ứng được nhu cầu của lập trình là hạn chế việc lập trình nhiều, nhưng vẫn đảm bảo đạt được các yêu cầu. Hy vọng qua bài viết này có thể giúp bạn sử dụng jQuery thành công.