JQuery và kiến thức cơ bản
Đăng bởi Dương Quốc Hưng vào Ngày 09 Tháng 06 Năm 2014
Bài viết này sẽ là nền tảng căn bản từ đầu cho các bạn mới làm quen với JQuery, từ việc cài đặt cho tới đoạn mã đầu tiên.
Để học tốt JQuery, bắt buộc chúng ta phải biết cơ bản HTML và CSS. Nếu bạn chưa từng biết đến 2 ngôn ngữ trên, bạn phải tìm hiểu về chúng trước
khi đọc tiếp bài viết này.

Chúng ta sẽ từng bước từng bước làm quen với JQuery qua từng bài viết được cập nhật tại http://dqhung.dqh.vn.

Bài học đầu tiên:
JQuery là một framework của Javascripts, nên ta muốn sử dụng nó cũng phải nhúng nó lên Website của mình như một file Javascripts thông thường (có đuôi .js)
Bạn có thể nhúng bằng cách tải bản JQuery mới nhất tại đây. Sau đó nhúng nó vào site của mình (bạn có thể nhúng nó vào thẻ Head hoặc ở phía dưới cùng trang web tùy bạn):

[code] <script type="text/javascript" src="đường dẫn tệp jquery.js"></script>[/code]
Hoặc bạn có thể nhúng link từ trang JQuery:

[code]<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>[/code]
Kế đến, bạn cần một đoạn code HTML để thực hiện bài học đầu tiên của mình:

[code]<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
    </head>
    <body>
        <div id="change">Bấm vào đây để thay đỗi Username</div>
        <div class="username">Tên của tôi</div>
    </body>
</html>[/code]
Để viết code JQuery (hoặc Javascripts) thì ta phải viết code trong thẻ <Script>. VD:

[code]<script type="text/javascript">
CODE HERE
</script>[/code]
Và đây là đoạn code JQuery thực hiện công việc: Click chuột vào div có id là change sẽ thay đỗi nội dung của div có class username là "Dương Quốc Hưng

[code]<script type="text/javascript">
            $( document ).ready(function(){ // Khi mọi thứ đã sẳn sàng
                $( "#change" ).click(function( event ) { // Khi click chuột vào element có id = change
                    $('.username').html("Dương Quốc Hưng"); //Thay đỗi nội dung HTML của các element có class = username
                });
            });
</script>[/code]
Bạn có thể đặt đoạn code trên vào thẻ Head hoặc phía dưới cùng, sau thẻ body (nếu đặt sau thẻ body thì mình không cần hàm $( document ).ready vì chắc chắn nó sẽ được load sau cùng.
Đây là đoạn code hoàn chỉnh, bạn có thể chép về thành file html để chạy thử trên trình duyệt của mình:

[code]<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <script type="text/javascript">
            $( document ).ready(function(){
                $( "#change" ).click(function( event ) {
                    $('.username').html("Dương Quốc Hưng");
                });
            });
        </script>
    </head>
    <body>
        <div id="change">Bấm vào đây để thay đỗi Username</div>
        <div class="username">Tên của tôi</div>
    </body>
</html>[/code]
DEMO HERE

- Notes:
Khi bạn muốn điều khiển một thẻ nào đó trong một đoạn văn bản, bạn có thể đặt ID cho thẻ đó, và khi cần dùng JQuery thì chỉ cần gọi $('# + ID mà mình đặt').
VD:
$("#note") : tức là bạn đang điều khiển thẻ có id = note (VD: <a href="..." id="note">...</a>).
Chú ý: khi  đặt ID cho thẻ, JQuery sẽ chỉ tìm duy nhất thẻ đầu tiên có id khớp với nó. Nếu ta có 4 thẻ đều có id là note, thì $("#note") chỉ là thẻ đầu tiên có id = note.
Vì vậy, đặt ID cho thẻ là duy nhất, không trùng !

Nếu bạn muốn JQuery tác động đến nhiều thẻ, VD:

[code]<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <script type="text/javascript">
            $( document ).ready(function(){
                $( "#change" ).click(function( event ) {
                    $('.username').html("Dương Quốc Hưng");
                });
            });
        </script>
    </head>
    <body>
        <div id="change">Bấm vào đây để thay đỗi Username</div>
        <div class="username">Tên của tôi</div>
        <div class="username">ABC</div>
        <div class="username">CDE</div>
    </body>
</html>[/code]
Thì khi Click vào "Bấm vào đây để thay đỗi Username", lập tức 3 thẻ kia đều thay đỗi thành "Dương Quốc Hưng" !

DEMO HERE

- Kết:
Nếu bạn muốn nắm cán duy nhất 1 thẻ bằng Jquery: dùng ID (VD: <div id="only">)
Nếu bạn muốn nắm cán nhiều thẻ bằng JQuery: dùng class (VD: <div class="multi">)
5/5 0 Thích |
Views 1588 | Javascript, Jquery
Vui lòng đăng nhập để có thể bình luận... Đăng nhập (Bạn có thể đăng nhập bằng tài khoản Facebook hoặc Google+/Gmail)
Nhan Vu Trong
  Đăng vào lúc: 10:35 - 11/06/2014


Cần up thêm file demo để bài viết thêm giá trị :D
Dương Quốc Hưng
Administrator
Bài viết: 16
15 Bình Luận Mới Nhất

Cần up thêm file demo để bài viết thêm giá trị :D
Câu hỏi mới từ Hỏi Đáp Logo
HỎI MUA BÀI TAROT GIÁ ƯU ĐÃI
  Đăng vào lúc: 2015-04-20 09:42:09

1 | 0 | 117 - Tags: Google
Help . Chọn câu hỏi theo vòng lặp VB6
  Đăng vào lúc: 2015-03-19 13:39:50

1 | 0 | 146 - Tags: VB6
Tam Hoàng
Báo lỗi khi gọi Form.
  Đăng vào lúc: 2015-02-07 11:17:11

1 | 0 | 151 - Tags: VB6

1 | 0 | 172 - Tags: VB6
Click trong UniTreeView
  Đăng vào lúc: 2014-12-17 10:49:50

1 | 0 | 179 - Tags: VB6
Bình luận mới từ Hỏi Đáp Logo
HỎI MUA BÀI TAROT GIÁ ƯU ĐÃI
  Đăng vào lúc: 2015-04-20 09:42:09

1 | 0 | 117 - Tags: Google
Help . Chọn câu hỏi theo vòng lặp VB6
  Đăng vào lúc: 2015-03-19 13:39:50

1 | 0 | 146 - Tags: VB6
Tam Hoàng
Báo lỗi khi gọi Form.
  Đăng vào lúc: 2015-02-07 11:17:11

1 | 0 | 151 - Tags: VB6

1 | 0 | 172 - Tags: VB6
Click trong UniTreeView
  Đăng vào lúc: 2014-12-17 10:49:50

1 | 0 | 179 - Tags: VB6
hướng dẫn sử dụng Unicode Full Control 4.2
  Đăng vào lúc: 2014-11-04 11:39:27

1 | 0 | 275 - Tags: VB6
Trương Quang Hiếu
Unicode Full Control 4.2 có virus ?!
  Đăng vào lúc: 2014-10-14 21:50:21

3 | 1 | 262 - Tags: VB6
Trọng Thinh Vũ
Nâng cấp Unicode Control
  Đăng vào lúc: 2014-06-10 08:49:09

5 | 0 | 505 - Tags: VB6
Đóng gói chương trình bằng Install Shied 2009
  Đăng vào lúc: 2014-04-28 08:00:15

4 | 0 | 429 - Tags: VB6
lỗi object library not registred
  Đăng vào lúc: 2014-04-17 10:24:29

3 | 0 | 395 - Tags: VB6