jQuery Selectors – 03

Trang chủ > Blog > Tài liệu > jQuery > jQuery Selectors – 03

jQuery Selectors – 03

jQuery Selectors là gì?

jQuery Selectors là một trong những phần quan trọng nhất của thư viện jQuery.

jQuery Selectors được dùng để chọn các phần tử HTML mà bạn muốn thao tác dựa trên id, class, thuộc tính, giá trị thuộc tính, quan hệ giữa các phần tử….

Cú pháp

Để chọn một phần tử HTML chúng ta sử dụng cú pháp: $(selector)

Ví dụ 1:

Đoạn mã dưới đây chọn tất cả các phần tử <p>: $(“p”)

Ví dụ 2:

Đoạn mã dưới đây chọn tất cả các phần tử có class là hello: $(“.hello”)

Ví dụ 3:

Đoạn mã dưới đây chọn tất cả các phần tử <div> có class là hello: $(“div.hello”)

Ví dụ 4:

Đoạn mã dưới đây chọn phần tử có id là hello rồi ẩn đó đi

 

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
</head>
<body>
    <div id="hello">Xin chào</div>
    <div>Hello World</div>
    <script>
        $(document).ready(function(){
            $('#hello').hide();
        })
    </script>
</body>
</html>

Tham khảo tất cả các bộ chọn (Selectors) trong jQuery

Dưới đây là một bảng tổng hợp các bộ chọn (Selectors) trong jQuery, bạn có thể tìm hiểu chi tiết của bộ chọn đó bằng cách bấm nào “Xem chi tiết”

  • $(‘*’): Chọn tất cả các thành phần có trong văn bản HTML, khi sử dụng bộ chọn này có thể sẽ khiến quá trình xử lý của một số trình duyệt chậm lại.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('*').css('border','1px solid blue');
});
</script>
</head>

<body>
<div>div</div>
<div>div</div>
<p>p</p>
<div>div</div>
</body>
</html>
  • $(‘tag‘): Chọn thành phần theo từng tag cụ thể.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p').css('border','1px solid blue');
});
</script>
</head>

<body>
<div>div</div>
<p>p</p>
<div>
<p>p bên trong div</p>
</div>
</body>
</html>
  • $(‘tag.tênclass‘): Chọn thành phần theo từng class cụ thể.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('.test').css('border','1px solid blue');
});
</script>
</head>

<body>
<div class="test">div</div>
<p>p</p>
<div>
<p>p bên trong div</p>
</div>
</body>
</html>
  • $(‘tag#tênid‘): Chọn thành phần theo từng id cụ thể.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('#test').css('border','1px solid blue');
});
</script>
</head>

<body>
<div id="test">div</div>
<p>p</p>
<div>
<p>p bên trong div</p>
</div>
</body>
</html>
  • $(‘selector1, selector2, selectorN‘): Chọn nhiều bộ chọn giúp bạn có thể chọn một lúc nhiều bộ chọn khác nhau, tốn ít thời gian hơn cho việc chọn từng bộ chọn.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p, div, ul li').css('border','1px solid blue');
});
</script>
</head>

<body>
<div>div</div>
<p>p</p>
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
</body>
</html>
  • $(‘parent > child‘): Chọn thành phần con dựa theo thành phần cha.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div > p').css('border','1px solid blue');
});
</script>
</head>

<body>
<div class="test">div</div>
<p>p</p>
<div>
<p>p bên trong div</p>
</div>
</body>
</html>
  • $(‘tag:eq()’): Chọn thành phần với một chỉ số n cụ thể.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('ul li:eq(3)').css('border','1px solid blue');
});
</script>
</head>

<body>
<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>
</body>
</html>
  • $(‘tag:gt()’): Chọn các thành phần với chỉ số lớn hơn chỉ số n.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('ul li:gt(1)').css('border','1px solid blue');
});
</script>
</head>

<body>
<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>
</body>
</html>
  • $(‘tag:lt()’): Chọn các thành phần với chỉ số nhỏ hơn chỉ số n.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('ul li:lt(2)').css('border','1px solid blue');
});
</script>
</head>

<body>
<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>
</body>
</html>
  • $(‘tag:even’): Chọn các phần tử ở vị trí lẻ.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('ul li:even').css('background-color','#cccccc');
});
</script>
</head>

<body>
<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>
</body>
</html>
  • $(‘tag:odd’): Chọn các phần tử ở vị trí chẵn.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('ul li:even').css('background-color','#cccccc');
});
</script>
</head>

<body>
<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>
</body>
</html>
  • $(‘tag:first’): Chọn phần tử ở vị trí đầu tiên.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('ul li:first').css('background-color','#cccccc');
});
</script>
</head>

<body>
<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>

<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
</ul>
</body>
</html>
  • $(‘tag:last’): Chọn phần tử ở vị trí cuối cùng.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('ul li:last').css('background-color','#cccccc');
});
</script>
</head>

<body>
<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>

<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
</ul>
</body>
</html>
  • $(‘tag:first-child’): Chọn các phần tử con ở vị trí đầu tiên.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('ul li:first-child').css('background-color','#cccccc');
});
</script>
</head>

<body>
<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>

<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
</ul>
</body>
</html>
  • $(‘tag:first-of-type’): Chọn thành phần con đầu tiên hoặc duy nhất trong các thành phần cha.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p:first-of-type').css('background-color','#cccccc');
});
</script>
</head>

<body>
<p>p tự do đầu tiên</p>
<div>
    <ul>
        <li>
       	    <p>p duy nhất của li</p>
        </li>
        <li>
       	    <p>p duy nhất của li</p>
        </li>
    </ul>
    <p>p đầu tiên của div</p>
    <p>p thứ 2 của div</p>
    <ul>
        <li>
            <p>p đầu tiên của li</p>
            <p>p cuối cùng của li</p>
        </li>
    </ul>
    <p>p thứ 3 của div</p>
    <p>p cuối cùng của div</p>
</div>
<p>p tự do thứ 2</p>
<p>p tự do cuối cùng</p>
</body>
</html>
  • $(‘tag:last-child’): Chọn các phần tử con ở vị trí cuối cùng.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('ul li:last-child').css('background-color','#cccccc');
});
</script>
</head>

<body>
<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>

<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
</ul>
</body>
</html>
  • $(‘tag:last-of-type’): Chọn thành phần con cuối cùng hoặc duy nhất trong các thành phần cha.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p:last-of-type').css('background-color','#cccccc');
});
</script>
</head>

<body>
<p>p tự do đầu tiên</p>
<div>
    <ul>
        <li>
       	    <p>p duy nhất của li</p>
        </li>
        <li>
       	    <p>p duy nhất của li</p>
        </li>
    </ul>
    <p>p đầu tiên của div</p>
    <p>p thứ 2 của div</p>
    <ul>
        <li>
            <p>p đầu tiên của li</p>
            <p>p cuối cùng của li</p>
        </li>
    </ul>
    <p>p thứ 3 của div</p>
    <p>p cuối cùng của div</p>
</div>
<p>p tự do thứ 2</p>
<p>p tự do cuối cùng</p>
</body>
</html>
  • $(‘tag:nth-child()’): Chọn thành phần thứ “n” trong thành phần cha, gốc tính được tính từ thành phần đầu tiên trở đi.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p:nth-child(3)').css('background-color','#cccccc');
});
</script>
</head>

<body>
<p>Thành phần độc lập thứ nhất</p>
<p>Thành phần độc lập thứ 2</p>
<p>Thành phần độc lập thứ 3</p>
<p>Thành phần độc lập thứ 4</p>
<p>Thành phần độc lập thứ 5</p>
<p>Thành phần độc lập thứ 6</p>

<div>
    <p>Thành phần thứ nhất</p>
    <p>Thành phần thứ 2</p>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <div>Thành phần thứ 2</div>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <ul>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
    </ul>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>
</body>
</html>
  • $(‘tag:nth-last-child()’): Chọn thành phần thứ “n” trong thành phần cha, gốc tính được tính từ thành phần cuối cùng trở lại.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p:nth-last-child(3)').css('background-color','#cccccc');
});
</script>
</head>

<body>
<p>Thành phần độc lập thứ nhất</p>
<p>Thành phần độc lập thứ 2</p>
<p>Thành phần độc lập thứ 3</p>
<p>Thành phần độc lập thứ 4</p>
<p>Thành phần độc lập thứ 5</p>
<p>Thành phần độc lập thứ 6</p>

<div>
    <p>Thành phần thứ nhất</p>
    <p>Thành phần thứ 2</p>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <div>Thành phần thứ 2</div>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <ul>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
    </ul>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>
</body>
</html>
  • $(‘tag:nth-of-type()’): Chọn thành phần thứ “n”, gốc tính được tính từ thành phần đầu tiên trở đi.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p:nth-of-type(3)').css('background-color','#cccccc');
});
</script>
</head>

<body>
<p>Thành phần độc lập thứ nhất</p>
<p>Thành phần độc lập thứ 2</p>
<p>Thành phần độc lập thứ 3</p>
<p>Thành phần độc lập thứ 4</p>
<p>Thành phần độc lập thứ 5</p>
<p>Thành phần độc lập thứ 6</p>

<div>
    <p>Thành phần thứ nhất</p>
    <p>Thành phần thứ 2</p>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <div>Thành phần thứ 2</div>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <ul>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
    </ul>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>
</body>
</html>
  • $(‘tag:nth-last-of-type()’): Chọn thành phần thứ “n”, gốc tính được tính từ thành phần cuối cùng trở lại.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p:nth-last-of-type(3)').css('background-color','#cccccc');
});
</script>
</head>

<body>
<p>Thành phần độc lập thứ nhất</p>
<p>Thành phần độc lập thứ 2</p>
<p>Thành phần độc lập thứ 3</p>
<p>Thành phần độc lập thứ 4</p>
<p>Thành phần độc lập thứ 5</p>
<p>Thành phần độc lập thứ 6</p>

<div>
    <p>Thành phần thứ nhất</p>
    <p>Thành phần thứ 2</p>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <div>Thành phần thứ 2</div>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <ul>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
    </ul>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>
</body>
</html>
  • $(‘tag:only-child’): Chọn thành phần con trong các thành phần cha, khi thành phần cha có mỗi thành phần con là chính nó, không được chứa thành phần con khác.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p:only-child').css('background-color','#cccccc');
});
</script>
</head>

<body>
<p>p tự do duy nhất</p>
<div>
    <ul>
        <li>
       	    <p>p duy nhất của li</p>
            <div>div duy nhất của li</div>
        </li>
        <li>
       	    <p>p duy nhất của li, không chứa thành phần khác</p>
        </li>
    </ul>
    <p>p đầu tiên của div</p>
    <p>p thứ 2 của div</p>
    <ul>
        <li>
            <p>p đầu tiên của li</p>
            <p>p cuối cùng của li</p>
        </li>
    </ul>
    <p>p thứ 3 của div</p>
    <p>p cuối cùng của div</p>
</div>
</body>
</html>
  • $(‘tag:only-of-type’): Chọn thành phần con trong các thành phần cha, khi thành phần cha có một thành phần con là chính nó.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p:only-of-type').css('background-color','#cccccc');
});
</script>
</head>

<body>
<p>p tự do đầu tiên</p>
<div>
    <ul>
        <li>
       	    <p>p duy nhất của li</p>
            <div>div duy nhất của li</div>
        </li>
        <li>
       	    <p>p duy nhất của li</p>
        </li>
    </ul>
    <p>p đầu tiên của div</p>
    <p>p thứ 2 của div</p>
    <ul>
        <li>
            <p>p đầu tiên của li</p>
            <p>p cuối cùng của li</p>
        </li>
    </ul>
    <p>p thứ 3 của div</p>
    <p>p cuối cùng của div</p>
</div>
<p>p tự do thứ 2</p>
<p>p tự do cuối cùng</p>
</div>
</body>
</html>
  • $(‘tag:animated’): Chọn các thành phần đang chuyển động.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background: blue;
    height: 50px;
    float: left;
    margin-right: 10px;
    width: 100px;
}
.bgRed {
    background: red;
}
</style>
<script>
$(function(){
    function motion() {
        $('.test').slideToggle('slow', motion);
    }
    motion();

    $('button').click(function(){
        $('div:animated').toggleClass('bgRed');
    });
});
</script>
</head>

<body>
<div>div</div>
<div class="test">div chuyển động</div>
<div>div</div>
<div class="test">div chuyển động</div>
<p><button>Click</button></p>
</body>
</html>
  • $(‘tag[attribute]’): Chọn các thành phần có sử dụng cùng thuộc tính.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('[title]').css('border','1px solid red');
});
</script>
</head>

<body>
<div>div</div>
<div class="test">div có thuộc tính class</div>
<div title="Việt Nam">div có thuộc tính title với giá trị Việt Nam</div>
<div title="Không phải Việt Nam">div có thuộc tính title với giá trị Không phải Việt Nam</div>
</body>
</html>
  • $(‘tag[attribute=”value“]’): Chọn thành phần có thuộc tính với giá trị xác định.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('[title="Việt Nam"]').css('border','1px solid red');
});
</script>
</head>

<body>
<div>div</div>
<div class="test">div có thuộc tính class</div>
<div title="Việt Nam">div có thuộc tính title với giá trị Việt Nam</div>
<div title="Không phải Việt Nam">div có thuộc tính title với giá trị Không phải Việt Nam</div>
</body>
</html>
  • $(‘tag[attribute!=”value“]’): Chọn những thành phần ngoài thành phần chứa thuộc tính với giá trị xác định.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('[class|="test"]').css('border','1px solid red');
});
</script>
</head>

<body>
<p class="test">test</p>
<p class="first_test">first-test</p>
<p class="first-test">first_test</p>
<p class="firsttest">firsttest</p>
<p class="firsttestlast">firsttestlast</p>
<p class="first_test_last">first-test-last</p>
<p class="first-test-last">first_test_last</p>
<p class="test_last">test_last</p>
<p class="test-last">test-last</p>
<p class="testlast">testlast</p>
<p>none</p>
</body>
</html>
  • $(‘tag[attribute|=”value“]’): Chọn thành phần có thuộc tính với giá trị xác định, hoặc một chuỗi với giá trị bắt đầu bằng value-.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('[class|="test"]').css('border','1px solid red');
});
</script>
</head>

<body>
<p class="test">test</p>
<p class="first_test">first-test</p>
<p class="first-test">first_test</p>
<p class="firsttest">firsttest</p>
<p class="firsttestlast">firsttestlast</p>
<p class="first_test_last">first-test-last</p>
<p class="first-test-last">first_test_last</p>
<p class="test_last">test_last</p>
<p class="test-last">test-last</p>
<p class="testlast">testlast</p>
<p>none</p>
</body>
</html>
  • $(‘tag[attribute^=”value“]’): Chọn thành phần có thuộc tính với giá trị xác định, hoặc một chuỗi với giá trị bắt đầu bằng value.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('[class^="test"]').css('border','1px solid red');
});
</script>
</head>

<body>
<p class="test">test</p>
<p class="first_test">first-test</p>
<p class="first-test">first_test</p>
<p class="firsttest">firsttest</p>
<p class="firsttestlast">firsttestlast</p>
<p class="first_test_last">first-test-last</p>
<p class="first-test-last">first_test_last</p>
<p class="test_last">test_last</p>
<p class="test-last">test-last</p>
<p class="testlast">testlast</p>
<p>none</p>
</body>
</html>
  • $(‘tag[attribute$=”value“]’): Chọn thành phần có thuộc tính với giá trị đặc biệt bằng value.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('[class$="test"]').css('border','1px solid red');
});
</script>
</head>

<body>
<p class="test">test</p>
<p class="first_test">first-test</p>
<p class="first-test">first_test</p>
<p class="firsttest">firsttest</p>
<p class="firsttestlast">firsttestlast</p>
<p class="first_test_last">first-test-last</p>
<p class="first-test-last">first_test_last</p>
<p class="test_last">test_last</p>
<p class="test-last">test-last</p>
<p class="testlast">testlast</p>
<p>none</p>
</body>
</html>
  • $(‘tag[attribute~=”value“]’): Chọn thành phần có thuộc tính với giá trị biệt bằng value riêng lẻ, chỉ chọn các giá trị nào được viết cách nhau bằng khoảng trắng.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $(':lang(vi)').css('border','1px solid red');
});
</script>
</head>

<body>
<div>div</div>
<div lang="en-us">div có thuộc tính lang với giá trị en-us</div>
<div>div không có thuộc tính lang</div>
<div lang="vi">div có thuộc tính lang với giá trị vi</div>
</body>
</html>
  • $(‘tag:lang(language)’): Chọn các thành phần có sử dụng cùng thuộc tính lang với language xác định.
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $(':lang(vi)').css('border','1px solid red');
});
</script>
</head>

<body>
<div>div</div>
<div lang="en-us">div có thuộc tính lang với giá trị en-us</div>
<div>div không có thuộc tính lang</div>
<div lang="vi">div có thuộc tính lang với giá trị vi</div>
</body>
</html>
  • $(tag[bộ chọn thuộc tính 1][bộ chọn thuộc tính n]): Chọn nhiều các thành phần với từng bộ chọn cụ thể.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div[id][title="Việt_Nam"]').css('border','1px solid red');
});
</script>
</head>

<body>
<div>div</div>
<div title="Việt_Nam">div có thuộc tính title với giá trị Việt_Nam</div>
<div title="Không_phải_Việt_Nam">div có thuộc tính title với giá trị Không_phải_Việt_Nam</div>
<div id="test" title="Việt_Nam">div có thuộc tính title với giá trị Việt_Nam, có id</div>
</body>
</html>
  • $(‘tag:parent’): Chọn thành phần có chứa ít nhất một thành phần con (text cũng có thể xem là thành phần con)
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('td:parent').css('background-color','blue');
});
</script>
</head>

<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td></td>
</tr>

<tr>
<td>4</td>
<td></td>
<td>6</td>
</tr>
</table>
</body>
</html>
  • $(‘tag:empty’): Chọn thành phần không có chứa bất kỳ thành phần nào, kể cả text.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('td:empty').css('background-color','blue');
});
</script>
</head>

<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td></td>
</tr>

<tr>
<td>4</td>
<td></td>
<td>6</td>
</tr>
</table>
</body>
</html>
  • $(‘tag:text’): Chọn thành phần input có thuộc tính type với giá trị text.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('input:text').css('background-color','blue');
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:button’): Chọn thành phần input có thuộc tính type với giá trị button, hoặc tag button.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $(':button').css('background-color','blue');
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:checkbox’): Chọn thành phần input có thuộc tính type với giá trị checkbox.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $(':checkbox').wrap('<span style="background-color: blue"></span>')
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:checked’): Chọn thành phần có thuộc tính checked.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $(':checked').wrap('<span style="background-color: blue"></span>')
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:disabled’): Chọn thành phần có thuộc tính disabled.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $(':disabled').wrap('<span style="background-color: blue"></span>')
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:enabled’): Chọn thành phần không có thuộc tính disabled.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $(':enabled').wrap('<span style="background-color: blue; padding: 2px;"></span>')
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:file’): Chọn thành phần có thuộc tính type với giá trị file.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $(':file').wrap('<span style="background-color: blue; padding: 2px;"></span>')
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:focus’): Chọn thành phần khi được focus.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
.bgFocus {
    background: blue;
}
</style>
<script>
$(function(){
    $("body").delegate("*","focus blur", function(event) {
        $(this).toggleClass("bgFocus", $(this).is(":focus"));
    });
$(function(){
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:hidden’): Chọn tất cả các thành phần không hiển thị, không dùng cho input với thuộc tính type=”hidden”.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $(':hidden').show().css("background-color","blue");
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:image’): Chọn thành phần input có thuộc tính type với giá trị image.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
    span.bgChoose{
        background-color: blue;
        display: inline-block;
        width: 300px;
    }
</style>
<script>
$(function(){
    $(':image').wrap('<span class="bgChoose"></span>')
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:input’): Chọn thành phần thuộc về form như: input, select, textarea và button.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
    span.bgImage{
        background-color: blue;
        display: inline-block;
        width: 300px;
    }
</style>
<script>
$(function(){
    $(':input').wrap('<span class="bgImage"></span>')
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:password’): Chọn thành phần input có thuộc tính type với giá trị password.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
    span.bgChoose{
        background-color: blue;
        display: inline-block;
        width: 300px;
    }
</style>
<script>
$(function(){
    $(':password').wrap('<span class="bgChoose"></span>')
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:radio’): Chọn thành phần input có thuộc tính type với giá trị radio.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
    span.bgChoose{
        background-color: blue;
        display: inline-block;
        width: 300px;
    }
</style>
<script>
$(function(){
    $(':radio').wrap('<span class="bgChoose"></span>')
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:reset’): Chọn thành phần input có thuộc tính type với giá trị reset.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
    span.bgChoose{
        background-color: blue;
        display: inline-block;
        width: 300px;
    }
</style>
<script>
$(function(){
    $(':reset').wrap('<span class="bgChoose"></span>')
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:selected’): Chọn thành phần select.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $(':selected').css('background','blue');
});
</script>
</head>

<body>
<select>
<option>option01</option>
<option>option02</option>
<option selected="selected">option03</option>
<option>option02</option>
</select>
</body>
</html>
  • $(‘tag:submit’): Chọn thành phần input có thuộc tính type với giá trị submit.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
    span.bgChoose{
        background-color: blue;
        display: inline-block;
        width: 300px;
    }
</style>
<script>
$(function(){
    $(':submit').wrap('<span class="bgChoose"></span>')
});
</script>
</head>

<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
  • $(‘tag:visible’): Chọn thành phần đang nhìn thấy (visible), click vào các thành phần để hiểu rõ hơn
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div:visible').click(function () {
        $(this).css("background", "blue");
    });
});
</script>
</head>

<body>
<div style="display:none;">div display none</div>
<div>div display block</div>
<div>div display block</div>
<div style="display:none;">div display none</div>
<div>div display block</div>
</body>
</html>
  • $(‘tag:root’): Chọn thành phần gốc của văn bản, thành phần gốc chính là tag html.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $(':root').css("border", "1px solid blue");
});
</script>
</head>

<body>
<p>Thành phần p</div>
<div>Thành phần div</div>
<span>Thành phần div</span>
</body>
</html>
  • $(‘tag:has(selector)’): Chọn thành phần có chứa ít nhất một phần tử phù hợp với quy định chọn.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div:has(p)').css("border", "1px solid blue");
});
</script>
</head>

<body>
<p>Thành phần p</div>
<div>
<p>Thành phần p bên trong div</div>
</div>
<div>Thành phần div</div>
<span>Thành phần div</span>
</body>
</html>
  • $(‘tag:header’): Chọn thành phần headline.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $(':header').css("background", "blue");
});
</script>
</head>

<body>
<h1>Thành phần h1</h1>
<div>
<h2>Thành phần h2 bên trong div</h2>
</div>
<div>Thành phần div</div>
<h3>Thành phần h3</h3>
</body>
</html>
  • $(‘prev + next‘): Chọn thành phần kế tiếp ngay sau thành phần trước.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div + span').css("border", "1px solid blue");
});
</script>
</head>

<body>
<p>Thành phần p</div>
<div>
<p>Thành phần p bên trong div</div>
</div>
<div>Thành phần div</div>
<span>Thành phần div</span>
</body>
</html>
  • $(‘prev ~ siblings‘): Chọn tất cả các thành phần kế tiếp ngay sau thành phần trước.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('.previous ~ p').css("border", "1px solid blue");
});
</script>
</head>

<body>
<p>Thành phần p</div>
<div>
<p>Thành phần p bên trong div</div>
</div>
<div class="previous">Thành phần div</div>
<p>Thành phần p</p>
<span>Thành phần span</span>
<p>Thành phần p</div>
<p>Thành phần p</div>
<div>
<p>Thành phần p bên trong div</div>
</div>
</body>
</html>
  • $(‘tag:not(selector)’): Không chọn bộ chọn này.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $(':not(p)').css("border", "1px solid blue");
});
</script>
</head>

<body>
<p>Thành phần p</div>
<div>
<p>Thành phần p bên trong div</div>
</div>
<div class="previous">Thành phần div</div>
<p>Thành phần p</p>
<span>Thành phần span</span>
<p>Thành phần p</div>
<p>Thành phần p</div>
<div>
<p>Thành phần p bên trong div</div>
</div>
</body>
</html>
  • $(‘tag:contains(text)’): Chọn thành phần có chứa text được chỉ định.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p:contains(html)').css("border", "1px solid blue");
});
</script>
</head>

<body>
<p>Học html thiệt dễ</div>
<p>Học css thiệt dễ</div>
<p>Học xhtml thiệt dễ</div>
<p>Học css3 thiệt dễ</div>
<p>Học html5 thiệt dễ</div>
<p>Học jquery thiệt dễ</div>
</body>
</html>

BÀI VIẾT LIÊN QUAN

Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery – 09

Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery – 09

Phương thức stop() dùng để kết thúc một hiệu ứng jQuery (hiện, ẩn, trượt, phai màu, chuyển động,….) trước khi hiệu ứng đó được...

Hiệu ứng động (Animation) trong jQuery – 08

Hiệu ứng động (Animation) trong jQuery – 08

Phương thức animate() trong jQuery được dùng để tạo hiệu ứng động (di chuyển, thay đổi kích thước,….) cho phần...

Cách hiện và ẩn một phần tử (với hiệu ứng trượt) – 07

Cách hiện và ẩn một phần tử (với hiệu ứng trượt) – 07

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu cách hiện và ẩn một phần tử HTML với hiệu ứng...

Hàm Callback trong jQuery – 06

Hàm Callback trong jQuery – 06

Một hàm Callback sẽ được thực thi sau khi hiệu ứng jQuery hiện tại đã thực hiện xong 100%. Tại...

Cách hiện và ẩn một phần tử (với hiệu ứng phai màu) – 05

Cách hiện và ẩn một phần tử (với hiệu ứng phai màu) – 05

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu cách hiện và ẩn một phần tử HTML với hiệu ứng...

Cách hiện và ẩn một phần tử – 04

Cách hiện và ẩn một phần tử – 04

Cách hiện và ẩn một phần tử HTML Phương thức show() dùng để hiện một phần tử HTML Phương thức hide() dùng để ẩn...

jQuery Selectors – 03

jQuery Selectors – 03

jQuery Selectors là gì? jQuery Selectors là một trong những phần quan trọng nhất của thư viện jQuery. jQuery Selectors...

Cú pháp của jQuery – 02

Cú pháp của jQuery – 02

Cách thức làm việc của jQuery là bạn sẽ dùng các bộ chọn (Selectors) để chọn ra các phần tử...

Tìm hiểu tổng quan về jQuery – 01

Tìm hiểu tổng quan về jQuery – 01

jQuery là gì? jQuery là một thư viện JavaScript, giúp đơn giản hóa việc lập trình JavaScript từ đó dẫn...

logo
Liên hệ ngay