programming php

Php có thể được sử dụng với jquery không?

Đôi khi, đối với những người mới bắt đầu hoặc thậm chí những người trong chúng ta đã làm việc này một thời gian, có thể khó biết cách sử dụng PHP và JavaScript cùng nhau để làm cho trang hoạt động chính xác. Tôi thường phải dừng lại và nhắc nhở bản thân về những điều cơ bản

HTML và JavaScript [bao gồm các thư viện JavaScript, chẳng hạn như jQuery hoặc Scriptaculous] là các ngôn ngữ phía máy khách. Điều này có nghĩa là trình duyệt chịu trách nhiệm thực thi mã HTML và JavaScript. Đây là lý do tại sao chúng ta phải kiểm tra các trang web của mình trong càng nhiều trình duyệt khác nhau càng tốt, bởi vì, vì trình duyệt phải thực thi HTML, JavaScript và CSS, nên mỗi trình duyệt có thể thực thi nó theo một cách khác nhau cho kết quả khác nhau

Mặt khác, PHP được thực thi trên máy chủ hoặc máy chủ trước khi trang được gửi tới trình duyệt. PHP chịu trách nhiệm lấy mọi thứ từ máy chủ, cho dù đó là cơ sở dữ liệu hay tệp và tạo và/hoặc phân phối mã HTML, JavaScript và/hoặc CSS thích hợp. Phần lớn mã HTML, JavaScript và CSS này được mã hóa cứng, có nghĩa là nó không thay đổi. Nhà phát triển tạo HTML, JavaScript và CSS giống như họ muốn, lưu nó vào một tệp và sau đó tải nó lên máy chủ. Máy chủ, khi được yêu cầu cho trang web đó, chỉ gửi trang như đã được nhà phát triển mã hóa tới trình duyệt

Tuy nhiên, khi chúng tôi cần làm cho trang động, nghĩa là thông tin cần thay đổi dựa trên đầu vào từ người dùng hoặc thời gian trong ngày mà tệp được yêu cầu hoặc vì nhiều lý do hoặc điều kiện khác, chúng tôi phải sử dụng ngôn ngữ kịch bản, chẳng hạn . PHP được sử dụng để tạo HTML, JavaScript và trong một số trường hợp, mã CSS. PHP thu thập và xử lý thông tin cần thiết để tạo trang web bằng HTML và JavaScript trước khi gửi trang web đã hoàn thành tới trình duyệt

Vì vậy, khi chúng tôi phát triển các trang web, chúng tôi có thể có sự kết hợp của HTML, JavaScript, CSS và PHP trong các trang của chúng tôi. Điều này đôi khi có thể gây nhầm lẫn. Hãy nhớ rằng, mã PHP được thực thi đầu tiên ở cấp độ máy chủ. Mã PHP tạo HTML, JavaScript và CSS để trình duyệt sử dụng. Nếu bạn cần sử dụng ngôn ngữ kịch bản, chẳng hạn như PHP, sau khi trang đã được tải vào trình duyệt, thì bạn phải làm mới trang hoặc sử dụng Ajax để yêu cầu xử lý thêm ở phía máy chủ

Chẳng hạn, một khi trang của tôi đã được gửi tới trình duyệt, nếu tôi cần một cái gì đó mới từ cơ sở dữ liệu, tôi phải làm mới trang hoặc sử dụng Ajax để ra ngoài và yêu cầu thông tin từ cơ sở dữ liệu qua máy chủ

Khi tôi lần đầu tiên bắt đầu sử dụng PHP và JavaScript cùng nhau, tôi thường quên rằng tôi có thể làm cho mã PHP tạo ra JavaScript. Vì vậy, ví dụ: nếu tôi có một nhóm các mục trong cơ sở dữ liệu và tôi cần một trình nghe jquery cho sự kiện nhấp chuột trên từng mục, tôi có thể truy vấn cơ sở dữ liệu để lấy danh sách của mình và sau đó tạo từng trình nghe trong một vòng lặp for. Có nhiều cách để kết hợp cả hai để làm cho các ứng dụng web của tôi năng động hơn

Khi quyết định xem tôi cần PHP hay JavaScript cho công việc, tôi tự hỏi liệu mình có thực sự cần bất cứ thứ gì từ máy chủ hay liệu mọi thứ có thể được cập nhật bằng JavaScript hay không. Thông thường, lý do duy nhất tôi cần quay lại máy chủ là để truy cập cơ sở dữ liệu hoặc một loại tệp khác. Thậm chí sau đó, đôi khi tôi có thể dự đoán những gì có thể cần thiết và đặt nó vào một div ẩn, sau đó sử dụng JavaScript [hoặc jQuery] để hiển thị div ẩn khi cần. Hầu hết mọi thứ khác có thể được thực hiện bằng JavaScript ở phía trình duyệt, điều này sẽ giúp mọi thứ đẹp hơn nhiều cho người dùng cuối

Sự kiện là các hành động thực thi một số mã JavaScript để tạo ra kết quả mong muốn. Chúng có thể là một số loại thao tác trên tài liệu hoặc một số phép tính nội bộ

Vì các trình duyệt khác nhau xử lý các sự kiện khác nhau nên cần rất nhiều nỗ lực để viết mã JavaScript tương thích với tất cả các trình duyệt. Chương này sẽ giúp bạn hiểu về xử lý sự kiện và khám phá các phương thức liên quan của jQuery có thể làm cho các tập lệnh tương thích trên các trình duyệt khác nhau. Bạn sẽ học cách làm việc với các sự kiện bàn phím và chuột. Các chủ đề xử lý sự kiện nâng cao như kéo và phím tắt cũng được thảo luận

Thực thi các chức năng khi trang đã được tải

Các ứng dụng AJAX sử dụng rộng rãi JavaScript để thao tác nội dung cũng như giao diện của các trang web. Các trang web phải tải DOM trước khi bất kỳ mã JavaScript nào cố gắng thực hiện bất kỳ sửa đổi nào như vậy trên trang web

Công thức này sẽ giải thích cách thực thi JavaScript sau khi nội dung đã được tải và DOM đã sẵn sàng

Sẵn sàng

Nhận một bản sao của phiên bản mới nhất của thư viện jQuery

Làm thế nào để làm nó

Tạo một tệp và đặt tên là

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

Để chỉ chạy bất kỳ mã JavaScript nào sau khi DOM đã tải xong, hãy viết mã đó giữa các dấu ngoặc nhọn của phương thức

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

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

jQuery đảm bảo rằng mã được viết bên trong

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

4 chỉ được thực thi sau khi DOM được tải đầy đủ. Điều này bao gồm cây tài liệu hoàn chỉnh chứa HTML, biểu định kiểu và các tập lệnh khác. Do đó, bạn có thể thao tác trên trang, đính kèm sự kiện và thực hiện các công việc khác. Lưu ý rằng

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

4 không chờ tải hình ảnh. Hình ảnh có thể được kiểm tra bằng phương pháp

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

7, được giải thích trong một công thức riêng trong chương này

Nếu không sử dụng

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

4, mã jQuery sẽ không chờ tải toàn bộ tài liệu. Thay vào đó, nó sẽ thực thi khi nó được tải trong trình duyệt. Điều này có thể gây ra lỗi nếu mã được viết cố gắng thao tác với bất kỳ HTML hoặc CSS nào chưa được tải

Chuyển một trình xử lý tới. Sẵn sàng[]

Trong mã ví dụ trước, chúng tôi đã sử dụng hàm ẩn danh với

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

4. Bạn cũng có thể chuyển một trình xử lý thay vì hàm ẩn danh. Nó có thể được thực hiện như sau

________số 8

Một phương pháp khác sử dụng. Sẵn sàng[]

Thay vì viết mã theo định dạng đã đề cập ở trên, chúng ta cũng có thể sử dụng một trong các biến thể được mô tả bên dưới để tìm hiểu khi nào DOM sẵn sàng

$[function []
{
}];

Hoặc

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

Nhiều. phương thức sẵn sàng []

Nếu có nhiều tệp tập lệnh trong ứng dụng của bạn, bạn có thể có một

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

4 cho mỗi tệp đó. jQuery sẽ chạy tất cả những thứ này sau khi tải DOM. Một tình huống ví dụ có thể xảy ra khi bạn đang sử dụng một số phần bổ trợ trên một trang và mỗi phần bổ trợ có một tệp

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

21 riêng biệt

Các yếu tố ràng buộc và bỏ ràng buộc

Công thức này sẽ trình bày cách bạn có thể đính kèm các sự kiện vào các phần tử DOM bằng phương pháp

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

22 và cách loại bỏ chúng bằng phương pháp

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

Sẵn sàng

Nhận bản sao mới nhất của thư viện jQuery để sử dụng với công thức này

Làm thế nào để làm nó

Tạo một tệp mới, trong thư mục có tên

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

24 và đặt tên là

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

Viết đánh dấu HTML để tạo một số thành phần HTML. Tạo một danh sách không có thứ tự với tên của một số quốc gia. Sau đó, tạo một hộp chọn chứa tên các châu lục như các tùy chọn. Cuối cùng, tạo một nút sẽ được sử dụng để xóa trình xử lý sự kiện khỏi hộp chọn
```
$[doSomething];
function doSomething[]
{
// DOM is ready now
}
```
2
Đã đến lúc thêm một số phép thuật jQuery. Đính kèm trình xử lý sự kiện
```
$[doSomething];
function doSomething[]
{
// DOM is ready now
}
```
26 để liệt kê các mục bằng phương pháp
```
$[doSomething];
function doSomething[]
{
// DOM is ready now
}
```
22, phương thức này sẽ đặt màu nền của mục được nhấp thành màu đỏ. Đính kèm trình xử lý sự kiện
```
$[doSomething];
function doSomething[]
{
// DOM is ready now
}
```
28 vào hộp chọn, hộp này sẽ hiển thị giá trị của mục đã chọn. Cuối cùng, thêm trình xử lý
```
$[doSomething];
function doSomething[]
{
// DOM is ready now
}
```
26 vào nút. Nhấp vào nút sẽ xóa trình xử lý sự kiện khỏi hộp chọn
```
    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];
```
2
Chạy tệp
```
$[doSomething];
function doSomething[]
{
// DOM is ready now
}
```
25 trong trình duyệt của bạn và nhấp vào một số mục trong danh sách. Màu nền của mỗi mục được nhấp vào sẽ chuyển sang màu đỏ. Bây giờ, hãy chọn một số giá trị từ hộp chọn và bạn sẽ thấy một hộp cảnh báo hiển thị giá trị đã chọn như trong ảnh chụp màn hình sau
Nhấp vào nút Hủy liên kết chọn hộp sẽ xóa .

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

jQuery sử dụng phương thức

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

22 để đính kèm các sự kiện JavaScript tiêu chuẩn vào các phần tử.

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

22 nhận hai tham số. Tham số đầu tiên là loại sự kiện để đính kèm. Nó được truyền ở định dạng chuỗi và các loại sự kiện như

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

26,

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

28,

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

26,

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

27,

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

28,

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

29, v.v. có thể được truyền cho nó. Tham số thứ hai là chức năng gọi lại, sẽ được thực thi khi sự kiện kích hoạt

Trong đoạn mã trước, chúng tôi đã sử dụng

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

22 cho các mục trong danh sách để đính kèm trình xử lý

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

26. Trong hàm gọi lại,

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

52 đề cập đến phần tử kích hoạt sự kiện. Sau đó, chúng tôi sử dụng phương pháp

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

53 để thay đổi màu nền của phần tử được nhấp vào

Tương tự, chúng tôi đã đính kèm sự kiện

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

28 vào hộp chọn bằng phương pháp

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

22. Hàm gọi lại sẽ được gọi mỗi khi giá trị của hộp chọn được thay đổi

Nút

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

56 cũng đã được đính kèm với sự kiện

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

26. Nhấp vào nút sẽ gọi. phương pháp

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

58. Phương thức này chấp nhận tên loại sự kiện và xóa sự kiện đó khỏi phần tử. Mã ví dụ của chúng tôi sẽ xóa sự kiện

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

28 khỏi hộp chọn. Do đó, việc thay đổi giá trị của hộp chọn sẽ không hiển thị thêm bất kỳ cảnh báo nào

Còn nữa

Ràng buộc nhiều sự kiện

Nhiều sự kiện cũng có thể được đính kèm bằng cách sử dụng. phương pháp

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

30. Đoạn mã sau đính kèm hai sự kiện

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

28 và

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

29 vào một hộp văn bản. Tập trung vào một hộp văn bản sẽ làm trống nó, trong khi lấy tiêu điểm ra khỏi hộp sẽ đưa một số văn bản vào đó

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

Mẹo

Lưu ý rằng chức năng này đã được thêm vào trong Phiên bản 1. 4 của jQuery. Vì vậy, hãy đảm bảo rằng bạn có phiên bản chính xác trước khi chạy mã này

Phương pháp phím tắt để ràng buộc

Thay vì sử dụng

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

22, các sự kiện có thể được đính kèm trực tiếp bằng cách sử dụng tên sự kiện tắt cho các phần tử. Ví dụ, có thể viết

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

34 thay vì sử dụng

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

Các sự kiện khác có thể được đính kèm tương tự

Kích hoạt sự kiện

Các sự kiện cũng có thể được kích hoạt từ mã. Đối với điều này, chúng ta phải chuyển tên sự kiện mà không có bất kỳ tham số nào

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

Đoạn mã trên sẽ thực thi sự kiện

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

27 của

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

37 khi nhấp vào

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

Các loại sự kiện phổ biến

Dưới đây là danh sách một số sự kiện phổ biến có thể được truyền cho các phương thức

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

30 và

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

Hủy liên kết tất cả các sự kiện khỏi một phần tử

Nếu không có tham số nào được truyền cho phương thức

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

23, nó sẽ xóa tất cả các trình xử lý sự kiện được liên kết với phần tử đã chỉ định

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

Thêm sự kiện vào các phần tử sẽ được tạo sau này

Phương thức

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

22 chỉ đính kèm các sự kiện vào những phần tử tồn tại trên một trang. Nếu bất kỳ phần tử mới nào được tạo phù hợp với tiêu chí của phương thức

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

22, chúng sẽ không có bất kỳ trình xử lý sự kiện nào

Làm thế nào để làm nó

Tạo một tệp mới trong thư mục

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

24 và đặt tên là

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

Viết HTML, tạo nút và DIV trên trang và tạo kiểu cho chúng một chút
```
$[doSomething];
function doSomething[]
{
// DOM is ready now
}
```
5

Đã đến lúc thêm gia vị cho mọi thứ với jQuery. Đính kèm sự kiện

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

26 vào nút. Nút này sẽ tạo các phần tử DIV mới và sẽ chèn chúng vào trang. Bây giờ hãy đính kèm trình xử lý sự kiện

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

26 vào DIV bằng phương pháp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

06. Nhấp vào DIV sẽ thay đổi CSS và HTML của nó

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

Chạy tệp
```
    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }
```
03 và nhấp vào DIV. Bạn sẽ thấy rằng HTML và CSS của nó đã thay đổi. Bây giờ hãy nhấp vào nút Tạo Mới Phần tử một vài lần để tạo một số . Nhấp vào bất kỳ phần tử DIV nào trong số này sẽ thay đổi giao diện của chúng. Một ảnh chụp màn hình điển hình sau một vài cú nhấp chuột sẽ trông giống như sau.

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

Nút

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

56 tạo các phần tử DIV mới và nối chúng vào phần thân của tài liệu. Bí mật nằm ở chức năng tiếp theo. Chúng tôi đã sử dụng phương pháp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

06 của jQuery để đính kèm một sự kiện khi nhấp vào phần tử DIV.

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

06 hoạt động chính xác như

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

30 để đính kèm các sự kiện chỉ với một điểm khác biệt chính. Trong đó

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

30 chỉ có thể thêm các sự kiện vào các phần tử hiện có trên một trang, thì

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

06 ghi nhớ sự kiện được đính kèm cho bộ chọn đó và áp dụng nó cho các phần tử phù hợp ngay cả khi chúng được tạo sau đó và sau đó được chèn vào một trang

Do đó, tất cả các phần tử DIV mới được tạo khi nhấp vào Tạo phần tử mới Element button also respond to the

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

26 event handler.

Xóa trình xử lý sự kiện bằng die[]

Phương pháp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

15 tương tự như phương pháp

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

58. Nó được sử dụng để xóa các trình xử lý sự kiện được đính kèm bằng phương pháp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

06. Tương tự như

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

58,

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

15 cũng có hai biến thể

Nếu nó được gọi mà không có tham số, tất cả các trình xử lý sự kiện sẽ bị xóa. Một biến thể khác chấp nhận tên loại sự kiện sẽ xóa sự kiện cụ thể đó

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

Sau đây là mã cho các biến thể khác sẽ chỉ xóa trình xử lý sự kiện đã chỉ định

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

Nếu một phần tử có nhiều hơn một trình xử lý sự kiện được đính kèm, đoạn mã trên sẽ chỉ xóa trình xử lý sự kiện

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

26 và sẽ giữ nguyên các phần tử khác

Xem thêm

Liên kết và hủy liên kết phần tử cung cấp thông tin cơ bản về cách thêm và xóa sự kiện khỏi phần tử.

Gửi biểu mẫu với jQuery

Chúng tôi biết rằng các nút

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

55 được sử dụng trong biểu mẫu HTML để gửi dữ liệu đến máy chủ. Ngoài các nút

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

55, JavaScript cũng cung cấp phương thức gửi có thể được sử dụng để gửi biểu mẫu

Trong công thức này, bạn sẽ tìm hiểu cách gửi biểu mẫu theo cách của jQuery và cũng sẽ tìm hiểu cách kiểm soát việc gửi biểu mẫu bằng cách sử dụng nút

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

Sẵn sàng

Tải thư viện jQuery để sử dụng với công thức này

Làm thế nào để làm nó

Tạo một tệp mới, đặt tên là

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

24 và lưu vào thư mục

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

Viết đoạn mã sau để tạo biểu mẫu có nút

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

56 [không phải nút

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

55]. Thêm một số mã jQuery sẽ được kích hoạt khi nhấp vào nút và sẽ gửi biểu mẫu

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

Chạy tệp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

24 và nhấp vào nút

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

56. Nó sẽ gửi biểu mẫu

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

Trong ví dụ này, chúng tôi đã đính kèm trình xử lý sự kiện

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

26 vào nút

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

56. Chức năng xử lý sự kiện sẽ thực thi khi nút được nhấp. Khi nhấp vào nút, phương thức

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

32 của jQuery được gọi trên biểu mẫu, biểu mẫu này sẽ gửi biểu mẫu. Tất cả các trình duyệt đều có phương thức gửi riêng để gửi biểu mẫu theo chương trình. jQuery đã gói chức năng này vào phương thức

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

32 của riêng nó

Còn nữa

Kiểm soát gửi biểu mẫu

Nếu một biểu mẫu có nút

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

55 thì chúng tôi có thể kiểm soát việc gửi biểu mẫu hay không. Trong trường hợp này, chúng tôi sẽ phải đính kèm một trình xử lý sự kiện vào biểu mẫu. Trình xử lý sự kiện này sẽ được thực thi khi nhấp vào nút

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

55 trên biểu mẫu cụ thể đó

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

Đoạn mã trên sẽ thực thi khi nhấp vào nút

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

55 trên biểu mẫu có ID

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

37. Nếu hàm xử lý trả về

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

38, biểu mẫu sẽ không được gửi. Điều này có thể khá thuận tiện để xác thực các biểu mẫu. Mã để xác thực giá trị biểu mẫu có thể được đặt trong hàm xử lý. Nếu các giá trị được xác thực, true có thể được trả về, sẽ gửi biểu mẫu. Trong trường hợp xác thực không thành công, có thể trả về false, điều này sẽ không cho phép gửi biểu mẫu

Một tùy chọn khác là sử dụng

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

39. Như tên gọi,

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

39 ngăn không cho sự kiện mặc định được thực thi. Nó là thuộc tính của đối tượng

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

Xem thêm

Các phần tử liên kết và hủy liên kết giải thích cách thêm và xóa các sự kiện khỏi các phần tử.

Kiểm tra hình ảnh bị thiếu

Nếu bạn đang hiển thị một số hình ảnh trong trình duyệt và không may một số hình ảnh bị thiếu, trình duyệt sẽ hiển thị một khoảng trống hoặc sẽ hiển thị một trình giữ chỗ có biểu tượng chữ thập. Điều này chắc chắn trông xấu xí và bạn chắc chắn sẽ muốn tránh nó. Sẽ không tốt sao nếu bạn có một phương pháp giúp bạn có thể tìm thấy những hình ảnh bị thiếu hoặc những hình ảnh không tải được?

Sau khi xem qua công thức này, bạn sẽ có thể phát hiện các hình ảnh bị thiếu và thay thế chúng bằng hình ảnh bạn chọn

Sẵn sàng

Nhận ba hoặc bốn hình ảnh từ máy tính của bạn. Bạn sẽ cần những thứ này với công thức này. Cũng giữ tệp jQuery tiện dụng. Tạo một hình ảnh khác bằng một chương trình như vẽ với dòng chữ "Không thể tải hình ảnh" được viết trên đó. Đây sẽ là trình giữ chỗ mặc định cho những hình ảnh không tải được

Làm thế nào để làm nó

Tạo một tệp mới trong thư mục

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

24 và đặt tên là

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

Đặt một DIV trong trang sẽ chứa đầy hình ảnh. Ngoài ra, hãy viết một số CSS để tạo kiểu cho DIV và hình ảnh
```
    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }
```
6
Viết mã jQuery để tạo một mảng tên hình ảnh. Cố ý đặt một số tên ngẫu nhiên của hình ảnh không tồn tại. Sau đó điền vào DIV bằng cách tạo các thẻ hình ảnh từ mảng này. Tiếp theo, liên kết trình xử lý sự kiện
```
    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }
```
44 với các phần tử hình ảnh
```
    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }
```
7
Chạy tệp
```
    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }
```
43 trong trình duyệt. Bạn sẽ thấy rằng hai hình ảnh cuối cùng không tồn tại đã được thay thế bằng một hình ảnh khác có nội dung Có thể không load image.

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

Trước tiên, chúng tôi sử dụng phương thức

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

46 của jQuery để lặp lại trong mảng chứa tên hình ảnh và điền vào DIV bằng cách tạo các thẻ

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

Sau đó, có một trình xử lý sự kiện

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

44 được đính kèm với các thẻ

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

47. Điều này được thực thi khi hình ảnh không tải được hoặc có thuộc tính

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

50 bị hỏng. Trình xử lý sự kiện cho phương thức

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

44 thay thế hình ảnh không tồn tại bằng một hình ảnh khác mà chúng tôi chọn. Trong trường hợp của chúng tôi, chúng tôi thay thế nó bằng một hình ảnh mà chúng tôi đã tạo và có nội dung Không thể tải hình ảnh .

Xem thêm

Các phần tử liên kết và hủy liên kết , giải thích các khái niệm cơ bản về cách thêm sự kiện.

Tạo chức năng chọn/bỏ chọn tất cả các hộp kiểm

Đây là một tính năng thường xuyên được sử dụng của các ứng dụng web. Một nhóm hộp kiểm tồn tại trên một trang, có thể được kiểm soát bằng một hộp kiểm duy nhất. Nhấp vào hộp kiểm chính sẽ chọn tất cả các hộp kiểm và bỏ chọn hộp kiểm đó sẽ bỏ chọn tất cả

Chúng tôi sẽ tạo chức năng chuyển đổi các hộp kiểm trong công thức này. Chúng ta cũng sẽ tìm hiểu cách lấy giá trị cho các phần tử được chọn bằng cách sử dụng bộ chọn của jQuery

Sẵn sàng

Đảm bảo rằng bạn đã có sẵn thư viện jQuery để sử dụng

Làm thế nào để làm nó

Tạo một tệp mới trong thư mục

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

24 và đặt tên là

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

Hãy để chúng tôi thiết kế trang đầu tiên. Tạo một danh sách không có thứ tự và áp dụng một số CSS cho nó. Mục đầu tiên trong danh sách này sẽ là một hộp kiểm sẽ hoạt động như một tay cầm để chuyển đổi các hộp kiểm khác. Sau đó tạo các mục khác trong danh sách. tên của mỗi cuốn sách có một hộp kiểm trước nó. Tất cả các hộp kiểm này có cùng tên lớp
```
    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }
```
54. Tạo một mục danh sách khác bao gồm một nút sẽ được sử dụng để hiển thị các sách đã chọn. Cuối cùng, tạo một mục danh sách cuối cùng và gán ID cho nó. Chúng tôi sẽ sử dụng nó để hiển thị tên sách đã chọn
```
    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }
```
8

Chạy tệp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

53 trong trình duyệt sẽ hiển thị màn hình sau

Để đưa trang này vào cuộc sống, hãy bao gồm thư viện jQuery và đính kèm các trình xử lý sự kiện vào các hộp kiểm. Trình xử lý sự kiện đầu tiên sẽ được đính kèm với hộp kiểm đầu tiên, sẽ đảm nhiệm việc chọn và bỏ chọn tất cả các hộp kiểm khác. Cái thứ hai sẽ được đính kèm với các hộp kiểm riêng lẻ. Nó sẽ chọn/bỏ chọn tay cầm chính tùy thuộc vào việc tất cả các hộp kiểm có được chọn hay không. Trình xử lý sự kiện cuối cùng dành cho nút
```
$[doSomething];
function doSomething[]
{
// DOM is ready now
}
```
56 sẽ hiển thị các giá trị được chọn bên dưới nó
```
    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }
```
9
Bây giờ, hãy làm mới trình duyệt của bạn và bắt đầu chơi với các hộp kiểm. Nhấp vào hộp kiểm Chuyển đổi tất cả sẽ chọn và bỏ chọn tất cả các hộp kiểm thay thế. Nhấp vào nút Nhận các giá trị đã chọn và danh sách được phân tách bằng dấu phẩy sẽ xuất hiện bên dưới nút hiển thị tên của tất cả sách đã chọn.

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

Khi nhấp vào hộp kiểm Chuyển đổi tất cả , chúng tôi sẽ kiểm tra xem hộp kiểm đó có được chọn hay không. Nếu nó được chọn, chúng tôi chọn tất cả các hộp kiểm khác có lớp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

54 bằng cách sử dụng bộ chọn lớp và đặt thuộc tính

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

58 của chúng thành true, sẽ chọn tất cả các hộp kiểm. Mặt khác, nếu nó không được chọn, chúng tôi sẽ xóa thuộc tính

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

58 khỏi tất cả các hộp kiểm khiến tất cả các thuộc tính này bị bỏ chọn.

Chúng ta sẽ phải quan tâm đến một vấn đề khác ở đây. Nếu tất cả các hộp kiểm được chọn và bất kỳ hộp kiểm nào trong số chúng bị bỏ chọn, thì hộp kiểm của trình xử lý cũng sẽ được bỏ chọn. Tương tự, nếu tất cả các hộp kiểm được chọn từng cái một, thì hộp kiểm của trình xử lý cũng sẽ được chọn. Đối với điều này, chúng tôi đính kèm một trình xử lý sự kiện khác vào tất cả các hộp kiểm có lớp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

54. Bộ chọn

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

61 chọn tất cả các phần tử có lớp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

54 và những phần tử cũng được chọn. Nếu độ dài của các phần tử được chọn bằng tổng số hộp kiểm, chúng tôi có thể kết luận rằng tất cả đều được chọn và do đó chúng tôi cũng chọn hộp kiểm trình xử lý

Nếu số lượng phần tử được chọn ít hơn tổng số hộp kiểm thì chúng tôi xóa thuộc tính

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

58 của hộp kiểm trình xử lý để bỏ chọn nó

Còn nữa

Sử dụng bộ chọn

Trong ví dụ trước, chúng tôi đã sử dụng

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

61 để chọn tất cả các hộp kiểm có lớp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

54 và được chọn.

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

66 là bộ chọn được sử dụng để lọc một tập hợp các phần tử. Dưới đây là các ví dụ minh họa cách nó có thể được sử dụng để lọc các phần tử

$[function []
{
}];

Đoạn mã trên sẽ chọn DIV đầu tiên trên trang và sẽ thêm trình xử lý sự kiện

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

26 vào đó

$[function []
{
}];

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

68 là viết tắt của lớn hơn. Nó chấp nhận chỉ mục dựa trên 0 và khớp với các phần tử có chỉ mục lớn hơn chỉ mục được chỉ định. Nếu một trang có 5 phần tử p thì ví dụ trên sẽ ẩn p số 3 và 4. Hãy nhớ rằng chỉ mục dựa trên 0

Bạn có thể đọc về tất cả các bộ chọn trên trang web jQuery tại URL này. http. //api. jquery. com/danh mục/bộ chọn/

Chụp các sự kiện chuột

jQuery có thể được sử dụng để xác định vị trí của con trỏ chuột trên màn hình. Công thức này giải thích kỹ thuật lấy vị trí con trỏ chuột trên màn hình. Bạn sẽ học cách tạo chú giải công cụ sẽ xuất hiện ở vị trí con trỏ chuột hiện tại trên một phần tử cụ thể

Sẵn sàng

Giữ tệp jQuery sẵn sàng để sử dụng với công thức này

Làm thế nào để làm nó

Mở một tệp mới trong trình soạn thảo văn bản của bạn và lưu nó vào thư mục

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

24 với tên

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

Tạo DIV với ID

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

71 và

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

72 được đặt thành

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

73. DIV này sẽ được hiển thị dưới dạng tooltip. Tạo thêm ba phần tử DIV và gán lớp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

74 cho DIV đầu tiên và cuối cùng. Viết các kiểu CSS cho các phần tử DIV. DIV sẽ được hiển thị dưới dạng chú giải công cụ phải có

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

75 được đặt thành

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

$[function []
{
}];

Viết mã jQuery sẽ hiển thị chú giải công cụ khi di chuột qua DIV với lớp
```
    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }
```
74. Hai chức năng sẽ được yêu cầu cho việc này. Cái đầu tiên sẽ đảm nhiệm việc hiển thị và ẩn chú giải công cụ khi di chuột với hiệu ứng mờ dần. Hàm thứ hai sẽ thực sự đặt vị trí của chú giải công cụ và sẽ di chuyển nó khi con trỏ chuột di chuyển
```
$[function []
{
}];
```
3
Mở trình duyệt của bạn và chạy tệp
```
    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }
```
70. Di chuột qua phần tử DIV đầu tiên và cuối cùng sẽ hiển thị chú giải công cụ có hiệu ứng mờ dần. Chú giải công cụ cũng sẽ đi theo con trỏ chuột khi nó di chuyển

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

Chúng tôi đã sử dụng phương pháp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

79 trên các phần tử DIV để hiển thị và ẩn chú giải công cụ. Phương thức này gắn hai trình xử lý sự kiện vào phần tử đã chỉ định. Trình xử lý sự kiện đầu tiên được thực thi khi con trỏ chuột đi vào phần tử và phần tử thứ hai thực thi khi con trỏ chuột rời khỏi phần tử đó. Chúng tôi đã sử dụng phương pháp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

80 để hiển thị chú giải công cụ khi con trỏ chuột vào DIV và phương pháp

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

81 để ẩn DIV ngay khi con trỏ chuột rời khỏi nó

Điều quan trọng nhất bây giờ là đặt tooltip ở vị trí con trỏ chuột. Đối với điều này, chúng tôi đã đính kèm một trình xử lý sự kiện

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

50 trên DIV. Đúng như tên gọi, chức năng xử lý sẽ thực thi khi con trỏ chuột di chuyển qua DIV. jQuery cung cấp một đối tượng sự kiện cho hàm xử lý, sử dụng chức năng này chúng ta có thể lấy vị trí con trỏ chuột hiện tại. Thuộc tính

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

83 của sự kiện cho chúng ta vị trí con trỏ so với góc bên trái của tài liệu. Tương tự, thuộc tính

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

84 lấy vị trí con trỏ chuột so với đầu cửa sổ

Bây giờ chúng tôi có tọa độ con trỏ chuột với chúng tôi. Sau đó, chúng tôi gán giá trị của

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

83 và

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

84 cho các thuộc tính CSS

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

87 và

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

88 của chú giải công cụ DIV tương ứng. Giá trị 5 đã được thêm vào mỗi giá trị để tránh con trỏ ẩn một phần của chú giải công cụ

Tạo phím tắt

Điều hướng bàn phím là phổ biến trong các ứng dụng dựa trên cửa sổ. Điều này rất tiện dụng cho những người thích điều khiển bàn phím hơn điều khiển chuột. Các phím tắt cũng có thể được tạo trong các ứng dụng web nhưng chúng khó thực hiện do không thống nhất giữa các trình duyệt

Chúng tôi sẽ tạo một ví dụ đơn giản trong công thức này để cung cấp cho bạn hiểu biết cơ bản về cách triển khai các phím tắt. Bạn sẽ có thể tạo các phím tắt của riêng mình để sử dụng trong các ứng dụng web của mình

Sẵn sàng

Tải thư viện jQuery để sử dụng với công thức này

Làm thế nào để làm nó

Tạo một tệp mới có tên là

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

89 và lưu nó trong thư mục

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

Trong phần thân của HTML, hãy tạo hai phần tử DIV và trong phần
```
    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }
```
91, hãy viết một số CSS để áp dụng các kiểu cho các phần tử DIV này
```
$[function []
{
}];
```
4
Viết mã jQuery sẽ tạo phím tắt để chuyển đổi các phần tử DIV này. Trình xử lý sự kiện
```
    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];
```
27 sẽ được sử dụng để thực hiện hành vi này. Nó sẽ kiểm tra các phím được nhấn và sau đó thực hiện các hành động tương ứng. Ba phím tắt sẽ được tạo. Nhấn Alt + S sẽ chuyển đổi DIV đầu tiên. Alt + G sẽ chuyển đổi DIV thứ hai. Nhấn Alt + B sẽ chuyển cả hai phần tử DIV lại với nhau.
Một trình xử lý khác
```
    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];
```
26 sẽ được sử dụng để đặt lại các biến cần thiết
```
$[function []
{
}];
```
5
Mở trình duyệt của bạn và chạy tệp
```
    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }
```
89. Hãy thử nhấn các phím tắt mà chúng tôi vừa tạo. Bạn sẽ thấy rằng các phần tử DIV sẽ chuyển đổi với hiệu ứng trượt

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

Để có thể tạo tổ hợp phím tắt, trước tiên chúng ta cần tìm xem tổ hợp phím nào đã được nhấn. Các trình duyệt khác nhau có phương pháp xác định giá trị của phím được nhấn riêng. jQuery bình thường hóa cách thông tin này có thể được truy xuất trên các trình duyệt. Một đối tượng

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

41 có sẵn cho các chức năng xử lý. Đối tượng

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

41 này có thuộc tính

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

97 cung cấp mã của phím được nhấn. Phím Alt có giá trị 18.

Các phím tắt trong công thức này sử dụng kết hợp Alt và các phím khác. Chúng tôi bắt đầu bằng cách khai báo một biến toàn cục

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

98 với giá trị được đặt thành

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

38. Sau đó, có hai sự kiện được gắn vào trang.

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

27 sẽ thực thi khi một phím ở trạng thái được nhấn và

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

26 khi một phím được nhả ra. Bất cứ khi nào nhấn Alt , sự kiện

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

27 sẽ đặt giá trị của nó thành true. Khi được giải phóng, nó sẽ được đặt lại thành

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

38 bởi chức năng xử lý

    $[document].ready[function [] {
      // code written here will run only after the DOM has loaded
    }];

26.

Tiếp theo là câu lệnh

$[function []
{
}];

05, câu lệnh này sẽ đánh giá thành giá trị

$[function []
{
}];

06 nếu nhấn phím Alt . Nếu Alt được nhấn và một phím khác được nhấn cùng với nó, trường hợp

$[function []
{
}];

07 sẽ kiểm tra giá trị của khóa và sẽ thực thi trường hợp

$[function []
{
}];

07 tương ứng.

Giá trị của khóa S là 83. Vì vậy, nhấn S cùng với Alt sẽ chọn DIV đầu tiên và sẽ . Tương tự, Alt + G sẽ chuyển đổi DIV thứ hai và Alt + B .

Ghi chú

Lưu ý trả về giá trị sai trong từng trường hợp của câu lệnh switch. Trả về false là cần thiết để ghi đè hành vi mặc định của trình duyệt. Nếu không trả về false, nhấn phím Alt sẽ kích hoạt menu của trình duyệt.

Còn nữa

Danh sách mã khóa thông dụng

Một danh sách các mã quan trọng có thể được tìm thấy tại http. //goo. gl/v2Fk

Xem thêm

Các phần tử liên kết và hủy liên kết trong chương này giải thích cách đính kèm các sự kiện vào các phần tử.

Hiển thị văn bản do người dùng chọn

Chắc hẳn bạn đã xem WYSIWYG [ Những gì bạn thấy là những gì bạn nhận được] editors in web applications, which allow you to select some text using the mouse or keyboard and then format it [like making it bold, changing its color, and so on].

Công thức này sẽ hướng dẫn bạn cách truy xuất văn bản được người dùng chọn và thực hiện một số định dạng cơ bản trên văn bản đó

Sẵn sàng

Chuẩn bị thư viện jQuery

Làm thế nào để làm nó

Tạo một tệp có tên

$[function []
{
}];

10 trong thư mục

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

24 của bạn

Tạo bốn nút trong đó ba nút đầu tiên sẽ được sử dụng để làm cho văn bản in đậm, in nghiêng và gạch chân tương ứng. Sau đó tạo một vùng văn bản với một số văn bản trong đó. Và cuối cùng, nhập đoạn văn sẽ được sử dụng để hiển thị HTML đã định dạng
Nút cuối cùng sẽ lấy giá trị của textarea và sẽ chèn nó vào đoạn văn
```
$[function []
{
}];
```
6
Bao gồm thư viện jQuery và viết hàm JavaScript sẽ lấy vị trí bắt đầu và kết thúc của văn bản đã chọn
```
$[function []
{
}];
```
7
Tiếp theo, viết mã cho nút Áp dụng HTML nút này sẽ chỉ lấy văn bản từ vùng văn bản và chèn vào đoạn văn.
```
$[function []
{
}];
```
8
Hãy viết mã ba nút đầu tiên ngay bây giờ. Chúng tôi sẽ liên kết sự kiện nhấp chuột với ba nút. Khi nhấp vào mỗi nút, vị trí của văn bản đã chọn sẽ được truy xuất và nó sẽ được đặt trong các thẻ HTML tùy thuộc vào nút nào được nhấp
```
$[function []
{
}];
```
9
Lưu mã, khởi động trình duyệt của bạn và trỏ mã vào tệp. Chọn một số văn bản bằng chuột và nhấp vào bất kỳ nút nào. Bạn sẽ thấy rằng văn bản đã chọn đã được đính kèm với các thẻ HTML tương ứng. Nếu bạn bấm vào nút thứ hai [ u ], văn bản đã chọn sẽ được đặt trong các thẻ HTML
```
$[function []
{
}];
```
12 và
```
$[function []
{
}];
```
13.
Bây giờ hãy nhấp vào nút Áp dụng HTML . Bạn sẽ có thể xem văn bản được định dạng của vùng văn bản ở định dạng HTML bên trong đoạn văn, như trong ảnh chụp màn hình sau.

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

Khi nhấp vào nút, trước tiên chúng tôi nhận được vị trí bắt đầu và kết thúc của văn bản đã chọn bằng hàm

$[function []
{
}];

$[function []
{
}];

15. Việc xác định giá trị này hơi phức tạp vì các trình duyệt khác nhau có các phương pháp khác nhau để xử lý các lựa chọn. Internet Explorer sử dụng

$[function []
{
}];

16, đại diện cho một tập hợp con các tài liệu, trong khi Mozilla và các trình duyệt tương tự sử dụng

$[function []
{
}];

IE có một loạt các đối tượng sử dụng mà chúng tôi có thể xác định văn bản nào đã được chọn và vị trí bắt đầu và kết thúc lựa chọn trong văn bản gốc. Đầu tiên chúng ta tạo một đối tượng phạm vi từ vùng chọn. Sau đó, chúng tôi tạo một bản sao của nó bằng phương pháp

$[function []
{
}];

18. Sau này, hai chức năng

$[function []
{
}];

19 và

$[function []
{
}];

20 được sử dụng trên phạm vi trùng lặp. Các phương pháp này sắp xếp các giá trị của văn bản gốc và lựa chọn

Khi điều này được thực hiện, chúng tôi so sánh các giá trị của phạm vi ban đầu và phạm vi trùng lặp để tìm ra vị trí bắt đầu. Sau đó, chúng tôi thêm độ dài của vùng chọn vào vị trí bắt đầu, vị trí này cho chúng tôi điểm đánh dấu vị trí kết thúc

Đối với các trình duyệt khác, việc nhận vị trí tương đối đơn giản. Vị trí bắt đầu và kết thúc của các lựa chọn trong vùng văn bản có thể được truy xuất bằng các thuộc tính

$[function []
{
}];

21 và

$[function []
{
}];

Khi chúng tôi nhận được cả hai giá trị này, chúng tôi tạo một đối tượng trong đó chúng tôi đặt cả hai giá trị này và trả lại đối tượng cho hàm gọi

Nếu giá trị của cả hai vị trí này bằng nhau, điều đó có nghĩa là không có văn bản nào được chọn. Trong trường hợp này, chúng tôi chỉ cần quay lại từ chức năng và không làm gì cả

Sau đó, chúng tôi xác định nút nào đã được nhấp. Giá trị của nút được nhấp sẽ được sử dụng để định dạng văn bản đã chọn. Sau đó, chúng tôi lưu trữ giá trị của textarea trong một biến cục bộ

$[function []
{
}];

Bây giờ đến phần thao tác thực tế diễn ra. Chúng tôi chia biến

$[function []
{
}];

23 thành ba phần. Phần đầu tiên chứa chuỗi từ đầu đến vị trí bắt đầu của vùng chọn. Phần thứ hai của chuỗi là văn bản được chọn thực tế của vùng văn bản phải được định dạng. Bây giờ chúng tôi đính kèm nó trong các thẻ HTML [_______925,

$[function []
{
}];

26 hoặc

$[function []
{
}];

12] theo nút được nhấp. Phần thứ ba và phần cuối cùng là từ nơi lựa chọn kết thúc đến cuối chuỗi

Để lấy chuỗi kết quả, bây giờ chúng ta có thể chỉ cần nối ba chuỗi này và đặt nó trở lại vùng văn bản. Vùng văn bản bây giờ sẽ có văn bản có văn bản đã chọn kèm theo trong các thẻ HTML. Để xác minh điều này, hãy nhấp vào nút Áp dụng HTML . Thao tác này sẽ lấy văn bản từ vùng văn bản và chèn nó dưới dạng HTML vào đoạn văn có ID

$[function []
{
}];

28.

Còn nữa

Phương pháp ngắn để nhận văn bản đã chọn

Có thể sử dụng một phương pháp khác để lấy văn bản đã chọn từ các phần tử khác, chẳng hạn như

$[function []
{
}];

29,

$[function []
{
}];

30, v.v. Điều này sẽ không đưa ra bất kỳ vị trí nào mà chỉ đơn giản là văn bản đã chọn. Lưu ý rằng phương pháp này sẽ không hoạt động đối với vùng văn bản của Mozilla và các trình duyệt tương tự nhưng nó sẽ hoạt động trong Internet Explorer đối với vùng văn bản cũng như các điều khiển khác

Sử dụng chức năng sau để lấy văn bản đã chọn

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

Kéo các phần tử trên một trang

Có nhiều plugin dựa trên JavaScript, jQuery và các thư viện khác cho phép người dùng triển khai chức năng kéo. Người dùng nhấn nút chuột trên một phần tử và di chuyển nó mà không thả nó ra. Phần tử được kéo cùng với con trỏ chuột. Quá trình kéo dừng lại sau khi thả phím chuột

Sau khi hoàn thành công thức này, bạn sẽ có thể tự triển khai tính năng kéo cho các phần tử. Công thức này sẽ chỉ cho bạn cách làm cho các thành phần trên trang có thể kéo được

Sẵn sàng

Tải thư viện jQuery để sử dụng với công thức này

Làm thế nào để làm nó

Tạo một tệp mới trong thư mục

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

24 và đặt tên là

$[function []
{
}];

Tạo một số thành phần DIV và gán lớp
```
$[function []
{
}];
```
33 để tùy chỉnh giao diện của chúng. Lớp này cũng sẽ được sử dụng để đính kèm các trình xử lý sự kiện vào DIV
```
$[doSomething];
function doSomething[]
{
// DOM is ready now
}
```
1
Trong mã jQuery, khai báo các biến sẽ giữ tọa độ của DIV được kéo và con trỏ chuột. Tiếp tục với trình xử lý sự kiện
```
$[function []
{
}];
```
34 để di chuyển chuột đến các phần tử với lớp
```
$[function []
{
}];
```
33
Chúng tôi đã đính kèm hai trình xử lý sự kiện. Đầu tiên là
```
$[doSomething];
function doSomething[]
{
// DOM is ready now
}
```
88, sẽ thực thi trong khi nút chuột ở trạng thái được nhấn trên DIV đích. Điều này sẽ nhận được tọa độ bên trái và trên cùng hiện tại của DIV đang được kéo và con trỏ chuột. Bây giờ liên kết phần tử
```
$[doSomething];
function doSomething[]
{
// DOM is ready now
}
```
50 với DIV hiện tại. Hàm
```
$[function []
{
}];
```
38 sẽ được gọi khi chuột di chuyển trong khi nút của nó được nhấn
Hàm
```
$[function []
{
}];
```
38 tính toán các giá trị mới cho phần trên cùng và bên trái của DIV bằng cách xác định chuyển động của chuột và vị trí hiện tại của DIV và áp dụng các thuộc tính này cho DIV. Điều này dẫn đến sự chuyển động của BHTGVN
Cuối cùng, liên kết sự kiện
```
$[doSomething];
function doSomething[]
{
// DOM is ready now
}
```
89 với tài liệu, sự kiện này sẽ ngừng kéo sau khi thả chuột
```
$[doSomething];
function doSomething[]
{
// DOM is ready now
}
```
2
Mở trình duyệt và chạy tệp
```
$[function []
{
}];
```
32. Bây giờ cả hai phần tử DIV sẽ có thể kéo được. Giờ đây, bạn sẽ có thể kéo bất kỳ phần tử DIV nào bằng cách nhấn nút chuột trên chúng và di chuyển chúng xung quanh

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

Các biến toàn cục

$[function []
{
}];

42 an d

$[function []
{
}];

43 sẽ được sử dụng để lưu các vị trí bên trái và trên cùng của con trỏ chuột và biến

$[function []
{
}];

$[function []
{
}];

45 và

$[function []
{
}];

46 sẽ lưu các tọa độ bên trái và trên cùng của DIV. Sau đó, chúng tôi đã đính kèm hai trình xử lý sự kiện vào DIV với lớp

$[function []
{
}];

33. Đầu tiên là

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

88, sẽ thực thi khi nút chuột ở trạng thái được nhấn trên DIV đích. Trong hàm này, kéo các vị trí bên trái và trên cùng của DIV và lưu trữ chúng trong các biến

$[function []
{
}];

49 và

$[function []
{
}];

46 tương ứng. Thứ hai, lấy các giá trị bên trái và trên cùng cho vị trí con trỏ chuột hiện tại từ đối tượng sự kiện và lưu chúng vào các biến

$[function []
{
}];

42 và

$[function []
{
}];

43. Bây giờ khi nhấn nút, hãy liên kết phần tử

$[doSomething];
function doSomething[]
{
// DOM is ready now
}

50 với DIV hiện tại. Hàm

$[function []
{
}];

38 sẽ được gọi khi con trỏ chuột di chuyển trong khi nút của nó được nhấn

Hàm

$[function []
{
}];

38 hiện tính toán các giá trị bên trái và trên cùng mới cho DIV được kéo. Để tính giá trị mới cho left, hãy lấy giá trị left cho DIV [

$[function []
{
}];

49] và thêm sự khác biệt ở vị trí chuột vào đó. Sự khác biệt về vị trí chuột có thể được tính bằng cách trừ giá trị bên trái trước đó cho con trỏ chuột khỏi giá trị bên trái hiện tại. Tương tự tính giá trị mới cho top

Sau khi cả hai giá trị này được tính toán, hãy sử dụng phương pháp

$[function []
{
}];

57 để áp dụng các giá trị này cho DIV đang được kéo. Đừng quên đặt vị trí là

    $[document].ready[doSomething];
    function doSomething[]
    {
      // write code here
    }

76. Nếu không có định vị tuyệt đối, DIV sẽ không thể di chuyển

Làm cách nào để sử dụng jQuery trong tệp PHP?

Cách sử dụng lệnh gọi jQuery Ajax trong PHP Script .

trước khi gửi. Khi chúng ta gửi yêu cầu đến máy chủ thì trước đó hàm beforeSend sẽ thực hiện

Hoàn chỉnh. Nếu yêu cầu được thực hiện thành công khi yêu cầu kết thúc

Dữ liệu. Giá trị dữ liệu [chuỗi] nào sẽ được gửi đến máy chủ

Tại sao jQuery được sử dụng trong PHP?

Mục đích của jQuery là giúp sử dụng JavaScript trên trang web của bạn dễ dàng hơn nhiều . jQuery đảm nhận nhiều tác vụ phổ biến yêu cầu nhiều dòng mã JavaScript để thực hiện và gói gọn chúng thành các phương thức mà bạn có thể gọi bằng một dòng mã.

Tôi có thể sử dụng PHP với JavaScript không?

JavaScript được sử dụng ở phía máy khách để kiểm tra và xác minh thông tin chi tiết về máy khách và PHP là phía máy chủ được sử dụng để tương tác với cơ sở dữ liệu . Trong PHP, HTML được sử dụng như một chuỗi trong mã. Để hiển thị nó cho trình duyệt, chúng tôi tạo mã JavaScript dưới dạng một chuỗi trong mã PHP.

Làm cách nào để viết jQuery trong thẻ PHP?

Chỉ cần đặt sau jquery .

Thực thi các chức năng khi trang đã được tải

Sẵn sàng

Làm thế nào để làm nó

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

Chuyển một trình xử lý tới. Sẵn sàng[]

Một phương pháp khác sử dụng. Sẵn sàng[]

Nhiều. phương thức sẵn sàng []

Các yếu tố ràng buộc và bỏ ràng buộc

Sẵn sàng

Làm thế nào để làm nó

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

Còn nữa

Ràng buộc nhiều sự kiện

Mẹo

Phương pháp phím tắt để ràng buộc

Kích hoạt sự kiện

Các loại sự kiện phổ biến

Hủy liên kết tất cả các sự kiện khỏi một phần tử

Thêm sự kiện vào các phần tử sẽ được tạo sau này

Làm thế nào để làm nó

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

Xóa trình xử lý sự kiện bằng die[]

Xem thêm

Gửi biểu mẫu với jQuery

Sẵn sàng

Làm thế nào để làm nó

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

Còn nữa

Kiểm soát gửi biểu mẫu

Xem thêm

Kiểm tra hình ảnh bị thiếu

Sẵn sàng

Làm thế nào để làm nó

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

Xem thêm

Tạo chức năng chọn/bỏ chọn tất cả các hộp kiểm

Sẵn sàng

Làm thế nào để làm nó

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

Còn nữa

Sử dụng bộ chọn

Chụp các sự kiện chuột

Sẵn sàng

Làm thế nào để làm nó

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

Tạo phím tắt

Sẵn sàng

Làm thế nào để làm nó

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

Ghi chú

Còn nữa

Danh sách mã khóa thông dụng

Xem thêm

Hiển thị văn bản do người dùng chọn

Sẵn sàng

Làm thế nào để làm nó

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

Còn nữa

Phương pháp ngắn để nhận văn bản đã chọn

Kéo các phần tử trên một trang

Sẵn sàng

Làm thế nào để làm nó

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

Làm cách nào để sử dụng jQuery trong tệp PHP?

Tại sao jQuery được sử dụng trong PHP?

Tôi có thể sử dụng PHP với JavaScript không?

Làm cách nào để viết jQuery trong thẻ PHP?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề