ThS. Trần Vĩnh Xuyên - http://khonggiankythuat.com

1. Giới thiệu

Trong thiết kế web, khi sử dụng jquery thì một vấn đề vô cùng quan trọng đó là bộ chọn trong jquery. Khi cần thao tác lên một đối tượng nào đó, chúng ta phải chọn được đối tượng ấy trước tiên.

2. Bộ chọn class

2.1. Giới thiệu

Bộ chọn class (class selectors) là các bộ chọn dựa trên sự lựa chọn các đối tượng mà trong thành phần khai báo của chúng ở dạng class.

2.2. Ví dụ

<style> 
 .noidung{
   width:750px;
   height:500px;
   background-color:blue;
   color:yellow;
   font-size:25px;
 } 
</style> 

<div class="noidung">
 <p>Thầy Trần Vĩnh Xuyên</p>
</div>

<script>
$(document).ready(function(){
  $("p").click(function(){
    alert("Thầy Xuyên chào bạn nghen!")
  });
});
</script>

2.3. Áp dụng

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="jquery.js">
 </script>
 <style> 
  .noidung{
   width:750px;
   height:500px;
   background-color:blue;
   font-size:25px;
  } 
 </style> 
<body>
 <h2>Trần Vĩnh Xuyên</h2>
 <p>Mời bạn click vào vùng nội dung!</p>
 <div class="noidung">
  <p>Thầy Trần Vĩnh Xuyên</p>
 </div>

 <script>
  $(document).ready(function(){
   $(".noidung").click(function(){
    alert("Thầy Xuyên chào bạn nghen!")
   });
 });
</script> 
</body>
</html>

3. Bộ chọn id

3.1. Giới thiệu

Bộ chọn id (id selectors) là các bộ chọn dựa trên sự lựa chọn các đối tượng mà trong thành phần khai báo của chúng ở dạng id.

3.2. Ví dụ

<style> 
 #textbox{
   background-color:yellow;
 } 
</style> 

<div>
 <input type="text" id="textbox" />
</div>

<script>
$(document).ready(function(){
  $("#textbox").mouseenter(function(){
    alert("Thầy Xuyên chào bạn nghen!")
  });
});
</script>

3.3. Áp dụng

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="jquery.js">
  </script>
<style> 
 #textbox{
   background-color:yellow;
 } 
</style> 
<body>
<h2>Trần Vĩnh Xuyên</h2>
<p>Mời đưa trỏ chuột vào!</p>
 <div>
 Tên <input type="text" id="textbox" />
 </div>

 <script>
  $(document).ready(function(){
   $("#textbox").mouseenter(function(){
    alert("Thầy Xuyên chào bạn nghen!");
   });
  });
 </script> 
 
</body>
</html>

4. Bộ chọn thẻ

4.1. Giới thiệu

Bộ chọn thẻ (tag selectors) là các bộ chọn dựa trên sự lựa chọn các đối tượng mà chúng là các thẻ đã được định nghĩa.

4.2. Ví dụ

<style> 
 .noidung{
  cursor:poiter;
 } 
</style> 

<div class="noidung">
 Tên <p>Thầy Trần Vĩnh Xuyên</p>
</div>

<script>
$(document).ready(function(){
  $("p").click(function(){
    alert("Thầy Xuyên chào bạn nghen!")
  });
});
</script>

4.3. Áp dụng

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="jquery.js">
 </script>
 <style> 
  .noidung{
    cursor:poiter;
  } 
</style>  
<body>
 <h2>Minh họa Jquery</h2>
 <div class="noidung">
  <p>Thầy Trần Vĩnh Xuyên</p>
 </div>

 <script>
  $(document).ready(function(){
   $("p").click(function(){
    alert("Thầy Xuyên chào bạn nghen!")
   });
 });
</script> 
</body>
</html>

5. Một số bộ chọn

Bộ chọn	Ý nghĩa
$("*")	Chọn tất cả các đối tượng
$(this)	Chọn đối tượng hiện hành
$("p.intro")	Chọn tất cả các thẻ p mà có class là intro
$("p:first")	Chọn thẻ p đầu tiên
$("ul li:first")	Chọn thẻ li đầu tiên của ul đầu tiên
$("ul li:first-child")	Chọn thẻ li đầu tiên của tất cả ul
$("[href]")	Chọn tất cả các thẻ có thuộc tính href
$("a[target = '_blank']")	Chọn tất cả các thẻ a có thuộc tính target có giá trị blank
$("a[target != '_blank']")	Chọn tất cả các thẻ a có thuộc tính target có giá trị không phải blank
$(":button")	Chọn tất cả các thẻ button hay thẻ input mà có type = "button"
$("tr:even")	Chọn tất cả các thẻ tr chẵn
$("tr:odd")	Chọn tất cả các thẻ tr lẻ

Trích dẫn: (http://khonggiankythuat.com)

Tkw - Các Bộ Chọn Trong Jquey