Thứ Tư, 23 tháng 12, 2015

jQuery 2

12/23/2015 09:24:00 CH    No comments
Untitled Document

Bài 02: jQuery Attributes - addclass() - removeclass()

  0  


 Google +0  

   0
Đăng bởi: TheHalfHeart - Vào ngày: 17-08-2014 - Chuyên mục: jQuery - View: 5365
Bài trước chúng ta đã tìm hiểu được cách viết một chương trình jquery đầu tiên rồi, vạy thì trong bài này chúng ta sẽ tìm hiểu thêm một số hàm xử lý thuộc tính (attribute) của thẻ HTML trong jQuery. Nhưng trước khi vào nội dung chính tôi sẽ trình bày quy trình biên dịch của javascript đã nhé.

1. Quy trình biên dịch của javascript

Cũng như các ngôn ngữ lập trình khác như PHP, C# thì javascript sẽ biên dịch từ trên xuống dưới và từ trái qua phải. Tuy nhiên trong javascript có thêm một số đặc điểm hơi khác xíu, đó là sự kiện window.onload. Khi gặp những đoạn code nằm trong sự kiện này thì trình biên dịch sẽ bỏ qua và cho tới khi trang web load xong, và nó sẽ duyệt lại từ trên xuống dưới và thực thi những đoạn code bên trong nó.
Ví dụ: XEM DEMO


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <script language="javascript">
             
            alert('Đoạn thứ nhất');
             
            alert('Đoạn thứ hai');
             
            window.onload = function (){
                alert('Đoạn thứ ba');
            };
             
            alert('Đoạn thứ 4');
             
        </script>
    </body>
</html>

Bạn thấy rõ ràng trong ví dụ tôi đã code theo thứ tự các hàm alert từ 0 -> 4. Nhưng vì đoạn thứ 3 tôi đặt trong sự kiện window.onload nên nó sẽ được biên dịch sau cùng. 
Và một điều nữa tôi cũng xin nhắc với các bạn là nếu như những đoạn code bạn không đặt trong sự kiện onload của Javascript thì nếu như nó truy xuất đến một thẻ HTML nào đó thì thẻ HTML đó phải nằm bên trên những đoạn code Javascript đó.
Ví dụ: XEM DEMO:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div id="demo">
          Noi dung ben trong
        </div>
        <script language="javascript">
          // Nếu như ta đặt nội dung thẻ script này trên thẻ div thì sẽ xuất hiện lỗi, vì
          // theo quy trình thì nó biên dịch từ trên xuống và từ trái sang, nhưng lúc này
          // thẻ div lại nằm dưới nên nó ko tìm thấy thẻ div
            alert(document.getElementById('demo').innerHTML);
        </script>
    </body>
</html>

2. Sự kiện onload trong jquery

Với javascript thuần thì ta gọi là sự kiện window.onload như sau:


1
2
3

window.onload = function(){
    // Nội dung bên trong
};

Nhưng với jQuery thì ta sẽ gọi cách khác:


1
2
3

$(document).ready(function(){
    /*Nội dung bên trong*/
});

Rất đơn giản phải không nào, bây giờ bạn ví dụ dưới đây nhé:
XEM DEMO


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
    </head>
    <body>
        <script language="javascript">

            alert('Lần thứ nhất');
            alert('Lần thứ hai');
            $(document).ready(function(){
                alert('Lần thứ ba');
            });
            alert('Lần thứ bốn');

        </script>
    </body>
</html>

Chạy lên và kết quả cũng tương đương.

3. Hàm addClass() và removeClass() trong jQuery

Hàm này addClass() có tác dụng thêm class cho đối tượng Object HTML nào đó.
Hàm này removeClass() có tác dụng xóa class cho đối tượng Object HTML nào đó.
Ví dụ: XEM DEMO


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <style>
            .active{
                border: solid 1px;
                color:red;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <h1 style="font-style: initial">Xin chào các bạn</h1>
         
        <input type="button" id="addclass-button" value="$.addClass('active')" />
        <input type="button" id="removeclass-button" value="$.removeClass('active')" />
         
        <script language="javascript">
             
            // Sự kiện onload trong jquery
            $(document).ready(function()
            {
                // addClass
                $('#addclass-button').click(function(){
                    // Thêm class active vào thẻ h1
                    $('h1').addClass('active');
                });
                 
                // removeClass
                $('#removeclass-button').click(function(){
                    // Xóa class active ra khỏi thẻ h1
                    $('h1').removeClass('active');
                });
            });
             
        </script>
    </body>
</html>

4. Lời kết

Như vậy mình đã giới thiệu với bạn quy trình chạy của một ứng dụng Javascript. Bắt buộc bạn phải hiểu nguyên lý hoạt động này thì sau này bạn mới không mắc phải những lỗi không đáng có.
Mình cũng đã giới thiệu luôn hai hàm addClass() có tác dụng thêm một class vào đối tượng HTML nào đó và hàmremoveClass() có tác dụng xóa một class khỏi đối tượng HTML. Hy vọng qua bài này bạn sẽ có cảm hứng để học jQuery nhiều hơn.

0 nhận xét:

Đăng nhận xét