[Jquery Căn bản] Hướng dẫn sử dụng jquery
Chào các bạn đây là bài viết thứ 2 của mình về Jquery . Ở bài trước mình đã giới thiệu với các bạn cơ bản về Jquery và tác dụng cũng như sự kì diệu của Jquery trong Lập trình Web.
Và hôm nay tại bài viết này các bạn sẽ được thỏa sức múa máy thể hiện và test xem jquery hoạt động thế nào và cách thức viết 1 function jquery ra sao.
Step 1: Chuẩn bị
- Vẫn là 1 trình editor căn bản . Hoặc nếu các bạn mới học để dễ dàng trong việc học tập các bạn có thể cài các phần mềm IED cao cấp hơn như Dreamweaver hoặc PhpDesign …
- 1 Chút kiến thức về javascript căn bản.
Step 2: Thực hành
Mình sẽ nhắc lại 1 chút kiến thức HTML nha :
Để load 1 file javascript vào tập tin HTML các bạn dùng lệnh sau
<script type=”text/javascript” src=”Link của file javascript”></script>
VD :
<script type="text/javascript" src="myfile.js"></script>
Đó là cách để chèn 1 file javascript vào tệp tin HTML. Các bạn sẽ đặt ra câu hỏi là : Bài viết này mình muốn giới thiệu về jquery cơ mà. Sao lại nói lan man vậy.
Các bạn yên tâm sẽ có phần chính ngay sau đây. Nhưng mà mình muốn trình bày qua các phần cơ bản trước để các bạn dễ hình dung và dễ học hơn.
Vậy làm sao để chèn được jquery vào trong tệp tin html.
Có rất nhiều cách để chèn jquery vào file html . Như các bạn đã biết jquery là 1 thư viện của javascript vậy nên hẳn sẽ có hẳn 1 trang support cho jquery.
Các bạn có thể vào đường link sau : http://code.jquery.com/jquery-1.11.1.js để download bộ jquery về. Ấn vào đường link và Crtl + A và copy toàn bộ text ở trên trình duyệt tạo 1 file với tên là jquery.js và dán phần vừa copy vào save file lại
Như vậy mình đã xong phần dowload jquery
Vậy chèn jquery vào tệp tin html như thế nào ?
Các đầu tiên : Chèn trực tiếp từ file js của project của bạn. Cụ thể như sau :
<script type="text/javascript" src="js/jquery.js"></script>
Trong đó js là thư mục cha của file jquery.js
Các bạn có thấy giống với cách chèn file javascript không nào . Cho nên phần mình nói ở trên sẽ không thừa đâu nhé.
Cách 2 : các bạn cũng có thể dùng cách sau nếu không muốn tốn chút băng thông nào khi các bạn upload project của mình lên host
Mã #1
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
Hoặc
Mã #2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Như các bạn thấy có 2 ông lớn cho chúng ta dùng file của họ đó là trang chủ của jquery và ông lớn mà ai cũng biết đó chính là Google. Nhưng đặc điểm ở đây là mỗi cách load file của các bạn lại có cách dùng khác nhau
Với mã #1 các bạn dùng như sau
<script type="text/javascript">
jQuery(document).ready(function(){
alert('Bài học jquery đầu tiên');
});
</script>
Với mã #2 các bạn dùng như sau
Về cơ bản 2 cách chỉ khác nhau giữa kí tự $ và jQuery. Đó là do các ông lớn của chúng ta muốn vậy chứ giờ biết sao giờ
Nếu các bạn dùng mã #1 mà vẫn muốn viết kí tự $ thay cho jQuery các bạn có thể dùng thủ thuật sau:
<script type="text/javascript">
jQuery(document).ready(function($){
alert('Bài học jquery đầu tiên');
// Mọi selector trong này mình có thể dùng được bằng kí tự $ VD : $('.class').val();
});
</script>
và ngược lại với mã #2
Các quy tắc đặt tên biến cũng như tính toán jquery cũng hoàn toàn giống với javascript vì cơ bản nó là thư viện của javascript nên nó sẽ thừa hưởng tất cả những gì từ bố mẹ của nó.
Vậy bây giờ các bạn có thể nghịch ngợm với jquery được rồi. Các bạn có thể dùng jquery thay vì javascript để làm một bài toán giải phương trình bậc 1, bậc 2 hay đơn giản là tính a+b cho đỡ nhàm chán và quen dần với jquery.
Ở bài sau mình sẽ nói về jquery selector để các bạn có thể bay cao, bay xa hơn với jquery.
Và cuối cùng , Chúc các bạn thành công !
Bài viết tương tự
![[jQuery Tutorials] - jQuery Event ( Xử lý sự kiện trong jquery )](http://tamanhquyen.com/wp-content/uploads/2015/05/jquery_event-300x198.jpg)
jQuery Tutorials06/05/2015
[jQuery Tutorials] –...
Chào các bạn mình cũng đã viết được một cơ số bài viết về Jquery . Qua số bài viết trước của mình các bạn có thể biết được phần nào và sử dụng được cơ bản về Jquery , hôm nay mình sẽ giới thiệu với các bạn 1 chủ đề cực quan trọng…
jQuery Tutorials01/05/2015
[Jquery Tutorial] –...
Nếu bạn đang tự học Jquery thì đây là một bài không thể thiếu trong series học Jquery của bạn . Vậy chúng ta hãy bắt đầu vào việc ngay nhé Việc đầu tiên việc tối quan trọng chúng ta cần tìm hiểu đó chính là khái niệm thuộc tình của Jquery là gì !…
jQuery Tutorials17/05/2014
[Jquery Tutorial] –...
Chào các bạn rất vui được gặp các bạn trong series Jquery Tutorial của mình. Như đã giới thiệu ở bài trước mình đã giải thích cho các bạn biết được jquery là gì và tại sao các bạn lại nên dùng nó và một phần mình đã nói cách cài đặt và sử dụng…
Đôi lời về tác giả
Tên đầy đủ của tôi là Tạ Mạnh Quyền , Bố mẹ cho tôi nhìn thấy mặt trời vào năm 1991. Với đam mê thiết kế web từ khi còn học cấp 3 tôi đã từ mày mò và khám phá những thứ liên quan đến website
Bài đăng
