Jquery cơ bản-Selectors

Đây là bảng các selector hay dùng trong jquery:
Selector | Example | Phần tử được select |
Selector cho các phần tử trang | ||
* | $("*") | Lấy tất cả các thành phần |
#id | $("#intro") | Lấy tất cả các phần tử có id là intro |
.class | $(".about") | Lấy tất cả các phần tử có class là about |
element | $("p") | Lấy tất cả các thẻ p |
.class.class | $(".intro.about") | Lấy tất cả các thành phần có 2 class là intro và about |
Selector theo vị trí đặc biệt | ||
:first | $("p:first") | Lấy thẻ p đầu tiên |
:last | $(p:last) | Lấy thẻ p cuối cùng |
:even | $("ul li:even") | Lấy tất cả các phần tử li chẵn |
:odd | $("ul li:odd") | Lấy tất cả phần tử li lẻ |
Selector cho các phần tử tại vị trí xác định | ||
:eq(index) | $("ul li:eq(4)") | Lấy phần tử li ở vị trí thứ 5(index được đánh từ 0) |
:gt(no) | $("ul li:gt(4)") | Lấy tất cả phần tử li có index lớn hơn 4 |
:lt(no) | $("ul li:lt(4)") | Lấy tất cả các phần tử li có index nhỏ hơn 4 |
:not(selector) | $("input:not(:empty)") | Lấy tất cả các phần tử input mà không rỗng |
Selector cho phần tử theo nội dung và đặc điểm hiển thị | ||
:contains(text) | $("p:contains("webzoomz")") | Lấy tất cả các thẻ p có chứa chữ webzoomz |
:empty | $("p:empty") | Lấy tất cả các thẻ p rỗng không có nội dung |
:hidden | $("p:hidden") | Lấy tất cả các thẻ p bị hidden |
:visible | $("p:visible") | Lấy tất cả các thẻ p đang được visible |
Selector theo thuộc tính | ||
[attribute] | $("[href]") | Lấy tất cả các phần tử có thuộc tính href |
[attribute=value] | $("[src='index.html']") | Lấy tất cả các phần tử có thuộc tính src='index.html' |
[attribute!=value] | $("[src!='index.html']") | Lấy tất cả các phần tử không có thuộc tính src='index.html' |
[attribute$=value] | $("[src$='.png']") | Lấy tất cả các phần tử có thuộc tính src có giá trị kết thúc là .png |
[attribute^=value] | $("[src^='http://']") | Lấy tất cả các phần tử có thuộc tính src bắt đầu với http:// |
Selector cho các phần tử form | ||
:input | $(":input") | Lấy tất cả các thẻ input |
:text | $(":text") | Lấy tất cả các phần tử input có type=text |
:password | $(":password") | Lấy tất cả các phần tử input có type=password |
:radio | $(":radio") | Lấy tất cả các phần tử input có type=radio |
:checkbox | $(":checkbox") | Lấy tất cả các phần tử input có type=checkbox |
:submit | $(":submit") | Lấy tất cả các phần tử input có type=submit |
:reset | $(":reset") | Lấy tất cả các phần tử input có type=reset |
:button | $(":button") | Lấy tất cả các phần tử input có type=button |
:image | $(":image") | Lấy tất cả các phần tử input có type=image |
:file | $(":file") | Lấy tất cả các phần tử input có type=file |
Selector cho trạng thái | ||
:enable | $(":enable") | Lấy tất cả các phần tử input có trạng thái enable |
:disable | $(":disable") | Lấy tất cả các phần tử input có trạng thái disable |
:selected | $(":selected") | Lấy tất cả các phần tử input được select |
:checked | $(":checked") | Lấy tất cả các phần tử input được checked |
Các selectors khác | ||
:header | $(":header") | Lấy tất cả các thẻ header: h1,h2,h3... |
Đầu tiên chúng ta có 1 bảng gồm nhiều dòng:
<table>Sau đó chúng ta sẽ dùng 1 số selector đơn giản để tạo style cho bảng này. Đầu tiên chúng ta sẽ có các style:
<tr>
<td>Selector</td>
<td>Example</td>
<td>Phần tử được select</td>
</tr>
<tr>
<td colspan="3">Selector cho các phần tử trang</td>
</tr>
<tr>
<td>*</td>
<td>$("*")</td>
<td>Lấy tất cả các thành phần</td>
</tr>
<tr>
<td>#id</td>
<td>$("#intro")</td>
<td>Lấy tất cả các phần tử có id là intro</td>
</tr>
...
</table>
<style type="text/css">Và đây là code jquery để gán style cho bảng thông qua các selector:
.odd
{
background-color: #FF8900;
color: White;
}
.even
{
background-color: #fff;
color: #FF5900;
}
.caption
{
background-color: #FB5B04;
color: White;
font-weight: bold;
}
.title
{
background-color: #FB5B04;
color: #fff;
font-size: 18px;
font-weight: bolder;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>Chúng ta hãy cùng phân tích 1 chút. Mình sẽ gán class title cho dòng tr đầu tiên, các tr chẵn thì mình gán class even còn các tr lẻ thì mình gán class odd. Và phần tử tr nào có colspan=3 thì mình gán class caption. Và kết quả chính là bảng các selector bên trên(màu mè không được đẹp do mình hơi thiểu thẩm mỹ các bạn thông cảm ^_^). Hy vọng bài viết sẽ giúp các bạn hiểu hơn về các selectors trong jquery
<script type="text/javascript">
$(document).ready(function () {
$("tr:first").addClass("title");
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
$("[colspan='3']").addClass("caption");
});
</script>
1 comments:
Hay quá, mình cũng đang tìm hiểu về jquey, tìm đọc bài viết này của bạn thấy rất hay :)
Post a Comment
Bạn nên đọc cái này trước khi quăng gạch:
- Không spam(chém gió).
- Không comment nội dung không liên quan đến bài viết.
- Không chèn link.