Lập trình web tức là tìm và xài hay bạn đã đóng góp gì cho thế giới

Có vẻ như là mình cần cái gì, chỉ cần vô google, chịu khó lần mò các trang phía sau thể nào cũng tìm được hàng ngon. Ví dụ như em này:

http://davidwalsh.name/dw-content/jquery-chosen.php

Dự án vất vả code hết cái select box này đến autocomplete khác. Nhưng thực sự mình thấy em này đẹp lại ngon. Đủ xài mà không rườm rà. Mặc dù vẫn còn một số lỗi khi kết hợp với các UI khác của jQuery như Dialog chẳng hạn, nhưng ấn tượng bởi sự nuột nà, hợp lý nên vẫn chấm điểm 10.

Ngẫm lại lấy bọn “international” nó đóng góp cho cộng đồng nhiều quá thể. Mang lại cho lập trình viên khác sự sung sướng mà lại hoàn toàn miễn phí.

Xấu hổ thiệt. Nhưng tặc lưỡi chứ biết làm sao?!

Ma thuật với jQuery Deferred

Những ai đã từng làm việc với jQuery đặc biệt là với các hiệu ứng Animation hoặc Ajax với tính năng callback. Chắc hẳn bạn cũng đã từng điên cái đầu với những hiệu ứng kết hợp phức tạp, nối tiếp nhau… Nó làm cho mã nguồn trở nên rối như tơ vò. Mức độ phức tạp ngày một tăng khi bạn phải callback nhiều tầng nhiều lớp.

Ví dụ đơn giản là bạn muốn thực hiện 3 ajax call kế tiếp nhau, sử dụng kết quả của nhau. Bạn làm thế nào

$.ajax({…

success : function(){

$.ajax({…

success: function(){

$.ajax({…

success : function(){}

}

}

}

});

Bức tranh tương tự với các hiệu ứng animation của  jQuery.

Rất nhiều dư thừa trong đó. Và đặc biệt là rất khó phát triển, thay đổi … theo chiều sâu tính bằng số lượng của các ajax call bạn cần giải quyết.

Nhưng jQuery đã nhận ra điều đó và giải quyết nó từ jQuery 1.5

Với $.Deffered, bạn không phải lo lắng về những điều đó nữa.

function callAjax1(){

$.ajax({..});

}

function callAjax2(){

$.ajax({..});

}

function callAjax3(){

$.ajax({..});

}

$.when(callAjax1).then(callAjax2).then(callAjax3)

Bạn cũng có thể tự tạo defered cho các hiệu ứng như:

function getData(){

return $.get(‘/foo/’);

}

function showDiv(){

var dfd = $.Deferred();

$(‘#foo’).fadeIn( 1000, dfd.resolve );

return dfd.promise();

}

$.when( getData(), showDiv() )

.then(function( ajaxResult ){

console.log(‘The animation + AJAX request are both done!’);           // ‘ajaxResult’ is the server’s response

});

Có lẽ không cần phải nói thêm về tính hữu ích của nó. Tất cả đều có thể xem ở website của jQuery.

jQuery submit form với jQuery ajaxSubmit

<script type=”text/javascript”>
         $(‘#ratingForm’).submit(function() {
               $(this).ajaxSubmit();
                       return false;
                });
   </script>

Getting start with jQuery – bắt đầu với jQuery

Ai thích đọc thì đọc, chứ em học được từ nguồn này nè, đó là một slide rất hay về jQuery

http://www.slideshare.net/manugoel2003/extending-jquery?src=related_normal&rel=282750 (nguồn)

Trong lời giới thiệu về jQuery trên http://jquery.com bạn có thể thấy ngay dòng chữ  jQuery is designed to change the way that you write JavaScript. jQuery, ra đời với mục đích chuẩn hóa cách viết javascript của người phát triển. Quan trọng hơn cả đó là jQuery tương thích với tất cả các trình duyệt được sử dụng phổ biến.

Với những người đã có kinh nghiệm với DOM (mà không sử dụng jQuery), thì document.getElementById(‘SomeID’), document.getElementsByTagName(‘TagName’) có lẽ là những phát biểu nhỏ mà chẳng nhẹ. Tức là, chúng cơ bản với DOM cũng như kiểu integer trong ngôn ngữ Pascal vậy, chẳng có ứng dụng nào mà không sử dụng. Với jQuery, câu lệnh xác định các đối tượng kiểu như trên chuyển về dạng sau:

$(‘#SomeID’) ;

$(document).find(‘TagName’) ;

Nhưng jQuery, chắc chắn không chỉ là giản đơn như vậy…

To be continue…

Trên đây, ta đã thấy một chút gì đó khác biệt của cách script jQuery so với viết script js. Với những người thường xuyên sử dụng DOM, viết theo cách js có lẽ là một việc nhàm chán lắm (kinh nghiệm của tôi là như vậy), hết document nọ lại document kia, rồi fix các bug interval… loạn xạ ngầu… với cách viết script js thông thường, để làm được một slider “đèm đẹp” một chút quả thực là tốn kém (thời gian, suy nghĩ). Cũng trong khi đó, nếu sử dụng jQuery, các kịch bản cơ bản (trước hết là cơ bản cái đã) được thực hiện một cách nhẹ nhàng, rất nhẹ nhàng.

Hãy bắt đầu xem, có thể làm được gì với jQuery, hãy bắt đầu. Hãy thử tiếp cận jQuery theo cách này

Đơn giản, tôi muốn ẩn đối tượng có id là main_img thì phải làm thế nào…

…quá đơn giản

$(“#main_img”).fadeOut();// main_img có thể là một div, hay một a, hay một tag HTML bất kì, tất cả đều sẽ mờ dần và mất hẳn

$(“#main_img”).hide();// main_img của bạn tịt luôn (mất dạng luôn)

$(“#main_img”).hide(‘slow’);//main_img của bạn “khuất” dần dần một cách từ từ (chú ý khuất có khác với mờ một chút, nhưng kết quả cuối cùng thì như nhau cả thôi)

…..

và hãy cùng tìm hiểu thêm về jQuery

JQuery, tại sao lại gọi là jQuery ? (từ query trong tiếng anh có nghĩa là “truy vấn” hoặc yêu cầu đòi hỏi), vậy jQuery truy vấn cái gì ???

Chính là việc jQuery truy vấn các đối tượng nằm trong document HTML!!! Theo cách viết DOM là document.getElementById đó thôi

Vậy jQuery hơn hẳn ở điểm nào, đó chính là ở chỗ jQuery có thể “truy vấn” từng phần của văn bản, với sự hơn hẳn trong cách viết mã, thêm vào đó là các cách “truy vấn” phức tạp ngoài tầm … tưởng tượng của người chỉ viết DOM.

$(document).ready(function(){

//truy vấn lấy tất cả các thẻ <p>

$(“p”);

//truy vấnlấy tất cả các thẻ có id là some_id

$(“#some_id”);

//truy vấn lấy tất cả các thẻ có class là .some_class

$(“.some_class”);

//truy vấn lấy tất cả các thẻ <li> nằm trong thẻ <ul> có id là some_ul

$(“#some_ul > li”);

//truy vấn lấy các thẻ a có thuộc tính title

$(“a[@title]“);

//truy vấn lấy các phần tử a có thuộc tính href bắt đầu bằng mailto:

$(“a[@href^=mailto:]“);

//truy vấn lấy các phần tử a có tận cùng là .pdf

$(“a[@href$=.pdf]“);

//truy vấn lấy các phần tử a có liên quan đến samplesite.com

$(“a[@href*=samplesite.com]“);

//truy vấn tất cả các thẻ div có chứa phần tử  ol

$(“div[ol]“);

//truy vấn lấy phần tử div thứ 2 có thuộc tính class là testclass

$(“div.testclass:eq(0)”);

//hoặc theo cách

$(“div.testclass:nth-child(1)”);

//truy vấn các phần tử tr chẵn hoặc lẻ trong table

$(“tr:odd”); // hoặc $(“tr”).filter(“:odd”);

$(“tr:even”); // hoặc $(“tr”).filter(“:even”);

//truy vấn phần tử tr chẵn hoặc lẻ mà không tính phần tử th

$(“tr:not([th]):even”);

//truy vấn theo nội dung của innerHTML trong thẻ (ví dụ lấy các thẻ div có chứa nội dung datgs

$(‘div:contains(“datgs”)’);

});

Và jQuery còn hỗ trợ rất nhiều các phương án truy vấn đối tượng khác nữa…

…

jQuery events in use

Click Event

$("p").click(function () { 
      $(this).slideUp(); 
    });
    $("p").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });