• fans
  • 1036 reader
  • followers
Chương 2 – jQuery Selectors
  • Tutorial Details
  • Độ khó: Căn bản
  • Thời gian: 30 phút
  • File size: < 1 Mb
  • Yêu cầu: Mọi đối tượng đều có thể học được
Có 8 bài viết trong series jQuery căn bảnHiển thị

Thư viện jQuery tận dụng kiến thức và thế mạnh của CSS Selector để cho phép bạn nhanh chóng và dễ dàng truy cập nhiều phần tử hoặc nhóm các phần tử trong DOM (Document Object Model). Trong chương 2 này chúng ta sẽ khám phá một vài những Selector này và cả những Selector của jQuery. Chúng ta cũng sẽ tìm hiểu thêm về cách di chuyển trong cây thư mục và nó cho chúng ta thêm linh động để đạt được những gì mình muốn.


Document Object Model (Mô hình đối tượng tài liệu)

Một trong những tính năng mạnh mẽ nhất của jQuery là khả năng chọn các thành phần trong DOM một cách dễ dàng. Nói nôm na thì DOM là một dạng phả hệ của các thành phần HTML. Các thành phần này có mối tương quan với nhau như một “gia đình” HTML hạnh phúc. Khi chúng ta nói đến các mối quan hệ này bạn hãy liên tưởng đến mối quan hệ trong gia đình như ông bà, bố mẹ, anh chị em v.v.. Bạn có thể xem bài Hướng đối tượng dựa vào cấp bậc XHTML để biết rõ hơn về mối quan hệ của các thành phần HTML.

Hàm $()

Cho dù bạn sử dụng Selector nào đi chăng nữa trong jQuery, bạn luôn bắt đầu bằng một dấu dollar ($) và một đôi ngoặc đơn như: $(). Tất cả những gì có thể được sử dụng trong CSS cũng có thể được lồng vào dấu ngoặc kép (”) và đặt vào trong hai dấu ngoặc đơn, cho phép chúng ta áp dụng các phương pháp jQuery cho tập hợp các phần tử phù hợp.

Ba thành phần quan trọng nhất của jQuery Selector là tên thẻ HTML, ID và Class. Bạn có thể chỉ sử dụng nó hoặc kết hợp với những Selector khác để chọn. Dưới đây là một ví dụ về mỗi Selecter khi sử dụng một mình.

jquery

Như đã nói ở chương 1, khi chúng ta thêm các phương pháp vào hàm $(), thì các phần tử nằm trong đối tượng jQuery sẽ được tự động loop và diễn ra ở “hậu trường”. Cho nên chúng ta không cần phải sử dụng bất cứ một vòng lặp nào cả, như vòng lặp for chẳng hạn, điều này thường phải làm trong khi viết code về DOM. Sau khi bạn đã nằm bắt được những khái niệm cơ bản, bây giờ chúng ta sẽ khám phá thêm những tính năng mạnh mẽ khác của jQuery.

CSS Selector

Thư viện jQuery hỗ trợ gần như toàn bộ các CSS Selector chuẩn từ CSS1 cho đến CSS3. Chính việc này đã cho phép những người làm web không phải lo lắng về liệu trình duyệt đó có hỗ trợ những Selector mới hay không (đặc biệt là trình duyệt IE) miễn là trình duyệt đó có bật JavaScript.

Lưu ý: những người làm web có kinh nghiệm và trách nhiệm luôn nên áp dụng nguyên tắc nâng cao luỹ tiến và giáng cấp hài hoà cho code của họ. Họ phải luôn chắc chắn rằng trang web luôn được hiển thị chính xác, cho dù không được đẹp như khi JavaScript bị tắt hoặc khi nó được bật. Chúng ta sẽ bàn thêm về nguyên tắc này trong suốt chiều dài của loạt bài này.

Để tìm hiểu jQuery sử dụng CSS Selector như thế nào thì cách tốt nhất là làm bằng ví dụ. Trong ví dụ dưới đây chúng ta sẽ sử dụng một dạng danh sách thường được dùng để làm thanh di chuyển trên web. Code HTML sẽ như sau.

<ul id="nav">
        <li><a href="#">Home Page</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="ebook.pdf">Ebooks</a>
		<ul>
			<li><a href="#">jQuery</a></li>
			<li><a href="#">CSS</a></li>
			<li><a href="#">HTML</a></li>
		</ul>
	   </li>
         <li><a href="http://www.jquery.com">Tutorials</a></li>
         <li><a href="#">Photoshop</a>
		<ul>
			<li><a href="#">Action</a></li>
			<li><a href="#">Effect</a></li>
			<li><a href="#">Plugins</a></li>
		</ul>
	    </li>
          <li><a href="mailto:email@yahoo.com">Email</a></li>
</ul>

Trong đoạn code HTML ở trên chúng ta đơn giản chỉ có một unorder list với id=”nav” đóng vai trò là menu chính. Khi chưa có style gì áp dụng vào nó thì kết quả khi xem ở trình duyệt sẽ như hình dưới đây. Đây chính là định dạng mặc định của trình duyệt cho các Unorder List.

jquery
Định dạng list-item

Tất nhiên trong ví dụ này bạn hoàn toàn có thể sử dụng CSS để định dạng menu này, nhưng vì chúng ta muốn khám phá jQuery nên chúng ta tạm thời coi như CSS không tồn tại. Giả sử trong ví dụ này bạn muốn những list-item chính có gạch chân mà những ul phụ của nó sẽ không có gạch chân.

.highlight {
     border-bottom: 1px solid #e6db55;
     padding: 5px;
      }

Thay vì chúng ta sẽ thêm class trực tiếp vào tài liệu HTML, chúng ta sẽ sử dụng jQuery để thêm class vào những list-item tầng 1 như: Homepage, About Me, Forum, Ebooks, Tutorials, Photoshop và Email.

$(document).ready(function() {
		   $('#nav > li').addClass('highlight');
        });

Như đã bàn ở chương 1, chúng ta bắt đầu đoạn code jQuery với $(document).ready(), nó sẽ chạy ngay khi DOM đã được load. Dòng thứ 2 sử dụng CSS Child selector (>) để thêm class=’highlight’ chỉ cho list item tầng 1. Nói theo ngôn ngữ của chúng ta thì đoạn code trên có nghĩa như sau: jQuery hãy tìm mỗi một list item (li) là con trực tiếp (>) của thành phần có ID là nav (#nav). Với class=’highlight’ được thêm vào, menu của chúng ta được như sau.

jquery

Để định dạng cho những list item tầng 2 có rất nhiều cách. Nhưng một trong những cách chúng ta sẽ sử dụng trong phần này là pseudo-class phủ định. Bằng cách này chúng ta sẽ đi xác định tất cả những item nào mà không có class=’highlight’. Chúng ta sẽ viết code như sau:

$(document).ready(function() {
	$('#nav > li').addClass('highlight');
	$('#nav li:not(.highlight)').addClass('background');
 });

Đoạn code trên có nghĩa như sau:
1.Chọn tất cả những danh sách là con trực tiếp của #nav
2.Những danh sách này phải không có class=’highlight’ (:not(.highlight))
Và chúng ta sẽ được hình như hình dưới, tất nhiên bạn phải khai báo class=’background’ trong file CSS của mình.

jquery
Attribute Selectors

Attribute Selectors là bộ Selector phụ của CSS cũng rất hữu dụng. Nó cho phép chúng ta chọn một thành phần nào đó dựa vào đặc tính HTML của nó như: thuộc tính Title của link hoặc thuộc tính Alt của image. Ví dụ để chọn tất cả các tấm hình có thuộc tính Alt chúng ta làm như sau:

$('img[alt]')
Định dạng cho đường liên kết

Nếu bạn biết sơ qua về Regular Expressions trong ngôn ngữ lập trình như PHP thì Attribute Selector trong jQuery chịu ảnh hưởng bởi phương pháp này. Ví dụ dấu (^) dùng để xác định giá trị tại điểm bắt đầu hoặc ($) kết thúc của một chuỗi. Nó cũng có thể sử dụng dấu (*) để chỉ một giá trị tại một vị trí bất kỳ trong một chuỗi hoặc sử dụng dấu chấm than (!) để biểu thị một giá trị phủ định. Trong phần CSS này chúng ta sẽ định dạng các đường liên kết như sau:

a { 
color: #00c; 
}

.email { 
	padding-right: 20px;
	background: url(images/mail.png) no-repeat right center; 
}

.ebook { 
padding-right: 20px;
background: url(images/pdf.png) no-repeat right center; 
}

.hyperlink { 
padding-right: 20px;
background: url(images/external.png) no-repeat right center; 
}

Sau đó chúng ta thêm 3 class là email, ebook và hyperlink vào những đường liên kết thích hợp bằng cách sử dụng jQuery. Để thêm một class vào tất cả những đường liên kết email, chúng ta sẽ tạo một selector và nó sẽ tìm tất cả những thành phần anchor (a) với thuộc tính href bắt đầu bằng chuỗi mailto như sau:

$(document).ready(function() { 
$('a[href^=mailto:]').addClass('email');
});

Để thêm một class vào tất cả các đường liên kết đến những tệp tin .pdf, chúng ta sử dụng dấu $ thay vì dấu ^ như ở trên. Bởi vì lần này chúng ta chỉ chọn những đường liên kết nào có thuộc tính href kết thúc bằng cụm .pdf.

$(document).ready(function() { 
$('a[href^=mailto:]').addClass('mailto'); 
$('a[href$=.pdf]').addClass('ebook');
}); 

Attribute Selector cũng có thể được kết hợp với nhau. Ví dụ chúng ta cũng có thể thêm một class là hyperlink cho tất cả các đường liên kết với giá trị href bắt đầu bằng http và chứa cụm từ hyper trong nó.

$(document).ready(function() { 
$('a[href^=mailto:]').addClass('mailto'); 
$('a[href$=.pdf]').addClass('pdflink'); 
$('a[href^=http][href*=jquery]').addClass('hyperlink');
});

Với 3 class được áp dụng như trên cho các đường liên kết, chúng ta sẽ được kết quả như hình dưới đây. Bạn sẽ thấy cạnh mỗi đường link sẽ có thêm một hình icon chỉ cho người dùng biết một cách rất trực quan là đường liên kết đó là về cái gì.

jquery
Selector riêng của jQuery

Dường như còn chưa vừa ý với những CSS Selector, jQuery có một hệ thống những Selector của riêng nó. Hầu hết những Selector này đều cho phép chúng ta chọn bất cứ thành phần nào trong tài liệu HTML. Cú pháp cho những Selector này tương đồng với cú pháp của CSS pseudo-class, nơi mà các selector bắt đầu bằng dấu hai chấm (:). Ví dụ, để chọn thẻ div thứ 2 của tập hợp những thẻ div có class=’horizontal’, chúng ta có cách viết code như sau:

	$('div.horizontal:eq(1)');

Bạn nên lưu ý ở phần này là :eq(1) chọn thẻ div thử hai từ tập hợp trả về bởi vì JavaScript đánh số array bắt đầu từ số 0. Ngược lại, CSS lại là bắt đầu từ số 1. Cho nên khi bạn sử dụng nth-child CSS Selector như là $(‘div:nth-child(1)’) sẽ chọn tất cả các thẻ div là con đầu tiên của thành phần cha mẹ. Tất nhiên đấy là diễn giả là vậy, nhưng nếu trong thực tế thì bạn nên dùng $(‘div:first-child’) thì hợp lý hơn.

Định dạng bảng kiểu kẻ sọc

Hai trong số những jQuery selector rất hữu dụng là :0dd và :even. Trong ví dụ dưới đây chúng ta sẽ sử dụng một trong hai selector này để định dạng cho bảng kiểu kẻ sọc với code HTML như sau:

<table>
                    <tr>
                        <td>Movies</td>
                        <td>Actors/ Actresses</td>
                        <td>Year Make</td>
                    </tr>
                    <tr>
                        <td>Terminator</td>
                        <td>arnold schwarzenegger</td>
                        <td>1991</td>
                    </tr>
                    <tr>
                        <td>Die Hard</td>
                        <td>Bruce Willis</td>
                        <td>2000</td>
                    </tr>
                    <tr>
                        <td>Speed</td>
                        <td>Sandra Bullock</td>
                        <td>1997</td>
                    </tr>
                    <tr>
                        <td>Independence Day</td>
                        <td>Will Smith</td>
                        <td>1999</td>
                    </tr>
                    <tr>
                        <td>Armageddon</td>
                        <td>Bruce Willis</td>
                        <td>1997</td>
                    </tr>
                    <tr>
                        <td>Under Siege</td>
                        <td>Steven Seagal</td>
                        <td>1996</td>
                    </tr>
                    <tr>
                        <td>Avatar</td>
                        <td>Unknown</td>
                        <td>2010</td>
                    </tr>
                </table>

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • hai nguyen

    bai viet cua a hay lam

  • pham ngoc tuan

    anh có thể làm 1 video hay cho em cái code về cách làm comment ajax + jquery trong php với

    • Đào Tân

      cái này anh ý làm đã làm trong bộ đĩa IZcms rồi.. bạn timfmaf xem nhé ..hình nh cái này phải muathif phải :D

  • chung

    Chào anh Demon Warlock!!
    Em cũng đang tự thiết kế một trang web dựa theo các bài mà anh dạy về wordpress.Em thấy trang izwebz co một plugin show ra các avatar của các mạng xã hội như facebook twitter… những người like trang của anh.Anh có thể cho em biết plugin đó tên là gì được không anh hoặc anh có thể share vào mail cho em.
    Thank anh rất nhìu.

    • chung

      mail của em là :tranhachunng@gmail.com

  • Hồng Tâm

    Theo mình bạn cần demo code lại trước khi về (href$=.pdf sao mà dc, vì dấu “.” là ký tự đặt biệt bạn ko thể để trong đó!)
    Mình góp ý thôi nhe, bài viết hay.

    • Minh

      Thế theo bạn thì chỗ đó sẽ thay đổi thế nào? Dấu “.” vẫn được hiểu như thường, cậu test thử chưa?

      • thachpham92

        Mình đã test thử theo demo của DW và không hoạt động. Đúng ra là như này mới đúng chứ bạn.
        a[href$=".pdf"]

        • Nobita

          $(document).ready(function () {
          $(‘#nav > li’).addClass(‘highlight’);
          $(‘#nav li:not(.highlight)’).addClass(‘background’);
          $(‘a[href^=mailto:]‘).addClass(‘mailto’);
          $(‘a[href$=.pdf]‘).addClass(‘pdflink’);
          $(‘a[href^=http][href*=jquery]‘).addClass(‘hyperlink’);
          });

          Chay ngon ma cac pro.

  • http://www.kiemtien-online.info/ Minh Phạm

    Bài học thật sự rất bổ ích. Thanks anh nhiều nhiều!

  • http://cntt.eazy.vn SONGOKU

    Của A Đây : http://www.izwebz.com/featured/gioi-thieu-v-jquery/

    P/S : Ngưỡng Mộ A Thật Chúc A Nhiều Sức Khỏe Nha Để Làm Nhiều Video Hay Nữa ;)

  • Hoang Hiep

    Quá tuyệt vời anh DW ah … chúc anh nhiều sức khỏe …. chục Izwebz ngày càng thành công hơn nữa …

  • hải nam

    thêm dấu ” ” ở sau dấu = nha ,
    ex:
    $(‘a[href^=mailto:]‘).addClass(‘mailto’);
    thành
    $(‘a[href^="mailto:"]‘).addClass(‘mailto’);
    gooluck!

  • Nguyễn Mạnh Nguyên

    Em Nghiện anh rồi hi hi

  • nguyễn huy

    từ đoạn định dạng mailto đến hyperlink không chạy được bạn nào giúp mình với

    • http://www.gbitdesign.com DoDuoc

      Theo cái tự fix của mình đoạn code lại như sau:
      $(document).ready(function(){
      $(‘a[href^=mailto]‘).addClass(‘mailto’); //bỏ dấu “:”
      $(‘a[href$=pdf]‘).addClass(‘pdflink’); //bỏ dấu “.”
      $(‘a[href^=http][href*=jquery]‘).addClass(‘hyperlink’);

      });

      Bạn nào có cách nào tốt hơn xin chỉ giáo thêm (^.^). Thanks!

      • Minh

        Mình test thấy vẫn chạy bình thường mà, không cần chỉnh sửa gì cả :)

  • Đăng

    Có bác nào có demo của cái này không gửi cho em xem với, em làm mà không hiểu sao lại không được nhỉ?

    • http://tm.edu.vn Bùi Công Đăng

      Cái Định dạng cho đường liên kết sao mình làm không được các bác nhỉ?
      Các bác giúp em cái này với nhé. http://www.mediafire.com/?s8e5k1dpo5u6idg

  • Nguyễn Văn Hưng

    Cảm ơn anh DW !
    Thật hãnh diện về anh, có những người như anh thì công nghệ nước nhà mới phát triển được !
    izwebz có thể coi là mã nguồn mở cho tất cả mọi người yêu thích code ..ủng họ izwebz.com hi vọng trang web này ngày càng phát triển hơn nữa !

  • http://google.com TRần Nguyên Tỉnh

    A ơi sao không có chương 1? cho e cái link chương 1 đi.

    • pham quy tiem

      chương 1 là giới thiệu jquery đó anh!

  • Nguyen Truong Son

    Chào anh DW !!!!
    Anh có thể share cho mail cho em chương 1 của jQuery được không anh DW…
    Em cảm ơn trước….

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives