Tuần trước, tôi đã nói về tầm quan trọng của jQuery đối với bất kỳ nhà phát triển web hiện đại nào và tại sao nó lại tuyệt vời. Tuần này, tôi nghĩ đã đến lúc chúng ta làm bẩn một số mã và học cách thực sự sử dụng jQuery trong các dự án của mình.

Tôi sẽ nói điều này ngay bây giờ - bạn không cần phải học Javascript để sử dụng jQuery. Có lẽ là tốt nhất nếu bạn coi jQuery như một sự phát triển của Javascript - một cách tốt hơn để làm điều đó - chứ không chỉ đơn giản là một thư viện bổ sung chức năng. Bất kỳ Javascript nào bạn cần sẽ được chọn trên đường đi. Tuy nhiên, giả định rằng với tư cách là một nhà phát triển web, bạn có kiến thức khá tốt về HTML và CSS (và đây là hướng dẫn xHTML miễn phí hữu ích nếu không!).

Mô hình Đối tượng Tài liệu

jQuery là tất cả về truyền tải và thao tác với KIỂM ĐỊNH - NS NS ơn HOẶC bject NS odel. DOM là một biểu diễn dạng cây phân cấp của trang, được xây dựng bởi các trình duyệt sau khi đọc tất cả mã HTML. Trong jQuery, chúng tôi sẽ sử dụng thuật ngữ như cha mẹ , bọn trẻ , và anh chị em ruột khá thường xuyên, vì vậy bạn nên có ý tưởng về ý nghĩa của điều này trong mối quan hệ với DOM.

Sơ đồ đơn giản này từw3schoolsgiải thích các khái niệm khá tốt. Bạn sẽ có thể thấy rằng cha của phần tử là, trong khi phần tử có ngay lập tức

jQuery code codes here`

$ ('bộ chọn').phương pháp();

Đó là nó, trong tiêu đề trên đó. Đó là cấu trúc cơ bản của một đoạn mã jQuery để thao tác DOM. Dễ dàng, phải không?

Cácbộ chọnyêu cầu jQuery tìm những thứ phù hợp với quy tắc này, và giống như các bộ chọn CSS (và sau đó là một số khác ở trên cùng). Vì vậy, cũng giống như trong CSS, bạn sẽ tạo kiểu cho tất cả các liên kết với

a { }

Điều tương tự sẽ được thực hiện trong jQuery như

$('a')

Điều này có thể được thực hiện cho bất kỳ phần tử HTML nào - div, h1, span - bất cứ điều gì. Bạn cũng có thể sử dụng các lớp CSS và ID để cụ thể hơn.

Ví dụ: để tìm tất cả các liên kết với lớp 'findme', bạn sẽ sử dụng:

$('a.findme')

Bạn không cần chỉ định loại phần tử mỗi lần - nhưng nếu bạn làm vậy, nó chỉ đơn giản là làm cho quy tắc cụ thể hơn. Bạn có thể vừa nói

$('.findme')

mà sẽ phù hợp với mọi thứ với lớp học tìm tôi , cho dù đó có phải là một liên kết hay không.

Để sử dụng phần tử ID được đặt tên, hãy sử dụng # thay vào đó ký tên. Sự khác biệt chính ở đây là bộ chọn ID sẽ chỉ chọn một đối tượng, trong khi bộ chọn lớp có thể tìm thấy nhiều hơn một đối tượng.

làm thế nào để chuyển tiếp một văn bản trên Android

$('#something')

Về cơ bản, nếu bạn có thể làm trong CSS thì jQuery cũng sẽ làm được. Trên thực tế, bạn cũng có thể có một số bộ chọn giả kiểu CSS3 khá phức tạp như:

$('body p:first')

Cái nào sẽ lấy đoạn văn của trang. Bạn cũng tìm thấy các phần tử có thuộc tính nhất định. Hãy xem xét ví dụ này; chúng tôi muốn tìm tất cả các liên kết trên trang trỏ đến tận dụng và làm nổi bật chúng theo một cách nào đó. Đây là cách chúng tôi có thể tìm thấy chúng:

$('a[href*='makeuseof']')

Thật tuyệt phải không? Vâng, tôi nghĩ nó là.

Cổng gọi tiếp theo của bạn phải là tài liệu API jQuery cho bộ chọn . Đó là một danh sách khổng lồ gồm tất cả các loại bộ chọn khác nhau có sẵn để sử dụng và không ai có thể mong đợi bạn học tất cả chúng.

Phần tiếp theo của phương trình làphương pháp- phải làm gì với những thứ đó khi bạn đã tìm thấy tất cả - nhưng chúng ta sẽ để lại điều đó cho bài học tiếp theo. Tuy nhiên, nếu bạn muốn bắt đầu thử các bộ chọn khác nhau ngay bây giờ, tôi khuyên bạn nên làm theo phương pháp css sau. Điều này có hai tham số - một CSS tên tài sản , và một cái mới giá trị để gán cho tài sản đó. Vì vậy, để cung cấp cho tất cả các liên kết một màu nền đỏ, bạn sẽ làm như sau:

$('a').css('background-color','red');

Đủ đơn giản! Mặc dù điều này có thể không có tác dụng thực tế nào, nhưng nó sẽ cho phép bạn dễ dàng nhìn thấy bất kỳ phần tử nào được đặt bằng cách sử dụng bộ chọn của bạn. Bây giờ, hãy đi ra và chọn - DOM đang chờ bạn.

Tôi hy vọng hướng dẫn này hữu ích cho bạn; Tôi đã cố gắng làm cho nó càng đơn giản càng dễ hiểu càng tốt. Hãy thoải mái hỏi bất kỳ câu hỏi nào bạn có hoặc để lại phản hồi, nhưng hãy lưu ý rằng tôi chắc chắn không phải là ninja jQuery ưu tú.

Đăng lại Đăng lại tiếng riu ríu E-mail 5 mẹo để nạp đầy năng lượng cho máy VirtualBox Linux của bạn

Bạn mệt mỏi với hiệu suất kém do các máy ảo cung cấp? Đây là những gì bạn nên làm để tăng hiệu suất VirtualBox của mình.

Đọc tiếp Chủ đề liên quan

Văn hóa web
Phát triển web
JavaScript
Lập trình
jQuery

Giới thiệu về tác giả James Bruce(707 bài báo đã xuất bản)

James có bằng Cử nhân về Trí tuệ nhân tạo và được chứng nhận CompTIA A + và Network +. Khi không bận rộn với tư cách là Biên tập viên đánh giá phần cứng, anh ấy thích LEGO, VR và các trò chơi trên bàn cờ. Trước khi gia nhập MakeUseOf, anh ấy là kỹ thuật viên ánh sáng, giáo viên tiếng Anh và kỹ sư trung tâm dữ liệu.

Xem thêm từ James Bruce

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký