Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Học jquery từ cơ bản đến nâng cao phần 1

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi vnfit.com, 25/2/15.

Lượt xem: 2,399

  1. vnfit.com Banned

    Học jquery từ cơ bản đến nâng cao phần 1

    Giới thiệu về jquery

    Học jquery dễ hay khó phụ thuộc vào kinh nghiệm của bạn về html, css, javascript. Về cơ bản để học được jquery mình mặc định các bạn đã biết basic về html, css, javascript. Điều quan trọng để học nhanh jquery nữa là bạn nên biết về khái niệm DOM trong html. Bạn có thể tìm kiếm từ khóa “DOM HTML” trên google hoặc có thể tham khảo bài viết trên w3school “JavaScript HTML DOM” đành phải chịu khó đọc nó vậy có thời gian mình sẽ viết khái quát và cơ bản cho các bạn chưa làm quen có thể dễ hiểu. Nói tóm lại là các bạn nên có kiến thức cơ bản những cái mình đã nêu trước đã nếu chưa có hãy đọc qua nó rồi chúng ta tiếp tục vào từng bài từng bài học jquery. Bạn không cần lo lắng dù chưa có những kiến thức cơ bản kia xong update dần dần theo thời gian. Okie giờ chúng ta vào chương trình.

    Gz6pivq.png

    Jquery đơn giản hiểu nó thế này trước viết mã javascript mệt quá họ nghĩ ra một cái thư viện giảm tải việc viết mã để xử lý. Về bản chất jquery chính là một thư viện của javascript. Vì thế các bạn có kiến thức về js rồi thì đừng có lo lắng mà coi đó là thế mạnh vì việc học jquery đơn giản chi là học thư viện của js thôi. Cũng giống như các bạn học CI, Yii, Cake php của php mà thôi.

    Jquery hoạt động như thế nào?
    JQuery: Cơ bản nhất
    đây là một demo cơ bản nhất về jquery giúp bạn có cái nhìn đầu tiên về jquery.

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Demo</title>
    </head>
    <body>
    <a href=" jquery.com"> jQuery</a>
    <script src=" jquery.js"></script>
    <script>
    // code jquery sẽ đặt trong này nhé
    $( document ).ready(function() {

    $( "a" ).click(function( event ) {
    alert( "As you can see, the link no longer took you to jquery.com" );
    event.preventDefault();
    });
    });
    </script>
    </body>
    </html>
    Bạn có thể download jquery về máy tại đây Downloading jQuery và đặt nó cùng thư mục cùng cấp với file html nhé.

    Chú ý: khi bạn download jQuery, tên file sẽ chứa đựng phiên bản, ví dụ: jquery-x.y.z.js. Bạn có thể thay đổi tên thành jquery.js hoặc bạn để nguyên vẫn không có vấn đề gì nhé quan trọng là bạn link đúng đường dẫn đến file là okie nhé.

    Hiểu về Document Ready
    Để chắc chắc code của bạn chạy sau khi trình duyệt tải về đầy đủ trang web, Nhiều chương trình javascript sử dụng hàm onload:

    window.onload = function() {
    alert( "welcome" );
    };
    Thật không may, Code của bạn không chạy đến khi tất cả mọi hình ảnh (images), và bao gồm cả banner được tải về đầy đủ dưới trình duyệt. Để có thể giải quyết vấn đề này jquery đã sử dụng “document is ready” để giải quyết vấn đề này:

    $( document ).ready(function() {
    // code của bạn đặt ở đây.
    });
    Ví dụ, trong sự kiện ready , Bạn có thể viết sự kiến click đến một link của thẻ <a>:

    $( document ).ready(function() {

    $( "a" ).click(function( event ) {
    alert( "As you can see, the link no longer took you to jquery.com" );
    event.preventDefault();
    });
    });
    Bạn chú ý từ nay về sau khi code jquery bạn nhớ đặt code của bạn trong sự kiện ready. Bạn có thể tham khảo ví dụ ngay đầu tiên của bài “ví dụ cơ bản về jquery”.

    Thêm và xóa HTML Class:
    Đầu tiên, thêm css vào trong cặp thẻ <head> của file html, giống như dưới:

    <style>
    a.test {
    font-weight: bold;
    }
    </style>
    Tiếp, thêm class bằng cách gọi script .addClass() :

    $( “a” ).addClass( “test” );

    Tất cả thẻ <a> bây giờ chữ đều chuyển sang chữ đậm ( bold ).

    $( “a” ).removeClass( “test” );

    Hiệu ứng
    Jquery cung cấp cho chúng ta những hiệu ứng ( effects ) giúp tạo cảm giác chậm lại. ví dụ bên dưới, Nếu bạn click vào thẻ <a> sẽ làm cho thẻ <div> của chúng tôi từ ẩn đi:

    $( "a" ).click(function( event ) {
    event.preventDefault();
    $( "div" ).hide( "slow" );
    });
    Gọi lại hàm (Callbacks function)
    Không giống như các ngôn ngữ khác, JavaScript có thể gọi lại một hàm khi một hàm khác thực hiện xong.

    Để sử dụng gọi lại hàm, Điều quan trọng là bạn phải xem khi nào thì hàm kết thúc và gọi lại một hàm khi hàm trước của bạn đã kết thúc.

    Gọi lại hàm không tham số (callback without parameter)
    Nếu bạn callback mà không có tham số (parameter) nó sẽ giống như bên dưới:

    $.get( “myhtmlpage.html”, myCallBack );

    Khi $.get() kết thúc việc tải về trang myhtmlpage.html, nó sẽ gọi hàm myCallBack().

    • Chú ý: Tham biến thức 2 trong $.get() chỉ đơn giản là tên hàm và không cần dấu ngoặc đơn đằng sau nhé.
    Gọi lại hàm có tham số (callback with parameter)
    Chú ý: khác với (callback without parameter) thì (callback with parameter) bạn sử dụng một function() {. Function này là một hàm vô danh nó chỉ thực hiện duy nhất một công việc là : gọi hàm myCallBack(), với 2 tham biếm param1 và param2.

    $.get( "myhtmlpage.html", function() {
    myCallBack( param1, param2 );
    });
    Khi $.get() tải thành công trang myhtmlpage.html, nó sẽ thực hiện hàm vô danh (function()), hàm này sẽ gọi myCallBack( param1, param2 ).

    Nguồn: vnfit.com/hoc-jquery-tu-co-ban-den-nang-cao-phan-1/

    ...
    Phạm Hữu Dưnoname_0 thích bài viết này.

Ủng hộ diễn đàn