karma
Nhóm Jquery

OUR TEAM

Nancy
Mary
Helen
Helen
Helen
Jquery's Document

JQUERY - LẬP TRÌNH MẠNG 1 - TIN HỌC QUẢN LÝ


Chào mừng mọi người tới website học tập của team Jquery.


Website được thực hiện trong khuôn khổ thực hành môn học Lập trình mạng 1 - Nghành Hệ Thống Thông Tin Kinh Doanh. Đây Là nơi lưu trữ những hướng dẫn giúp sinh viên ngành học tốt hơn môn học Lập trình mạng 1.


+ Nhóm bao gồm 5 thành viên:

  • Nguyễn Văn Hải - Nhóm trưởng
  • Phạm Thị Mỹ Tiên
  • Nguyễn Anh Tuấn
  • Lưu Thị Thùy Ngân
  • Nhã Phương

Slide nội dung


Cảm ơn các bạn đã ghé thăm website.

Jquery - Giới thiệu


JQuery là một thư viện đa trình duyệt của JavaScript, được phát hành vào tháng 1 năm 2006 tại BarCamp NYC bởi John Resig. Phiên bản hiện tại đang là verson 3.1.1

jQuery cung cấp các module xử lý:

  • Ajax - xử lý Ajax
  • Atributes - Xử lý các thuộc tính của đối tượng HTML
  • Effect - xử lý hiệu ứng
  • Event - xử lý sự kiện
  • Form - xử lý sự kiện liên quan tới form
  • DOM - xử lý Data Object Model
  • Selector - xử lý hoạt động các đối tượng HTML thông qua bộ chọn

giúp lập trình viên xây dựng những chức năng có sử dụng Javascript trở nên dễ dàng hơn. Đơn giản hơn như thế nào thì bài sau sẽ đề cập.


Hiện nay có khá nhiều các thử việc xử lý được phát triển từ javascript như: Lodash, prototype.js, MooTools, hoặc YUI. Tùy vào mục đích mà ta sử dụng các thư viện khác nhau. Nhìn chung, Jquery vẫn là một thư viện phổ biến nhất của javascript.


Trong khuôn khổ website này, chúng tôi không đề cập đến các thư viện khác mà tập trung vào thư viện Jquery. Nếu các bạn cần có thể đến phần cuối cùng để xem một số liên kết gợi ý về những thư viện đó cho các bạn tham khảo.


Tại sao Jquery lại phổ biến?

Để trả lời cho câu hỏi này chúng ta sẽ xem qua những ưu và nhược điểm của Jquery để thấy được vì sao nó lại phổ biến như vậy.

Ưu điểm:

  • Dễ sử dụng: Đây là lợi thế chính khi chúng ta sử dụng jquery, nó dễ dàng hơn so với nhiều thư viện javascript chuẩn khác bởi cú pháp đơn giản và bạn chỉ phải viết ít dòng lệnh để tạo ra các chức năng tương tự.
  • Là một thư viện lớn của javascript: Thực thi được nhiều chức năng hơn so với các thư viện jascript khác. Một số đã nên ở trên và còn nhiều hơn nữa. Bạn có thể vào API Jquery để tra cứu thêm.
  • Cộng đồng hỗ trợ mạnh mẽ: JQuery đang phát triển rất mạnh, có một cộng đồng dành thời gian của họ để phát triển các plugin của JQuery. Như vậy có hàng trăm plugin được viết trước đó có sẵn để tải về ngay lập tức để đẩy nhanh quá trình viết code của bạn.
  • Tài liệu hướng dẫn phong phú: Có hàng trăm ngàn tài liệu hướng dẫn sử dụng Jquery hiện đang được lưu hành trên internet. Jquery còn có một trang web hướng dẫn học nó và tra cứu các hàm.
  • Hỗ trợ ajax: JQuery cho phép bạn có thể phát triển các template Ajax một cách dễ dàng. Một chức năng điển hình trong đó là thực hiện cách hành động trên giao diện mà không đòi hỏi phải load lại trang web.

Nhược điểm:

  • Làm client trở nên chậm chạp: Việc lạm dụng Jquery để tạo ra nhiều hiệu ứng có thể làm cho client chậm chạm. Để sử lý vấn đề này các lập trình viên phải dùng đến cache.
  • Một số chức năng có thể chưa hỗ trợ: Như đã nói Jquery được xây dựng từ javascript thuần, do đó có thể ông tổ javascript chưa truyền hết lại những gì mình có cho Jquery, nên sẽ có một số chức năng mà jquerry chưa làm được.

Như vậy có thể thể, lợi ích dùng Jquery mang lại là rất lớn, hỗ trợ rất nhiều và rất tốt cho lập trình viên. Tuy còn một số hạn chế nhưng có thể khắc phục được. Trong tương lai, Jquery đang ngày càng phát triển hoàn thiện, cộng đồng đang ngày một lớn mạnh. Sẽ là một sai lầm nếu như bạn không tìm hiểu Jquery nếu như bạn là một lập trình viên web.

Jquery - Cài đặt và Sử dụng


Có hai cách cài đặt jquery:

  • Cài đặt nội bộ: Các bác lên trang chủ Jquery để tải về rồi sau đó sử dụng bằng cách như sau.
     <script type="text/javascript" src="….js/jquery-latest.js"></script>

    jquery-latest.js là file Jquery bạn tải về. Cách này khá tiện khi bạn làm trên localhost và máy bạn không cần có internet.

  • Nhúng trực tiếp file từ các nhà cung cấp:

    Các bạn có sử dụng file của Jquery.com hoặc qua các CDN như google và microsoft. Với CDN google bạn có thể tìm thấy các phiên bản sẵn có ở đây. Còn với CDN Microsoft bạn có thể tìm tại đây.

    Sau khi có file jquery rồi thì các bạn chèn vào website theo mẫu dưới đây.

     <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    Trong đó đường dẫn http://code.jquery.com/jquery-2.0.3.min.js là link jquery bạn tìm được. Rất đơn giản phải không nào.

Hướng dẫn sử dụng Jquery

Có hai cách viết một nội dung Jquery:

  • Viết nội dung jquery bên trong một $(document).ready(): Đoạn script bên trong sẽ chạy khi các đoạn code trong file html đã được load xong, không bao gồm các liên kết ngoài như image, iframe, file css, file script,...
    $(document).ready(function(){
    //Nội dung jquery viết ở đây...
    });
    //Có thể viết gọn lại như dưới đây
    $(function(){
    //Nội dung jquery viết ở đây...
    });
  • Viết nội dung jquery bên trong $(window).load(): Đoạn script bên trong sẽ chạy chạy khi toàn bộ trang web đã được load xong, bao gồm tất cả image, iframe, và cả các liên kết ngoài.
    $(window).load(function(){
    //Nội dung jquery viết ở đây...
    });

Ở các bài sau sẽ đưa ra các ví dụ cụ thể để bạn hiểu rõ hơn về cách hoạt động của Jquery

Jquery - Cú pháp


Cú pháp của jquery khá đơn giản. Nó được biểu diễn như sau:

 $(Bộ chọn).hành động()
  • $ : Là ký tự định nghĩa của Jquery. Nếu bạn sử dụng các thư việc khác của javascript mà có xung đột do ký tự $ này thì bạn có thể thay thế $() thành jQuery().

  • Bộ chọn: là Tag Name (ví dụ: p, div,..), tag id (ví dụ: #myid,..) hoặc là tag class (ví dụ: .myclass...), href, title, rel, src,...

  • hành động: là các hành động sẽ tác động lên các thành phần được xác định bởi bộ chọn. Ví dụ như: $('button').hide() - Chức năng ẩn thành phần;

Các xử lý thông dụng


   Như đã đề cập ở những phần trên, Jquery cung cấp cho chúng ta những module xử lý cực kỳ hiệu quả. Trong khuôn khổ bài viết này, chúng tôi sẽ nêu ra một số cách sử xử thường gặp, cung cấp những chỉ dẫn cơ bản để các bạn có thể hiểu và có thể sử dụng nó cho mục đích của mình.


Jquery Selector

   Hướng xử lý đầu tiên được đề cập đến là Jquery Selector. Như bạn đã biết, Jquery giúp xử lý và điều khiển các phần tử html. Như vậy để xác định đúng thẻ cần tác động thì bộ chọn (Selector) là một vũ khí hiệu quả. Và hầu như các xử lý của Jquery đều sử dụng cách này để thực hiện tác vụ điều khiển của mình.


   Như đã đề cập ở phần cú pháp, để chọn 1 bộ chọn chúng ta dùng ký hiệu dấu "$" hoặc chữ jQuery. Các selector có thể là thẻ html, id, class, href, title, rel, src, * (tất cả) hoặc phối hợp các thẻ, id, class với nhau. Một cách dễ hình dung selector trong jquery y hệt như selector trong CSS. Bạn nào đã từng học qua CSS thì sẽ thấy điều này rất dể hiểu

Ví dụ về một số Selector trong Jquery

 $('*') /* Chọn tất cả các phần tử trong tài liệu */
$('#myId') /* Chọn thẻ có định danh id là myId: id="myId" */
$('.myClass') /* Chọn tất cả các thẻ có định danh class là myClass: class="myClass" */
$('p') /* Chọn tất cả các thẻ p */
$('#container p') /* Chọn tất cả phần tử được so khớp bởi thẻ p mà là con của một phần tử có một id là container */
$('p:empty') /* Chọn tất cả phần tử được so khớp bởi thẻ p mà không có phần tử con */
$('p strong, .myclass') /* Chọn tất cả phần tử được so khớp bởi thẻ strong mà là con của một phần tử được so khớp bởi thẻ p cũng như tất cả các phần tử mà có một class là myclass. */

Trên đây là một số ví dụ về jquery selector. Còn rất nhiều mà bạn có thể tìm trong hướng dẫn selector của css đầy đủ hơn tại đây.


Một ví dụ về việc sử dụng selector.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		$("#test-hide").click(function(){ /* Id test-hide sẽ được chọn để gán phương thức click */
			$("#test-jquery-1").hide(); /* Id test-jquery-1 sẽ được chọn để gán phương thức ẩn đi */
		});
	});
</script>
<p id="test-jquery-1">Nếu click lên "Hide" button,Dòng này sẽ ẩn đi.</p>
<button id="test-hide">Hide</button>

Nếu click lên "Hide" button, Dòng này sẽ ẩn đi.

Xử lý sự kiện

Trong quá trình hoạt động, người dùng hoặc trang web sẽ có một số hoạt động có thể kể tới như:

  • Nhấp chuột
  • Tải trang web
  • Di chuyển chuột qua một phần tử
  • Đệ trình một HTML Form
  • Thao tác nhấn phím trên bàn phím
  • etc

Để xử lý các hoạt động đó, Jquery cung cấp cho chúng ta một số sự kiện sau:

  • blur: Xuất hiện khi phần tử mất trọng tâm
  • change: Xuất hiện khi phần tử thay đổi
  • click: Xuất hiện khi click chuột
  • dblclick: Kích hoạt khi nhấp đúp chuột
  • error: Xuất hiện khi có một lỗi trong quá trình tải
  • focus: Xuất hiện khi phần tử nhận trọng tâm
  • keydown: Xuất hiện khi phím được nhấn
  • keypress: Kích hoạt khi phím được nhấn và thả ra
  • keyup: Kích hoạt khi phím được thả ra
  • load: Xuất hiện khi tài liệu được tải
  • mousedown: Xuất hiện khi nút chuột được nhấn
  • mouseout: Kích hoạt khi con trỏ chuột di chuyển ra khỏi một phần tử
  • mouseover: Kích hoạt khi con trỏ chuột di chuyển qua một phần tử
  • mouseup: Xuất hiện khi một nút chuột được nhả ra
  • resize: Kích hoạt khi kích cỡ cửa sổ thay đổi
  • scroll: Kích hoạt khi cửa sổ được cuốn
  • select: Kích hoạt khi một text được chọn
  • submit: Kích hoạt khi một form được đệ trình
  • unload: Kích hoạt khi tài liệu không được tải
  • etc

Với mỗi sự kiện thì Jquery cung cấp một phương thức xử lý tương ứng. Chẳng hạn như click thì có click().. Chúng ta xem qua cú pháp của một phương thức xử lý sự kiện.

$("tagname").event(); /* event có thể là click, dbclick,... */

Việc tiếp theo là bạn phải xác định hành động gì sẽ được thực hiện sau khi sự kiện xảy ra. Do đó bạn phải thêm một phương thức vào cho sự kiện.

$("p").click(function(){
// hành động diễn ra ở đây
});

Thông thường, chúng ta thường sử dụng Jquery event trong đoạn

$(document).ready()

Nghĩa là khi trang đã load những thành phần html cơ bản

Ví dụ jquery event

$(document).ready(function(){ 
	$('.cuccuccuc').click(function(){ 
		alert("A haha hihi hehe huhu hiuhiu"); 
	});
}); 
<div class="cuccuccuc">Ahihi</div>
						 	 
							
Ahihi

Jquery effect - Hiệu ứng

Ở bài trước, các bạn đã biết khi một sự kiện được gọi bởi người dùng hoặc trình duyệt, thì jquery sẽ cung cấp một sự kiện xử lý tương ứng. Đồng thời sẽ có một hoạt động nào đó diễn ra, điều này phụ thuộc vào sự lựa chọn hành động thực thi của người dùng. Jquery cung cấp cho chúng ta một số phương thức hành động được định nghĩa sẵn. Dưới đây sẽ liệt kê ra một số phương thức hoạt động phổ biến:

  • animate(): Chạy một hiệu ứng tùy chỉnh trên các thành phần đã được chọn
  • fade(): Ẩn hiện một thành phần nhạt/đậm dần
  • slide(): Hiệu ứng chuyển động trượt cho thành phần
  • stop(): Dừng hiệu ứng chuyển động
  • hide/show: Ẩn hiện một thành phần
  • Ngoài ra còn rất nhiều được liệt kê tại đây bạn có thể vào tham khảo.

Một số ví dụ:

<script> 
$(document).ready(function(){
    $("button.ahihihi").click(function(){
        $(".cutohehe").animate({left: '250px'});
    });
});
</script> 
<button class="ahihihi">Start Animation</button>
<div class="cutohehe" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
	                      	 
							
	                      	<script>
$(document).ready(function(){    
	$("#hide-achuchu").click(function(){   
	 	$(".achuchu").hide(); });
    $("#show-achuchu").click(function(){  
    	$(".achuchu").show();});
});
</script>
<p class="achuchu">Click lên các button để xem hiệu ứng.</p>
<button id="hide-achuchu">Hide</button>
<button id="show-achuchu">Show</button>
	                      
	                      	

Click lên các button để xem hiệu ứng.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>#div1,#div2,#div3,#div4,#div5,#div6{float:left;width:80px;height:80px;display:none;}</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn();   	   $("#div2").fadeIn("slow");     $("#div3").fadeIn(3000);
        $("#div4").fadeIn(4000);     $("#div5").fadeIn(5000);        		  $("#div6").fadeIn(6000);
    });
});
</script>
<button>Click to fade in boxes</button><br><br>
<div id="div1" style="background-color:red;"></div>
<div id="div2" style="background-color:green;"></div>
<div id="div3" style="background-color:blue;"></div>
<div id="div4" style="background-color:yellow;"></div>
<div id="div5" style="background-color:orange;"></div>
<div id="div6" style="background-color:violet;"></div>
	                       	
							
							

Jquery DOM


DOM là viết tắt của chữ Document Object Model, dịch ra là mô hình các đối tượng trong tài liệu HTML. Trong mỗi thẻ HTML sẽ có những thuộc tính (Properties) và có phân cấp cha - con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector và trong DOM sẽ có nhiệm vụ xử lý các vấn đề như đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ.

Trong khuôn khổ những hướng dẫn này chúng tôi không đi sâu vào cấu trúc của DOM mà chỉ tập trung giới thiệu ở đối tượng Document thao tác với các thẻ html.

Việc xử lí tài liệu HTML rất phức tạp và đa dạng. Chúng ta có thể chia ra một số nhóm cơ bản bao gồm:

  • DOM document: có nhiệm vụ lưu trữ toàn bộ các thành phần trong tài liệu của website
  • DOM element: có nhiệm vụ truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML
  • DOM HTML: có nhiệm vụ thay đổi giá trị nội dung và giá trị thuộc tính của các thẻ HTML
  • DOM CSS: có nhiệm vụ thay đổi các định dạng CSS của thẻ HTML
  • DOM Event: có nhiệm vụ gán các sự kiện như onclick(), onload() vào các thẻ HTML
  • DOM Listener: có nhiệm vụ lắng nghe các sự kiện tác động lên thẻ HTML đó
  • DOM Navigation dùng để quản lý, thao tác với các thẻ HTML, thể hiện mối quan hệ cha - con của các thẻ HTML
  • DOM Node, Nodelist: có nhiệm vụ thao tác với HTML thông qua đối tượng (Object)

Bạn có thể thấy các xử lý như event, navigation, listener,..đã được mô tả ở những phần trước. Những xử lý này đơn giản nhưng rất hay được sử dụng trong xử lí. Còn khá nhiều vấn đề khác cần phải quan tâm để có thể nắm được hết kiến thức về Jquery.

Ở phần cuối cùng chúng tôi sẽ cung cấp thêm những tài liệu hướng dẫn học để các bạn có thể nghiên cứu nâng cao hơn.

Tổng kết


Như vậy bạn đã đi hết những hướng dẫn cơ bản ở website này. Trong khuôn khổ kiến thức và giới hạn yêu cầu. Chúng tôi xin kết thúc phần trình bày của mình ở đây. Những kiến thức cơ bản chúng tôi cung cấp chỉ giúp cho các bạn có cái nhìn tổng quan và biết cách sử dụng cơ bản một thư viện Jquery. Hiện nay trên internet có rất nhiều website hướng dẫn học Jquery cũng như các ngôn ngữ lập trình khác rất chi tiết và dể hiểu. Các bạn có thể tìm thêm trên google. Sau đây chúng tôi xin cung cấp một số địa chỉ học hay cho các bạn tham khảo.

  • Mozilla Firefox Network. : Đây là một website hướng dẫn rất chi tết các ngôn ngữ lập trình phía client
  • w3scholls: Đây là một địa chỉ không thể bỏ qua với các hướng dẫn dể hiểu và có ví dụ code minh họa sống động
  • Jquery.com : Không thể bỏ qua nhà cung cấp gói thư viện này. Trang web cung cấp các hướng dẫn học cũng như tra cứu thư thông tin cách sử dụng hàm.
  • Codeacademy: website cung cấp tính năng vừa học vừa hành giúp các bạn có thể hiểu và nhanh lên trình hơn.

Cảm ơn các bạn đã ghé thăm website. Kính chào và hẹn gặp lại.