Jquery Ajax Asp.net Part II

1.2 Sử dụng jQuery Selector
Các thao tác lập trình ở phía Client với javascript đều gắn liền với các đối tượng DOM của tài liệu html, jQuery hỗ trợ khá nhiều công cụ để chọn và lấy (wrap) một hoặc một tập đối tượng một cách nhanh chóng và rất tường minh.
1.2.1 Sử dụng CSS Selector
jQuery dựa trên thuộc tính CSS của đối tượng để lựa chọn, có thể sử dụng các định danh Id, sử dụng tên CSS class, tag hoặc phân cấp DOM để chọn một hoặc một tập các element.

Người viết liệt kê một số ví dụ để ta có thể tìm hiểu nhanh cách này :
– a : trả vê một tập tất cả các element chứa link có trong trang.
– #speacialID : trả về element có định danh (ID) là speacialID.
– .speacialClass : trả về tập các element có chung CSS class tên là speacialClass.
– a#speacialID.speacialClass : trả về element chứa link, có Id là speacialID đồng thời được áp dụng CSS Class : speacialClass.
– p a.speacialClass : trả về tập các element chứa link, được áp dụng CSS Class : speacialClass và các element này phải được khai báo bên trong một tag
.

Để wrap các element tương ứng ta bao bọc biểu thức trên bởi dấu đô la ($) :
$(a#speacialID)

1.2.2 Sử dụng Child, Container, Attribute Selector
1.2.2.1 Child Selector
Ví dụ : Xét một văn bản HTML :

<ul class=”myList”>
<li><a href=”http://jquery.com”>jQuery supports</a>
<ul>
<li><a href=”css1″>CSS1</a></li>
<li><a href=”css2″>CSS2</a></li>
<li><a href=”css3″>CSS3</a></li>
<li>Basic XPath</li>
</ul>
</li>
<li>jQuery also supports
<ul>
<li>Custom selectors</li>
<li>Form selectors</li>
</ul>
</li>
</ul>

Xét ví dụ trên, đặt trường hợp ta cần select element chứa link trỏ tới trang web của jQuery, chúng ta thử sử dụng Selector $(‘ul .myList li a’) nhưng kết quả không được như mong muốn, thay vì chỉ nhận được element chứa link tới trang jQuery.com chúng ta còn nhận được tất cả các các element chứa link con cháu (trong trường hợp này là các link nội bộ CSS1, CSS2, CSS3), để xử lý trường hợp này jQuery đưa ra phương án select “con trực tiếp” của một element, bằng cách sử dụng dấu ( > ). Chẳng hạn, để xử lý trường hợp đặt ra ở trên :

$(ul.myList > li > a)

1.2.2.2 Attribute Selector

<li><a href=”http://jquery.com”>jQuery supports</a>
<ul>
<li><a href=”css1″>CSS1</a></li>
<li><a href=”css2″>CSS2</a></li>
<li><a href=”css3″>CSS3</a></li>
<li>Basic XPath</li>
</ul>
</li>

Xét ví dụ trên, trường hợp đặt ra là cần select chỉ các element chứa link ngoài. Nhận thấy các link chứa liên kết ngoài đều có một đặc điểm chung là chứa đoạn “http://” ở đầu link, có thể sử dụng Attribute Selector dựa trên đặc điểm này để lấy được kết quả mong muốn. Đoạn mã sau đấy select tất cả element chứa link có thuộc tính href bắt đầu với cụm “http://”.

a[href^=http://]

Tương tự, để wrap các input có kiểu là text :

input[type=text]

Wrap các

có thuộc tính title bắt đầu bằng cụm “my” chẳng hạn.
div[title^=my]

Một cách đơn giản để wrap tất cả các link trỏ tới một file PDF :

a[href$=.pdf]

Hay wrap tất cả các link mà trong thuộc tính href chứa đâu đó cụm “tink30b” :

a[href*=tink30b]

1.2.2.3 Container Selector
Một vài trường hợp đặt biệt, cần wrap một tập các element và các element đó phải chứa một loại elemet khác, như ở ví dụ trên, cần wrap tất cả các element li chứa link, những element li nào không chứa link sẽ không được chọn, ta làm như sau :

ul.myList li:has(a)

Hoặc chỉ wrap những element không chứa link thì làm như sau :

ul.myList li:not(:has(a))

1.2.3 Select dựa trên vị trí
Đôi lúc cần wrap một số các element dựa trên vị trí của chúng trong trang, hoặc quan hệ của chúng với các element khác. Chẳng hạn như link đầu tiên trong trang hoặc trong một đoạn văn bản, hay item cuối cùng trong mỗi list trên trang, hay các hàng chẵn của một bảng … jQuery giúp chúng ta wrap được những vị trí đặc biệt này.

Để wrap link đầu tiên trên trang ta dùng :

a:first

Item cuối cùng trong mỗi list trên trang :

li:last-child

Wrap các hàng ở vị trí chẵn trên table :

table tr:nth-child(even)

1.3 $(document).ready()
Hầu hết các lập trình viên Javascript kết thúc mã thực thi bằng cách thêm các dòng mã vào script, tương tự như sau:

window.onload = function(){ … }

Các đoạn mã bên trong đó sẽ được thực thi khi trang đã tải xong, mã javascript sẽ không chạy cho đến khi tất cả hình ảnh trên trang đã được tải xong (kể cả hình ảnh quảng cáo). Lý do để sử dụng sự kiện window.onload là để chắc chắn rằng tài liệu HTML phải được tải xuống hết, sau đó mã mới được thực thi. Với jQuery thực hiện đơn giản như sau :

$(document).ready(function(){
// Do Something
});

Hoặc ngắn gọn hơn :

$(function() {
// Do something !
})

Về tieuyeuit
Lập trình viên Asp.net Tôi chia sẻ một,bạn chia sẻ một và chúng ta có rất nhiều!

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: