Trung Tâm Đào Tạo Các Ngành Nghề Kỹ Thuật Cao

Khoa CNTT - Trường TCN KTCN Hùng Vương - 161 Nguyễn Chí Thanh - P12 - Q5 - TpHCM


  • Khóa học thiết kế ...

    Khóa học thiết kế website chuyên nghiệp
  • Thương mại điện tử - ...

    Thương mại điện tử  - Các hình thức thanh toán điện tử
  • Phi tin bất phú

    Phi tin bất phú
  • Khóa học Thiết kế và Lập ...

    Khóa học Thiết kế và Lập trình website - WorldSkills
  • Khóa học Lập trình ...

    Khóa học Lập trình website chuyên sâu
  • E-Learning - Hệ thống ...

    E-Learning - Hệ thống học trực tuyến thế kỷ 21
  • Kiếm tiền online từ ...

    Kiếm tiền online từ Google, Youtube, Adsense
  • Chiến lược SEO hiệu quả

    Chiến lược SEO hiệu quả
  • Khóa học - Lập trình ...

    Khóa học - Lập trình Android chuyên sâu
  • Khóa học SEO - Khai thác ...

    Khóa học SEO - Khai thác tài nguyên INTERNET
  • Khóa học Thương mại điện ...

    Khóa học Thương mại điện tử
Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: Lập trình jQuery căn bản

Lập trình jQuery căn bản 2 years 9 months ago #2443

  • vupham
  • vupham's Avatar
  • OFFLINE
  • Junior Boarder
  • Posts: 32
  • Thank you received: 1
  • Karma: 0
jquery chắc các bạn cũng đã nghe nhiều về nó, nhất là trong việc làm các hiệu ứng đẹp trên website. Vậy chính xác nó là cái gì? Hy vọng đọc xong bài này bạn sẽ hiểu ra được phần nào. Trước hết, để hiểu rõ tốt bài này bạn cần có kiến thức Javascript căn bản.

Trước hết, jquery là một thư viện của javascript nên nó cũng là một file js thông thường, do đó trước khi làm việc với mọi thứ, hãy nhúng thư viện jquery lên website của mình. Có 2 cách để làm việc này:

Cách 1 – Chèn file jquery trực tiếp từ host

Cách này là bạn tự host bằng cách vào trang jquery.com tải file mới nhất về và load file này mỗi lần sử dụng jquery.

<script type=”text/javascript” src=”path/…./jquery-latest.js”></script>

Cách 2 – Chèn file jquery từ CDN của Google

Cách này thay vì bạn upload plugin jquery lên host thì bạn chỉ cần việc nhúng thẻ chèn jquery từ file jquery có sẵn trên máy chủ CDN của Google. Ưu điểm cách này là tiết kiệm băng thông.

<script type=”text/javascript” src=”code.jquery.com/jquery-2.0.3.min.js”></script>

Tuy nhiên nếu bạn đang thực hành code trên localhost thì nên sử dụng cách 1 để tránh trường hợp máy chúng ta không có kết nối mạng mà web vẫn có thể hoạt động được.

Tài liệu học jquery

Trong bài này mình không thể nào dạy hết cho các bạn jquery từ A tới Z được nên cách tốt nhất là bạn nên tự học, bài này chỉ mang tính chất giới thiệu và giúp bạn làm quen với jquery mà thôi. Dưới đây là những nguồn học jquery miễn phí tốt nhất, dĩ nhiên là yêu cầu bạn có kiến thức Javascript căn bản.

Mình nghĩ với những nguồn đó bạn có thể thành “master” jquery rồi đó. Hãy nhớ rằng jquery rất dễ học nên bạn không cần quá lo lắng về nó.

Cách viết đoạn jquery đầu tiên

Để bắt đầu minh sẽ chuẩn bị một ví dụ minh họa dưới đây.

Chuẩn bị 1 tài liệu HTML mẫu như sau:

<html>
<head>
<title>jquery cho newbie</title>
<script type=”text/javascript” src=”path/…/jquery-latest.js”></script>
</head>
<body>
<button id=”button” href=”#”>click me</button>
<p class=”para”>Chào các bạn, jquery học thật dễ đúng không?</p>
</body>
</html>

Kế tiếp mình sẽ chèn thêm đoạn jquery này vào tài liệu HTML trên, chèn trong cặp thẻ <head> nhé.

<script type=”text/javascript”>
$(document).ready(function(handler ) {
$(“#button”).click(function(handler) {
$(“p”).fadeOut();
});
});
</script>

Kết quả của đoạn mã trên là khi bạn click vào button “click me” thì đoạn văn bản ở sau nó sẽ bị mờ dần và ẩn đi.

Các sự kiện như click, blur, focus…. Cũng như những hiệu ứng fadeOut, hide, fadeIn,… các bạn sẽ được tiếp xúc nhiều khi làm việc với jquery và không nên bận tâm nhiều về nó bây giờ.

Đầu tiên, thao tác cơ bản nhất của jquery là chọn một một phần tử trong cấu trúc DOM (Document Object Model) của tài liệu html. Bạn làm điều đó bằng cách sử dụng hàm $( ) (hoặc hàm jquery( ) ). Hàm $( ) là một jquery Object, trong cặp ( ) là một chuỗi tham số, có thể là CSS Selector.

Ở ví dụ trên chính là $(document), $(“#button”), $(“p”). Rõ ràng bạn có thể hướng tới các thành phần trong tài liệu html một cách thật dễ dàng bằng cách tận dụng kiến thức về CSS vì các jquery Selector có cùng cấu trúc và cú pháp như CSS Selector. Và bằng cách đó bạn hoàn toàn có thể định dạng và thay đổi giao diện của một trang web giống như cách mà CSS đã làm và yên tâm rằng nó hiển thị tôt trên tất cả các trình duyệt. Đây cũng là một ưu điểm của jquery so với CSS.

Hàm fadeOut() trong ví dụ trên tạo hiệu ứng ẩn mờ dần cho thành phần được chọn. Chi tiết về những hàm tạo hiệu ứng cũng như những hàm khác các bạn có thể xem đầy đủ tại trang chủ của nó api.jquery.com/ và tra cứu khi cần.

Một điều chú ý nữa đó là hàm $(document ).ready() ở trên. Hàm này đảm bảo cho tất cả mã jquery đặt trong nó được thực thi sau khi toàn bộ tài liệu html được load xong. Và thường thì chúng ta vẫn làm như vậy.

Lời kết

Nếu như bạn nào đã biết về javascript có thể dễ dàng nhận ra rằng bộ mã của jquery đơn giản và dễ sử dụng hơn Javascript rất nhiều. Điều này làm giảm thời gian cũng như công sức của lập trình viên một cách đáng kể. Và đó cũng chính là 1 lý do khiến jquery trở thành một trong những thư viện của javascript được yêu thích nhất.

Các từ khóa có liên quan: thiet ke website, lap trinh css, lap trinh html, lap trinh website, thiet ke web bang joomla, lap trinh PHP, HTML la gi, thiet ke layout web, thiet ke web bang wordpress, lap trinh jquery

Các bài viết có liên quan:
Những điều cần để thiết kế website
Thiết kế website đơn giản
Thiết kế website trên thiết bị di động
Làm quen CSS
lập trình web với CSS
Lập trình CSS là gì ?
Lập trình HTML cơ bản
Ngôn ngữ lập trình HTML
Khái niệm về lập trình website
Lập trình & Thiết kế web khác nhau như thế nào
Thiết kế website bằng Joomla - Front và Back End
Thiết kế website bằng với Joomla - Quản lý Mail
Thiết kế website bằng Joomla - CSS cơ bản
Học lập trình php
10 mẹo nhỏ khi học lập trình php
Cú pháp cơ bản trong lập trình php
HTML
HTML là gì
Những điều cần biết khi thiết kế layout web
Quy trình thiết kế layout website
Thiết kế website bằng wordpress
10 lý do nên thiết kế website bằng WordPress
Các loại website được thiết kế bằng WordPress
Lập trình jquery là gì?
Các chức năng chính trong lập trình jquery
Last Edit: 2 years 8 months ago by vupham.
The administrator has disabled public write access.
  • Page:
  • 1
Moderators: admin
Time to create page: 0.247 seconds

Tin kiếm Google

Website Trường Dạy Nghề.NET là nơi qui tụ 1 đội ngũ các chuyên gia bao gồm các giảng viên chuyên ngành về các lĩnh vực như Công nghệ thông tin, Điện tử, Cơ khí, Ô tô, Điện, Cơ Điện Tử, Điện Lạnh....đang công tác giảng dạy và nghiên cứu tại trường Hungvuongtech địa chỉ 161-165 Nguyễn Chí Thanh, P12, Q5 TpHCM. Hungvuongtech là trường đao tạo các ngành nghề kỹ thuật cao, là 1 trong 45 trường trọng điểm quốc gia.