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

jQyery 7

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

Bài 07: jQuery Selectors - Attributes

  0  


 Google +0  

   0
Đăng bởi: TheHalfHeart - Vào ngày: 25-08-2014 - Chuyên mục:jQuery- View: 2899
Trải qua 6 bài nhưng chúng ta vẫn chưa học hết các hàm xử lý attributes trong jquery, nhưng để các bạn khỏi thắc mắc về những selector jquery trong các ví dụ mà tôi trình bày thì kể từ bài thứ 7 này tôi sẽ giới thiệu cách sử dụng các selector trong jquery căn bản. Trong bài này ta sẽ tìm hiểu selector attributes.
Nhắc tới thuộc tính của thẻ thì ta sẽ nhớ ngay đến bài hàmattr()vàremoveAttr()dùng để thiết lập và xóa thuộc tính của thẻ. Nhưng giả sử ta muốn truy xuất đến một đối tượng có thuộc tính nào đó bằng cái gì đó thì làm thế nào? Rất đơn giản cho bạn hiểu qua những ví dụ dưới đây.

1. Selector bắt đầu bằng tiền tố

Cú pháp: jQuery( "[attribute|='value']" )
Chọn tất cả những thẻ HTML có thuộc tính attribute và có giá trị bắt đầu bằng chữ value-{something} hoặc value
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

<!DOCTYPE html>
<html>
    <head>
        <title>Đổi màu nhé</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>
            body{
                 margin: 20px;
            }
            a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
            .selected {
                border: solid 1px; color: white; background: blue
            }
        </style>
        <script language="javascript"> 
        $(document).ready(function()
        {
            $('#button').click(function()
            {
                $('a[title|="freetuts"]').addClass('selected');
            });
        });
        </script>
    </head>
    <body>
        <a href="#" title="freetuts-hompage">title = freetuts-hompage</a>
        <a href="#" title="freetutsvideopage">title = freetutsvideopage</a>
        <a href="#" title="freetuts">title = freetuts</a>
        <a href="#" title="hoc-lap-trinh-online"> title = hoc-lap-trinh-online</a>
        <button id="button">Xem</button>
    </body>
</html>

2. Selector chỉ cần xuất hiện trong giá trị của thuộc tính

Cú pháp: jQuery( "[attribute*='value']" )
Chọn tất cả những thẻ HTML có thuộc tính attribute và có giá trị là {something}value{something}

Ví dụ: Xem demotitle = freetuts-hompagetitle = freetutsvideopagetitle = freetutstitle = hoc-lap-trinh-online

3. Selector tìm theo chữ (Word)

Cú pháp: jQuery( "[attribute~='value']" )
Chọn tất cả những thẻ HTML có thuộc tính attribute và giá trị của nó có chữ value. Lưu ý với các bạn rằng vì là word nên nó có khoảng trắng mới được tính là một từ 
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

<!DOCTYPE html>
<html>
    <head>
        <title>Đổi màu nhé</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>
            body{
                 margin: 20px;
            }
            a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
            .selected {
                border: solid 1px; color: white; background: blue
            }
        </style>
        <script language="javascript"> 
        $(document).ready(function()
        {
            $('#button').click(function()
            {
                $('a[title~="freetuts"]').addClass('selected');
            });
        });
        </script>
    </head>
    <body>
        <a href="#" title="freetuts-hompage">title = freetuts-hompage</a>
        <a href="#" title="freetuts videopage">title = freetuts videopage</a>
        <a href="#" title="freetuts">title = freetuts</a>
        <a href="#" title="hoc-lap-trinh-online"> title = hoc-lap-trinh-online</a>
        <button id="button">Kiểm tra có chữ freetuts không</button>
    </body>
</html>

4. Selector tìm theo các ký tự cuối cùng

Cú pháp: jQuery( "[attribute|='value']" )
Chọn tất cả những thẻ HTML có thuộc tính attribute và có giá trị bắt đầu bằng chữ value-{something} hoặc value
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

<!DOCTYPE html>
<html>
    <head>
        <title>Đổi màu nhé</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>
            body{
                 margin: 20px;
            }
            a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
            .selected {
                border: solid 1px; color: white; background: blue
            }
        </style>
        <script language="javascript"> 
        $(document).ready(function()
        {
            $('#button').click(function()
            {
                $('a[title$="freetuts"]').addClass('selected');
            });
        });
        </script>
    </head>
    <body>
        <a href="#" title="trang freetuts">title = trang freetuts</a>
        <a href="#" title="websitefreetuts">title = websitefreetuts</a>
        <a href="#" title="freetuts tutorial">title = freetuts tutorial</a>
        <a href="#" title="hoc-lap-trinh-online-tai-freetuts"> title = hoc-lap-trinh-online-tai-freetuts</a>
        <button id="button">Xem</button>
    </body>
</html>

5. Selector tìm theo đúng giá trị thuộc tính

Cú pháp: jQuery( "[attribute|='value']" )
Chọn tất cả những thẻ HTML có thuộc tính attribute và có giá trị là value
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

<!DOCTYPE html>
<html>
    <head>
        <title>Đổi màu nhé</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>
            body{
                 margin: 20px;
            }
            a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
            .selected {
                border: solid 1px; color: white; background: blue
            }
        </style>
        <script language="javascript"> 
        $(document).ready(function()
        {
            $('#button').click(function()
            {
                $('a[title="freetuts"]').addClass('selected');
            });
        });
        </script>
    </head>
    <body>
        <a href="#" title="trang freetuts">title = trang freetuts</a>
        <a href="#" title="websitefreetuts">title = websitefreetuts</a>
        <a href="#" title="freetuts">title = freetuts</a>
        <a href="#" title="hoc-lap-trinh-online-tai-freetuts"> title = hoc-lap-trinh-online-tai-freetuts</a>
        <button id="button">Kiểm tra</button>
    </body>
</html>

6. Selector tìm theo phủ định (không bằng)

Cú pháp: jQuery( "[attribute!='value']" )
Chọn tất cả những thẻ HTML có thuộc tính attribute và có giá trị bắt đầu bằng chữ value-{something} hoặc value
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

<!DOCTYPE html>
<html>
    <head>
        <title>Đổi màu nhé</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>
            body{
                 margin: 20px;
            }
            a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
            .selected {
                border: solid 1px; color: white; background: blue
            }
        </style>
        <script language="javascript"> 
        $(document).ready(function()
        {
            $('#button').click(function()
            {
                $('a[title!="freetuts"]').addClass('selected');
            });
        });
        </script>
    </head>
    <body>
        <a href="#" title="trang freetuts">title = trang freetuts</a>
        <a href="#" title="websitefreetuts">title = websitefreetuts</a>
        <a href="#" title="freetuts">title = freetuts</a>
        <a href="#" title="hoc-lap-trinh-online-tai-freetuts"> title = hoc-lap-trinh-online-tai-freetuts</a>
        <button id="button">Kiểm tra</button>
    </body>
</html>

7. Selector chỉ cần có thuộc tính là được chấp nhận

Cú pháp: jQuery( "[attribute]" )
Chọn tất cả những thẻ HTML có thuộc tính attribute
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

<!DOCTYPE html>
<html>
    <head>
        <title>Đổi màu nhé</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>
            body{
                 margin: 20px;
            }
            a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
            .selected {
                border: solid 1px; color: white; background: blue
            }
        </style>
        <script language="javascript"> 
        $(document).ready(function()
        {
            $('#button').click(function()
            {
                $('a[title').addClass('selected');
            });
        });
        </script>
    </head>
    <body>
        <a href="#" title="trang freetuts">title = trang freetuts</a>
        <a href="#">Không có title</a>
        <a href="#" title="freetuts">title = freetuts</a>
        <a href="#" title="hoc-lap-trinh-online-tai-freetuts"> title = hoc-lap-trinh-online-tai-freetuts</a>
        <button id="button">Kiểm tra</button>
    </body>
</html>

8. Selector chồng lên nhau

Cú pháp: jQuery( "[attributeFilter1][attributeFilter2][attributeFilterN]" )
Chọn tất cả những thẻ HTML thỏa mãn điều kiện attributeFilter1, attributeFilter2, ... attributeFilterN
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

<!DOCTYPE html>
<html>
    <head>
        <title>Đổi màu nhé</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>
            body{
                 margin: 20px;
            }
            a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
            .selected {
                border: solid 1px; color: white; background: blue
            }
        </style>
        <script language="javascript"> 
        $(document).ready(function()
        {
            $('#button').click(function()
            {
                $('a[name][title="freetuts"]').addClass('selected');
            });
        });
        </script>
    </head>
    <body>
        <a href="#" name="demo" title="freetuts">name = demo, title = freetuts</a>
        <a href="#" name="demo">name = demo, không có title</a>
        <a href="#" title="freetuts">Không có name, title = freetuts</a>
        <a href="#" name="demo" title="hoc-lap-trinh-online-tai-freetuts">Name = demo, title = hoc-lap-trinh-online-tai-freetuts</a>
        <button id="button">Kiểm tra</button>
    </body>
</html>

9. Lời kết

Đơn giản phải không nào :D. jQuery selector được vận dụng theo nguyên tắc viết CSS vàregular expressionnên nếu bạn nắm vững 2 nguyên tắc này thì sẽ dễ dàng hiểu rõ. Bài tiếp theo ta sẽ tìm hiểu các selector khác nhé.

0 nhận xét:

Đăng nhận xét