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…

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s