Forum

Home » jQuery giới thiệu » xem chi tiết

1
Hình đại diện
sony

Bài học thứ 3 (jQuery Selectors)

Đăng lúc: 09:15:16 28/03/2017
Bài học thứ 3 (jQuery Selectors)
- jQuery selectors đây là một trong những phần quan trọng nhất của thư viện jQuery.
- jQuery selectors cho phép bạn chọn và điều khiển các phần tử HTML.
- jQuery selectors được dùng để tìm hay chọn các phần tử HTML căn cứ trên name, id, classes, types, attributes, values của thuộc tính và ..... Ngoài ra nó còn căn cứ trên các CSS Selectors sẳn có,và thêm một số khác do người dùng xây dựng.
* Tất cả các selectors trong jQuery bắt đầu với $ và 2 dấu ngoặc đơn: $().

*Chọn phần tử

- Chọn các phần căn cứ vào tên tag (không phải thuộc tính tên nhé)
=> chọn tất cả phần tử thẻ <p> trong 1 trang web: $("p")

- Khi người dùng nhấn vào nút thì ẩn tất cả phần tử <p>:

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

*Chọn căn cứ vào #id

- jQuery #id selector dùng thuộc tính id của 1 thẻ HTML để tìm các phần tử cần thiết.

- Một giá trị id nên là duy nhất trong một trang, vì vậy dùng #id selector khi muốn tìm 1 phần tử không có phần tử trùng id trong trang.

- Để tìm 1 phần tử có id xác định cần viết dấu rào trước id của phần tử cần tìm: $("#test")
=> tìm phần tử có id = test
- Ví dụ

Khi nhấn vào 1 nút các phần tử có id="test" sẽ ẩn:

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Chọn theo .class
-jQuery class selector tìm các phần tử theo thuojc tính class xác định.

- Để tìm các phần tử có class xác định, haxny viết dấu chấm trước tên class: $(".test")
- Ví dụ:

Khi người dùng nhấn vào nút các phần tử với class="test" sẽ ẩn:

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
----------------------
-cùi không sợ ghẻ lở
-Sở thích: Ngắm hoa quỳnh nở
+ Mua sắm đồ sale off các kiểu
+ Ăn vặt
Hình đại diện
sony
Đăng lúc: 09:15:41 28/03/2017
Bài học thứ 3(tiếp theo)
Các ví dụ jQuery Selectors:

$("*") Chọn tất cả các phần tử:
code tất cả các phần tử trang web
-------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("*").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>
--------------------------------------

$(this) chọn phần tử hiện hành
code nhấn nút sẽ ẩn phần tử hiện hành là nút vừa nhấn
----------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>
----------------------------------------
$("p.intro") chọn tất cả các phần tử <p> có thuộc tính class="intro"
code chọn và ẩn tất cả phần tử...khi nhấn nút
----------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p.intro").hide();
});
});
</script>
</head>
<body>

<h2 class="intro">This is a heading</h2>

<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

----------------------------------------
$("p:first") Chọn phần tử <p> đầu tiên
code
---------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p:first").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

---------------------------------------------
$("ul li:first") chọn phần tử <li> đầu tiên trong phần tử <ul> đầu tiên
code
---------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:first").hide();
});
});
</script>
</head>
<body>

<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>

<button>Click me</button>

</body>
</html>
---------------------------------------------
$("ul li:first-child") chọn phần tử <li> đầu tiên của mỗi phần tử <ul>
code
---------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:first-child").hide();
});
});
</script>
</head>
<body>

<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>

<button>Click me</button>

</body>
</html>

---------------------------------------------
$("[href]") Chọn tất cả các phần tử có chưa thuộc tính href
code:
---------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("[href]").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>
<p><a href="https://www.w3schools.com/css/">CSS Tutorial</a></p>

<button>Click me</button>

</body>
</html>

---------------------------------------------
$("a[target='_blank']") Chọn tất cả các phần tử <a> có chứa thuộc tính target mang giá trị bằng "_blank"
code
---------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("a[target='_blank']").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="https://www.w3schools.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="https://www.w3schools.com/css/">CSS Tutorial</a></p>

<button>Click me</button>

</body>
</html>

---------------------------------------------
$("a[target!='_blank']") Chọn tất cả các phần tử <a> có chứa thuộc tính target mang giá trị khác"_blank"
code
----------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("a[target!='_blank']").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="https://www.w3schools.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="https://www.w3schools.com/css/">CSS Tutorial</a></p>

<button>Click me</button>

</body>
</html>

----------------------------------------------
$(":button") chọn tất cả phần tử <button> và các phần tử <input>có thuộc tính type="button"
code
-----------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(":button").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>
<input type="button" value="nhan"/>
</body>
</html>

-----------------------------------------------
$("tr:even") Chọn tất cả phần tử <tr> có vị trí chẳn
code
-------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:even").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>

</body>
</html>

-------------------------------------------------
$("tr:odd") Chọn tất cả phần tử <tr> có vị trí lẻ
-------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:odd").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>

</body>
</html>

----------------------
-cùi không sợ ghẻ lở
-Sở thích: Ngắm hoa quỳnh nở
+ Mua sắm đồ sale off các kiểu
+ Ăn vặt
226: truy cập - Anynomus: online trang này.
1






VTNSolution ™ là một hệ thống mở, thành viên tự chịu trách nhiệm về nội dung đăng tải do mình đưa lên. Các phần mềm, logo, hình ảnh, thương hiệu... có bản quyền thuộc về chủ nhân sở hữu. Truy cập, sử dụng website này bạn phải chấp nhận Quy định của Diễn đàn
Powered by: VTNSOLUTION Copyright © 2007 - 2020
Thiết kế bởi Cty Giải pháp công nghệ VTN.
Website đang hoạt động thử nghiệm. Chờ giấy phép MXH/TTDT của Bộ TT&TT.
Lên đầu trang
Xuống cuối trang