Thực đơn
trang chủMicrosoft

Các tập lệnh Html để làm việc với thư viện jquery. Kết nối thư viện jQuery với Blogger

(Cập nhật cuối cùng: 10.09.2017)

Chào mọi người! Chủ đề của chúng ta hôm nay là kết nối. thư viện jQuery tới Blogger. Lúc đầu, bạn muốn biết một chút điều gì: jQuery là gì và jQuery có thể làm gì, một phần giới thiệu ngắn gọn. jQuery - Thư viện JavaScript, tập trung vào Tương tác JavaScript và HTML. Thư viện jQuery giúp bạn dễ dàng truy cập bất kỳ phần tử DOM nào, truy cập và thao tác các thuộc tính, nội dung của phần tử DOM. Thư viện jQuery cũng cung cấp một API thuận tiện để làm việc với Ajax.

Một lạc đề nhỏ từ chủ đề của chúng tôi dành cho những người chưa biết JavaScript là gì. JavaScript là một đoạn mã phần mềm được nhúng vào mã của một mẫu hoặc trang và cho phép bạn triển khai nhiều hiệu ứng khác nhau mà không có trong JavaScript. sử dụng HTML và CSS. Nghĩa là, các phần mã chương trình được chèn vào những vị trí cần thiết trong mẫu hoặc trang để thực hiện tác vụ mong muốn. Đây là JavaScript. Tại Blogger, chúng tôi sử dụng tiện ích HTML/JavaScript tiện dụng cho mục đích này.

Hãy tiếp tục chủ đề của chúng tôi. Thư viện jQuery chứa chức năng hữu ích cho nhiều tác vụ. Tuy nhiên, các nhà phát triển thư viện không đặt ra nhiệm vụ kết hợp hàm jQuery, sẽ phù hợp ở mọi nơi, vì nó sẽ dẫn đến rất nhiều mã, hầu hết trong số đó là không cần thiết. Do đó, kiến ​​trúc của một thư viện lõi phổ quát nhỏ gọn và các plugin đã được triển khai. Điều này cho phép bạn thu thập tài nguyên chính xác theo chức năng JavaScript cần thiết cho tài nguyên đó.

Các tính năng của thư viện jQuery:

Công cụ chọn CSS trên nhiều trình duyệt Sizzle, đã trở thành một dự án riêng biệt;
Duyệt qua cây DOM, bao gồm hỗ trợ XPath dưới dạng plugin;
Sự kiện;
Hiệu ứng hình ảnh;
AJAX - tiện ích bổ sung;
Các plugin JavaScript.

Bây giờ hãy thêm thư viện jQuery cho Blogger. Sau khi kết nối một lần, bạn sẽ không phải cài đặt tập lệnh, widget trên jQuery, v.v. trong tương lai. kết nối thư viện.

Cách thêm thư viện JQuery vào Blogger/Blogspot

Vào bảng điều khiển blogger - Mẫu - Chỉnh sửa HTML, tìm và thêm ngay bên dưới (hoặc phía trên thẻ):

Trước khi bắt đầu khám phá thư viện jQuery, chúng ta cần kết nối nó với tài liệu của mình. Để làm được điều này, hãy tạo ra nhiều nhất trang đơn giản, không rườm rà – index.html và trên đó chúng ta sẽ kết nối jq của mình (viết tắt của jQuery, hãy bắt đầu làm quen với nó).

Làm cách nào để bao gồm thư viện jQuery? Và tôi có thể lấy mã ở đâu?

Có 2 cách để kết nối thư viện với trang web. Trước khi tôi bắt đầu mô tả cả hai phương pháp, đừng lập tức lặp lại theo tôi. Đầu tiên, hãy đọc về các phương pháp này, sau đó chọn phương pháp phù hợp với bạn và kết nối mọi thứ. Đừng lo lắng - jQuery được kích hoạt bằng một dòng mã, vì vậy nếu bạn không có bộ nhớ về một con cá, bạn sẽ không sao cả.

Phương pháp đầu tiên là tải xuống từ jquery.com

Có một trang web tuyệt vời như vậy - đây là trang web chính thức của thư viện. Giống như bất kỳ thư viện nào, jq ​​được phát triển bởi các lập trình viên đơn giản. Họ nhận ra rằng họ có thể làm cho lưỡi của mình nhỏ hơn Lập trình JavaScript, bắt đầu làm việc lâu dài và chăm chỉ - và kết quả là thư viện được sử dụng rộng rãi nhất, được các lập trình viên web yêu thích.

Quan trọng! Tất cả các hình ảnh có thể nhấp vào.

Kết nối thư viện jQuery từ trang web chính thức

  • Chúng tôi vào trang web chính thức;
  • Nhấp vào liên kết “Tải xuống”;
  • Nếu bạn cần phiên bản nhẹ (nén) thì nhấp vào liên kết ở khối “3”;
  • Nếu bạn cần phiên bản dành cho nhà phát triển web, hãy nhấp vào liên kết trong khối “4”;
  • Đang tải thư viện:
  • Tải nó lên thư mục chứa tệp index.html.
    • Sự khác biệt giữa phiên bản nén và phiên bản dành cho nhà phát triển web là gì?

    Trong các hình ảnh bên dưới, tôi đã hiển thị các đoạn mã nhỏ từ hai phiên bản.



    Về cơ bản thì đây là 2 phiên bản hoàn toàn giống nhau. Sự khác biệt duy nhất giữa các tệp này là trong phiên bản nén jQuery, tất cả mã được viết trên một dòng. Trong jQuery, vốn dành cho các nhà phát triển, tất cả mã đều có các tab và dấu cách, do đó, nó có thể dễ dàng đọc được.

    Vì trình duyệt (cụ thể là trình duyệt xử lý mã này) không thấy sự khác biệt giữa hai tệp này, nên tốt hơn nên sử dụng phiên bản nén trên các dự án “trực tiếp” của bạn, vì nó nhẹ hơn nhiều (do không có khoảng trắng) . Và như bạn biết, chúng càng nhẹ cân tập tin nguồn trang web - tải càng nhanh, điều này có tác động tích cực đến yếu tố hành vi.


    Khối “1” - kích thước tệp của phiên bản nén là 96 KB.

    Khối “2” - kích thước tệp của phiên bản dành cho nhà phát triển là 280 KB.

    Phiên bản đầy đủ nặng hơn gần gấp ba lần!

    Không nén phiên bản jQuery phục vụ để đi sâu vào thư viện này chi tiết hơn. Nếu bạn là một nhà phát triển rất tỉ mỉ, bạn có thể loại bỏ chức năng không cần thiết, thêm của bạn, v.v.

    Cá nhân tôi chưa bao giờ leo lên đó cả, trong ba năm không có nhu cầu như vậy. Và tôi thực sự không phải là người thích đọc 10 nghìn dòng.

    Bạn có thể phân biệt 2 phiên bản này qua tên gọi của chúng. Trong phiên bản nén, .js luôn đứng trước .min (trong hình này được hiển thị trong khối được đánh số “3”). Nếu bạn đã làm việc trong lĩnh vực phát triển web đủ lâu, có thể bạn đã nhận thấy “thủ thuật” này trong các thư viện khác.

    Làm cách nào để kết nối jQuery?

    Có, kết nối giống như css, chỉ sử dụng một thẻ khác.

    Chú ý! Tất cả mã bạn sẽ viết bằng jq phải được viết bên dưới kết nối của thư viện này. Nếu không, bạn sẽ gặp lỗi và không có gì hoạt động.

    Cách thứ hai là sử dụng Google

    Tại sao tôi lại yêu cầu bạn đừng vội tải xuống thư viện này? Thật đơn giản - bạn có thể kết nối trực tiếp với Google.

    Như bạn đã biết, Google không chỉ hệ thống tìm kiếm, nhưng trong tập đoàn khổng lồ này có rất nhiều tính năng khác nhau được tạo ra để giúp cuộc sống của một lập trình viên trở nên dễ dàng hơn.

    Google cũng sử dụng phiên bản nén. Và trong mã này, bạn có thể tìm thấy một bổ sung quan trọng - nó chứa công nghệ ajax (chúng ta sẽ nói về vấn đề này sau). Cái này rất thứ hữu ích, và sớm hay muộn bạn sẽ cần nó. Và nếu bạn kết nối thư viện với Google thì bạn sẽ không phải tốn thời gian tìm kiếm và kết nối tất cả các chức năng cho ajax.

    Bởi vì google - rất công ty lớn, máy chủ của họ sẽ không bao giờ gặp sự cố và do đó bạn có thể hoàn toàn tin tưởng rằng jQuery sẽ luôn hoạt động trên trang web của bạn.

    Nhưng có một nhược điểm - nếu bạn kết nối thư viện từ Google, thì khi phát triển một trang web, bạn cần phải có quyền truy cập Internet liên tục.

    Chà, bây giờ tôi đã mô tả cả hai phương pháp, bạn có thể chọn một phương pháp phù hợp hơn với mình và kết nối nó với tài liệu html của bạn.

    Kiểm tra

    Khi bạn đã đưa thư viện vào, bạn nên kiểm tra nó. Dưới đây tôi đã đưa ra một phần mã jq - đừng đi sâu vào chi tiết (điều này sẽ được thảo luận trong các bài học sau) về những gì được viết ở đó, chỉ cần viết điều tương tự và xem kết quả.

    Một số tiếp theo

    Sau khi khởi chạy trang, dòng chữ “Có một số văn bản” sẽ xuất hiện. Và sau khi nhấp vào văn bản này, nó sẽ biến mất. Nếu mọi thứ diễn ra chính xác như thế này với bạn thì bạn đã làm đúng mọi thứ.

    tái bút Đôi khi bạn gặp những câu hỏi: “làm cách nào để kết nối jQuery với Joomla 3?”, “làm cách nào để kết nối jQuery với Bitrix?”, “làm cách nào để kết nối jQuery với WordPress?”. Cho dù bạn sử dụng công cụ nào trên trang web, phương thức kết nối luôn giống nhau. Chúng tôi đặt dòng yêu cầu vào mẫu - và mọi thứ sẽ phù hợp với bạn.

    Điều này sẽ cài đặt jQuery trong thư mục node_modules. Trong node_modules/jquery/dist/ bạn sẽ tìm thấy bản phát hành không nén, bản phát hành nén và tệp bản đồ.

    liên kết Tải xuống jQuery bằng Bower

    Phiên bản thứ hai giúp bạn cập nhật mã để chạy trên jQuery 3.0 trở lên, khi bạn đã sử dụng Migrate 1.x và nâng cấp lên jQuery 1.9 trở lên:

    liên kết Kiểm tra trình duyệt chéo với jQuery

    Hãy đảm bảo kiểm tra các trang web sử dụng jQuery trong tất cả các trình duyệt mà bạn muốn hỗ trợ. Trang web cung cấp sẵn các máy ảo để thử nghiệm nhiều phiên bản khác nhau của trình duyệt web IE. Bạn có thể tìm thấy phiên bản cũ hơn của các trình duyệt khác tại oldversion.com.

    liên kết Bản dựng trước khi phát hành của jQuery

    Nhóm jQuery liên tục làm việc để cải thiện mã. Mỗi cam kết đối với kho lưu trữ Github sẽ tạo ra một phiên bản mã đang hoàn thiện mà chúng tôi cập nhật trên jQuery CDN. Những phiên bản này đôi khi không ổn định và không bao giờ phù hợp với nơi sản xuất. Chúng tôi khuyên bạn nên sử dụng chúng để xác định xem lỗi đã được sửa chưa khi báo cáo lỗi đối với các phiên bản đã phát hành hoặc để xem liệu có lỗi mới nào được đưa ra hay không.

    liên kết Sử dụng jQuery với liên kết CDN Các CDN khác

    Các CDN sau đây cũng lưu trữ các phiên bản nén và không nén của bản phát hành jQuery. Bắt đầu với jQuery 1.9, chúng cũng có thể lưu trữ các tệp ; kiểm tra tài liệu của trang web.

    Lưu ý rằng có thể có sự chậm trễ giữa bản phát hành jQuery và tính khả dụng của nó ở đó. Hãy kiên nhẫn, họ nhận được các tập tin cùng lúc bài đăng trên blog được công khai. Ứng viên Beta và phát hành khôngđược lưu trữ bởi các CDN này.

    Một gợi ý nhỏ

    Trang web này có mô tả gần như tất cả các hàm của thư viện jQuery, vì vậy nếu bạn không hiểu một trong các hàm trong ví dụ, bạn có thể xem nhanh mô tả của nó. Và để không lãng phí thời gian tìm kiếm nó, hãy sử dụng tính năng tìm kiếm bằng phím: bắt đầu nhập tên hàm mà bạn quan tâm vào trường “bằng phím”.

    Bắt đầu nào

    Sau khi dành một chút thời gian cố gắng mang lại chức năng động cho các trang trên trang web của mình, bạn sẽ thấy rằng bạn liên tục làm theo cùng một mẫu: trước tiên hãy tìm một hoặc nhiều thành phần trang, sau đó thực hiện một số hành động trên chúng, chẳng hạn như ẩn, thay đổi kích thước, định vị lại , tính minh bạch, v.v.

    Sử dụng javascript thông thường, mỗi tác vụ này sẽ yêu cầu hàng chục dòng Mã chương trình(và rất nhiều vấn đề đau đầu về nó vận hành chính xác V. các trình duyệt khác nhau). Tác giả của jQuery đã thiết kế thư viện của mình theo cách mà hầu hết nhiệm vụ chung trở nên tầm thường. Ví dụ: như thế này, bằng cách sử dụng hàm $() từ thư viện, bạn có thể tìm thấy các phần tử trên trang bằng nhiều tham số khác nhau:

    Và đây chỉ là một phần nhỏ trong tất cả các khả năng tìm kiếm phần tử ( danh sách đầy đủ xem các quy tắc trong phần bộ chọn). Sau khi chọn các phần tử, bạn có thể bắt đầu thao tác với chúng ngay lập tức; jQuery cung cấp nhiều phương thức cho việc này (xem các phần về thao tác và hiệu ứng). Dưới đây là một số trong những phổ biến nhất:

    $("#bigIt").css("chiều cao")sẽ trả về giá trị chiều cao của phần tử có mã định danh bigIt.
    $("div").css("width", "20px")sẽ đặt chiều rộng mới cho tất cả các phần tử div trên trang.
    $("#bigIt").attr("class")sẽ trả về giá trị lớp của phần tử có id = bigIt.
    $("#bigIt").attr("class", "box")sẽ đặt giá trị mới cho thuộc tính lớp của phần tử có id = bigIt.
    $("#bigIt").html(

    Người mới!

    )     		sẽ thay đổi tất cả nội dung html của phần tử có id = bigIt thành nội dung được chỉ định trong phương thức html.
    $("#bigIt").text()sẽ trả về văn bản bên trong phần tử có id = bigIt.
    $(".someBox").empty()xóa nội dung của các phần tử bằng lớp someBox.

    Như vậy, chỉ với một dòng mã, chúng ta có thể tìm hiểu hoặc thay đổi giá trị css, thuộc tính, html và nội dung văn bản của bất kỳ thành phần nào trên trang. Chỉ cần có những tính năng này thôi cũng sẽ khiến jQuery trở nên không thể thiếu. Tuy nhiên, thư viện này cho phép bạn làm được nhiều hơn thế nữa.

    hàm $()

    Hàm có tên ngắn gọn $() có lẽ là hàm quan trọng nhất trong toàn bộ thư viện. Với sự trợ giúp của nó, bạn có thể tìm thấy các thành phần trên trang (như bạn đã thấy) và thêm chúng “nhanh chóng” html mới:

    // tạo một phần tử div và thêm nó vào cuối phần tử có nội dung định danh $("

    Bang!

    ").appendTo("#content");

    Bắt đầu viết kịch bản

    Trước khi chạy tập lệnh js, bạn cần chắc chắn rằng phần trang nơi tập lệnh này hoạt động đã được tải. Hầu hết các lập trình viên sử dụng sự kiện onload cho việc này, sự kiện này xảy ra khi toàn bộ trang đã tải xong:

    window.onload = hàm () ( )

    Tuy nhiên, quá trình tải xảy ra sau khi trang được hình thành hoàn chỉnh, bao gồm tải tất cả hình ảnh, biểu ngữ flash và video. Trong khi cấu trúc của cây DOM (các phần tử trang), mà tập lệnh thường hoạt động, đã sẵn sàng sớm hơn nhiều. Kết quả là tập lệnh chạy muộn hơn nhiều so với khả năng có thể. Trong trường hợp này, jQuery có một phương thức sẵn sàng, được gọi khi cây DOM sẵn sàng:

    $(document).ready ( function () ( // gọi chức năng cần thiết kịch bản ) ) ;

    Chuỗi phương thức

    Một tính năng quan trọng của hầu hết các phương thức jQuery là khả năng xâu chuỗi chúng. Các phương thức thao tác các thành phần tài liệu thường trả về các đối tượng này cho sử dụng thêm, cho phép bạn viết một cái gì đó như thế này:

    $("#bigIt" ) .empty() .attr ("class" , "noContent" ) ; // kết quả là phần tử có mã định danh bigIt sẽ bị xóa tất cả nội dung của nó, // sau đó lớp noContent sẽ được đặt thành phần tử đó.

    những chuỗi này có thể bao gồm nhiều hơn phương pháp. Để dễ đọc, các chuỗi thường được viết “trong một cột”:

    $("div" ) // tìm tất cả các phần tử div .parent () // tìm chúng phần tử cha.css ("heigth" , "10px" ) // đặt chiều cao cuối cùng thành 10 pixel .fadeTo (0 , 0.5 ) // đặt độ trong suốt (cha mẹ của div) của chúng thành 50% .addClass ("divOwner" ) ; // chúng ta hãy thêm lớp divOwner vào nó

    Bằng cách này, bạn có thể dễ dàng mô tả tất cả các hành động xảy ra với các phần tử đã chọn, tránh việc sử dụng một số lượng lớn các biến tạm thời.

    Làm việc với một tập hợp các phần tử

    Ngoài việc thao tác với các phần tử đã chọn, jQuery cho phép bạn làm việc với chính tập hợp đó: thay đổi nó cũng như làm việc với các phần tử riêng lẻ. Hãy chứng minh một số khả năng:

    $("div").parent()sẽ trả về các phần tử gốc của tất cả các div.
    $("div").children()sẽ trở lại phần tử con tất cả các div.
    $("#someId").next()sẽ trả về phần tử ngay sau someId.
    $("div").prev()sẽ trả về các phần tử ở phía trước div.
    $("div").eq(i)sẽ trả về phần tử div có chỉ mục i trong tập hợp.
    $("div").get(i)sẽ trả về div đối tượng DOM, với chỉ mục i.
    $("div").get()sẽ trả về một mảng đối tượng DOM của tất cả các div.
    $("div").size()sẽ trả về kích thước của tập hợp (số div).

    Trong thực tế, có nhiều phương pháp khác để làm việc với một tập hợp; danh sách đầy đủ của chúng có thể được tìm thấy trong phần tương ứng.

    Lưu ý sự khác biệt giữa phương thức get(i) và eq(i). Cái đầu tiên trả về trực tiếp đối tượng DOM của phần tử được đánh số i trong tập hợp (nhân tiện, việc đánh số bắt đầu từ 0). Bạn sẽ không thể áp dụng các phương thức jQuery cho một phần tử như vậy, nhưng bạn có thể áp dụng các phương thức tiêu chuẩn phương pháp javascript. Ngược lại, phương thức eq(i) trả về phần tử thứ i theo cách mà các phương thức jQuery có thể được áp dụng cho nó. Nói chung, để áp dụng các phương thức thư viện jQuery cho các phần tử, chúng phải nằm trong đối tượng được gọi là jQuery, đây là thứ mà hàm $() trả về.

    Phương thức chính mà tất cả các phương thức khác dựa vào là phương thức animate(), có thể được sử dụng để thiết lập các thuộc tính CSS khác nhau để thay đổi trơn tru:

    Thuộc tính Animate(properties, , , ) - danh sách các thuộc tính CSS liên quan đến hoạt ảnh và chúng giá trị cuối cùng. Chúng được chỉ định bởi một đối tượng, ở định dạng (khóa:giá trị), ví dụ: (độ mờ: 50, chiều rộng: 100, chiều cao: 200).
    thời lượng - thời lượng của hoạt ảnh. Có thể được chỉ định bằng mili giây hoặc Chuỗi giá trị"nhanh" hoặc "chậm" (200 và 600 mili giây). nới lỏng - thay đổi tốc độ hoạt ảnh (cho dù nó sẽ chậm lại khi kết thúc quá trình thực thi hay ngược lại, tăng tốc). Đặt theo giá trị chuỗi: "tuyến tính" và "xoay" (đối với hoạt ảnh đồng nhất và hoạt ảnh có khả năng tăng tốc). Các tùy chọn khác có thể được tìm thấy trong plugin. gọi lại là một chức năng sẽ được gọi sau khi hoạt ảnh hoàn thành.

    Ví dụ. Hãy để chúng tôi có phần tử div với một số văn bản. Chúng tôi muốn ẩn phần tử này một cách trơn tru, thay thế văn bản và làm cho phần tử hiển thị một cách trơn tru:

    $("#mydiv" ) .animate (( chiều cao: "ẩn" ) , 300 ) .text ("Văn bản mới" ) .animate (( chiều cao: "show" ) , 300 ) ;

    các giá trị "ẩn", "hiển thị" có nghĩa là sự biến mất và xuất hiện của phần tử do tham số mà chúng được áp dụng.

    Có các phương pháp riêng biệt cho phép bạn ẩn và hiển thị các phần tử cũng như thay đổi độ trong suốt của chúng. Tất cả những phương pháp này có thể được tìm thấy trong phần hiệu ứng. Cũng cần lưu ý rằng khi một số hiệu ứng được gọi đồng thời, liên quan đến một phần tử, việc thực hiện chúng sẽ không xảy ra đồng thời mà luân phiên nhau. Ví dụ: khi chạy các lệnh sau:

    $("#my-div" ) .animate (( chiều cao: "ẩn" ) , 1000 ) ; $("#my-div" ) .animate (( chiều cao: "show" ) , 1000 ) ;

    phần tử có id div của tôi, ban đầu sẽ biến mất một cách trơn tru khỏi màn hình, sau đó bắt đầu xuất hiện trở lại một cách trơn tru. Tuy nhiên, hoạt ảnh được đặt trên các phần tử khác nhau sẽ được thực thi đồng thời:

    $("#my-div-1") .animate (( chiều cao: "ẩn" ) , 1000 ) ; $("#my-div-2") .animate (( chiều cao: "show" ) , 1000 ) ;

    Ajax

    jQuery triển khai khả năng thực hiện các yêu cầu tới máy chủ mà không cần tải lại trang, cái gọi là công nghệ ajax. Chức năng cơ bản công việc của nó là post() và get() (có một cấp độ thậm chí còn thấp hơn, ajax(), nhưng chúng ta sẽ không xem xét nó):

    $.post(url, , , ) $.get(url, , , ) url - url mà yêu cầu sẽ được gửi tới. dữ liệu - dữ liệu sẽ được gửi đến máy chủ. Chúng phải được thể hiện trong một đối tượng, theo định dạng: (fName1:value1, fName2:value2, ...). gọi lại() - chức năng tùy chỉnh, sẽ được gọi sau khi máy chủ phản hồi. dataType - loại dữ liệu dự kiến ​​​​mà máy chủ sẽ gửi để đáp ứng yêu cầu (chi tiết).

    Hãy xem xét các ví dụ với lấy phương pháp, cách sử dụng phương pháp thứ hai cũng tương tự. Hãy thực hiện một yêu cầu ajax đơn giản: gửi một yêu cầu trống đến máy chủ và không xử lý phản hồi. Ví dụ: điều này có thể được sử dụng để đếm số lần con trỏ di chuột qua biểu ngữ (tín hiệu sẽ được gửi đến máy chủ cho mỗi lần di chuột).

    $.get("/plusOne.php" ) ;

    Bây giờ, hãy gửi dữ liệu đến máy chủ và xử lý nó. Javascript sẽ trông như thế này:

    // Một yêu cầu cho trang http://hostname/ajaxtest.php sẽ được gửi đến máy chủ và hai tham số sẽ được chỉ định. // Sau khi nhận được phản hồi từ máy chủ, hàm onAjaxSuccess sẽ được gọi, // hiển thị thông báo kèm theo dữ liệu do máy chủ gửi. $.get ( "/ajaxtest.php", ( param1: "param1", param2: 2 ) , onAjaxSuccess ) ; function onAjaxSuccess(data) ( // Tại đây chúng ta nhận dữ liệu được gửi từ máy chủ và hiển thị trên màn hình. cảnh báo (dữ liệu) ; )

    Trên máy chủ, việc xử lý một yêu cầu Ajax không khác gì xử lý một yêu cầu thông thường (như khi gọi trang chủđịa điểm):

    Do yêu cầu này, một dấu hiệu có nội dung “Tôi nhận được param1 = param1 và param2 = 2” sẽ xuất hiện trên trang

    Bằng cách sử dụng các phương thức này, bạn có thể yêu cầu XML, sau đó có thể được xử lý mà không gặp vấn đề gì bằng cách sử dụng các phương thức jQuery thông thường. Giả sử rằng trên máy chủ chúng ta có Trang tiếp theo tạo XML:

    Mục 1 Mục 2

    Bằng cách yêu cầu trang này bằng phương thức get hoặc post, dữ liệu nhận được có thể được xử lý dễ dàng:

    Load() .offset() và .position()

    Kết nối jQuery với trang web của bạn

    Để chức năng của thư viện jQuery có sẵn trên các trang trên trang web của bạn, bạn cần tải xuống tệp có thư viện trên trang web jquery chính thức (liên kết với văn bản “Tải xuống jQuery đã nén, sản xuất”; để tải xuống thư viện, bạn cần nhấp vào liên kết phím phải chuột và chọn "Save link as.."). Tệp kết quả sẽ cần phải được tải lên máy chủ nơi đặt trang web của bạn và tệp js này sẽ cần được kết nối với các trang của trang web:

    ~lt~script type="text/javascript" src="js/jquery.min.js"~gt~~lt~/script~gt~

    Bạn có thể tìm hiểu sự phức tạp của việc kết nối jQuery với một trang web.

    Chú thích

    Một số nội dung trong bài viết này được lấy từ bài viết “Truy vấn - Javascript thế hệ tiếp theo” trên tạp chí RSDN. Đây là một trong những bài viết đầu tiên về jQuery, nhờ đó mà mọi người có thể đã biết về thư viện này. số lớn nhất Lập trình viên nói tiếng Nga. Tuy nhiên, trên khoảnh khắc này, một số thông tin trong đó không còn phù hợp nữa.

    jQuery là một thư viện JavaScript tập trung vào sự tương tác của JavaScript, HTML và CSS.

    jQuery có thể làm gì

    • Truy cập bất kỳ phần tử DOM nào ( mô hình đối tượng document) và không chỉ xử lý mà còn thao tác chúng.
    • Làm việc với các sự kiện.
    • Thật dễ dàng để thực hiện các hiệu ứng hình ảnh khác nhau.
    • Làm việc với AJAX (rất công nghệ hữu ích, cho phép bạn liên lạc với máy chủ mà không cần tải lại trang, nhưng hiện tại chúng tôi sẽ không chạm vào nó).
    • Nó có số lượng lớn các plugin được thiết kế để tạo các thành phần giao diện người dùng.

    Làm thế nào nó hoạt động

    Trước tiên, bạn cần tải xuống thư viện từ trang web của nhà phát triển hoặc, nếu cần, giải nén nó và di chuyển nó (thư viện) vào cùng thư mục chứa các trang html của chúng tôi (đây là tùy chọn, nhưng địa chỉ cho tất cả các ví dụ tiếp theo sẽ được viết dựa trên cấu trúc này).

    Bây giờ chúng ta cần kết nối jQuery với trang html. Đối với điều này, như bạn nhớ, có một thẻ trong html , chịu trách nhiệm kết nối các tệp tập lệnh bên ngoài (). Hãy thêm thẻ này vào trang html (chúng tôi cũng đã kết nối trang script.js với các hàm js): * Hãy chú ý đến tên tệp. Thư viện jquery-1.2.6 được sử dụng ở đây, nhưng bạn có thể tải xuống phiên bản mới hơn, do đó, số liệu của bạn có thể khác.*

    Vì vậy, trong thư mục của chúng tôi, chúng tôi có một trang html, một trang có kiểu (style.css), một trang có các hàm js (script.js) và (jquery-1.2.6.js). Hãy làm ví dụ này (nhấp vào nút):

    jQuery Effects Show() Effect SlideDown() Effect Animate() Effect Hãy xem cách thực hiện điều này. Trên trang html chúng ta nên có ba hình chữ nhật (div) và ba nút: Hiệu ứng jQuery Hiệu ứng Show() Hiệu ứng SlideDown() Hiệu ứng Animate()

    Chúng tôi sẽ phát hành vẻ bề ngoài và làm cho hình chữ nhật trở nên vô hình bằng cách sử dụng . mã style.css:

    #kv1, #kv2, #kv3( chiều rộng: 80px; chiều cao: 100px; float: trái; nền: đỏ; lề: 5px; màu: trắng; hiển thị: không có; )

    Bây giờ điều thú vị nhất là trên trang script.js, chúng tôi viết mã của các hàm sẽ được kích hoạt khi các nút được nhấp vào:

    hàm addEffect1())( $("#kv1:hidden").show(); ) hàm addEffect2())( $("#kv2:hidden").slideDown("slow"); ) hàm addEffect3()) ( $( "#kv3:hidden").show().animate(( fontSize:"36px" ) , 3000); )

    Những chức năng này làm gì?

    Chức năng addEffect1() nhìn $ ("#kv1:ẩn") và hiểu rằng cô ấy cần tìm một phần tử có id="kv1" có thuộc tính ẩn. Tiếp theo cô nhìn thấy .trình diễn() và hiểu rằng phần tử được tìm thấy phải được hiển thị.

    Chức năng addEffect2() nhìn $ (ký hiệu đô la) và nhận ra đó là jQuery, sau đó cô ấy nhìn thấy ("#kv2:ẩn") và hiểu rằng cô ấy cần tìm một phần tử có id="kv2" có thuộc tính ẩn. Tiếp theo cô nhìn thấy .slideDown("chậm") và hiểu rằng phần tử tìm thấy phải được hiển thị chậm ("slow") từ trên xuống dưới (slideDown).

    Chức năng addEffect3() nhìn $ (ký hiệu đô la) và nhận ra đó là jQuery, sau đó cô ấy nhìn thấy ("#kv3:ẩn") và hiểu rằng cô ấy cần tìm một phần tử có id="kv3" có thuộc tính ẩn. Tiếp theo cô nhìn thấy .trình diễn() và hiểu rằng phần tử được tìm thấy phải được hiển thị. Sau đó cô ấy nhìn thấy .animate((fontSize:"36px") , 3000) và hiểu rằng kích thước phông chữ cần phải tăng lên 36 pixel trong 3 giây (3000) (fontSize:"36px")

    Đây là cách jQuery thực sự hoạt động. Hãy xem các hàm của chúng ta ngắn đến mức nào và tưởng tượng chúng sẽ như thế nào nếu chúng ta quyết định viết chúng bằng javascript thuần túy. jQuery thật tuyệt vời phải không? Về cách làm hiệu ứng đồ họa, hoạt ảnh, kéo và sắp xếp các đối tượng cũng như cách làm việc chung với thư viện này sẽ được thảo luận trong các bài học tiếp theo.

    Ở cuối bài học này tôi muốn nói về các khái niệm cơ bản của jQuery. Cú pháp toán tử jQuery có thể được biểu diễn đại khái như sau:

    Ở đâu bộ chọn- một yếu tố hoặc các yếu tố mà chúng ta sẽ làm điều gì đó.

    hoạt động- chính xác chúng ta sẽ làm gì với các phần tử đã chọn. Chúng ta có thể thêm bất kỳ hiệu ứng nào, kiểu css, thay đổi mã html, v.v. Bất kỳ sự kiện nào cũng có thể được liệt kê ở đây.

    thuộc tính hành động- nếu chúng được cung cấp bởi hành động.

    Hôm nay chỉ vậy thôi, bài tiếp theo chúng ta sẽ nghiên cứu về bộ chọn.