bộ lọc mảng jQuery – ví dụ về bộ lọc dữ liệu jquery

Hướng dẫn bộ lọc mảng jQuery. Ở đây chúng ta thảo luận về cách giới thiệu, hoạt động của hàm filter () mảng jQuery và các ví dụ tương ứng.

Bạn đang xem : ví dụ về bộ lọc dữ liệu jquery

bộ lọc mảng jQuery

Giới thiệu về bộ lọc mảng jQuery

Hàm filter mảng jQuery () được sử dụng để tạo một mảng mới bằng cách lọc các phần tử mảng đã cho vượt qua hàm bộ lọc. Nó là một hàm tích hợp sẵn trong jQuery. Hàm filter () mảng jQuery điền vào tất cả các phần tử từ mảng theo giá trị tĩnh từ chỉ mục đầu đến cuối. Hàm này không chạy hàm kiểm tra các phần tử của mảng không có giá trị. Hàm lọc mảng () không thay đổi mảng ban đầu.

Cú pháp của hàm jQuery array filter ():

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

array.filter (function (currentValue, index, array), thisValue);

Thông số:

  • hàm (giá trị hiện tại, chỉ mục, mảng): Đây không phải là một tham số tùy chọn. Nó chỉ định hàm được thực thi như một hàm lọc trên các phần tử của mảng, nó xử lý từng phần tử của mảng. Hàm nhận ba đối số là currentValue, index và array. CurrentValue không phải là một tham số tùy chọn, nó chỉ định giá trị hiện tại của một phần tử. Chỉ mục là một tham số tùy chọn, nó chỉ định chỉ mục hiện tại của một phần tử. Mảng là một tham số tùy chọn, nó chỉ định phần tử hiện tại thuộc về mảng này.
  • thisValue: Đây là một tham số tùy chọn chỉ định giá trị được sử dụng làm giá trị này bằng cách chuyển cho hàm. Nếu thisValue không được chuyển, thì “không xác định” sẽ được chuyển cho giá trị này.

Giá trị trả lại:

Giá trị trả về của hàm này là một mảng có các phần tử từ mảng đã cho vượt qua hàm kiểm tra.

Hoạt động của hàm lọc mảng jQuery ()

  • Hàm filter mảng jQuery () chấp nhận hai tham số là hàm kiểm tra tham số đầu tiên và giá trị thứ hai là giá trị này.
  • Giả sử chúng ta có danh sách các số chẵn là “no = [50, 20, 64, 89]”, bây giờ chúng ta cần lọc ra các số chẵn.
  • Vì vậy, chúng ta có thể sử dụng hàm bộ lọc mảng () làm “no.filter (thậm chí)”, trong đó chẵn là tên của hàm để kiểm tra xem số có phải là số chẵn hay không.
  • Mảng trả về mới sẽ là [50, 20, 64].
Xem Thêm  Cách sao chép bảng từ cơ sở dữ liệu này sang cơ sở dữ liệu khác trong SQL Server - cách sao chép một bảng sql

Ví dụ về bộ lọc mảng jQuery

Dưới đây là các ví dụ được đề cập:

Ví dụ # 1

Ví dụ về hàm filter () mảng jQuery để lọc ra các dấu chuyển từ một mảng nhất định.

Mã:

& lt;! doctype html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; script src = "https://code.jquery.com/jquery-3.5.0.js" & gt; & lt; / script & gt;
& lt; title & gt; Đây là ví dụ cho hàm filter () mảng jQuery & lt; / title & gt;
& lt; phong cách & gt;
p {
màu: xanh lam;
}
div {
màu: xanh lá cây;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h3 & gt; Ví dụ cho hàm lọc mảng (): & lt; / h3 & gt;
& lt; nút onclick = "checkRes ()" & gt; Nhấn vào đây để nhận điểm vượt qua. & lt; / nút & gt;
& lt; p id = "p1" & gt; & lt; / p & gt;
& lt; div id = "p2" & gt; & lt; / div & gt;
& lt; script & gt;
var mark = [50, 78, 40, 89];
hàm getMarks (dấu)
{
return (dấu & gt; = 50);
}
function checkRes ()
{
var res = mark.filter (getMarks);
$ ("# p1") .text ("Dấu của một mảng đã cho trước hàm filter () là:" + dấu);
$ ("# p2") .text ("Dấu của một mảng mới sau hàm filter () là:" + res);
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Bộ lọc mảng jQuery 1

Khi chúng tôi nhấp vào nút, kết quả đầu ra là:

Bộ lọc mảng jQuery 2

Trong đoạn mã trên, mảng được tạo có chứa các điểm của học sinh. Tiếp theo, hàm filter () được sử dụng để tạo một mảng mới bằng cách lọc các dấu đi qua (dấu & gt; = 50) của một mảng được thực hiện bằng cách gọi hàm getMarks () bởi hàm filter ().

Ví dụ # 2

Ví dụ về hàm filter () mảng jQuery để lọc ra tên của các loại trái cây có độ dài lớn hơn hoặc bằng sáu từ mảng đã cho.

Mã:

& lt;! doctype html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; script src = "https://code.jquery.com/jquery-3.5.0.js" & gt; & lt; / script & gt;
& lt; title & gt; Đây là ví dụ cho hàm filter () mảng jQuery & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h3 & gt; Ví dụ cho hàm lọc mảng (): & lt; / h3 & gt;
& lt; nút onclick = "checkRes ()" & gt; Nhấp vào đây để nhận các loại quả có độ dài & gt; = 6. & lt; / button & gt;
& lt; script & gt;
var fruit = ["Apple", "Orange", "Banana", "Cherry", "Plums"];
function checkRes ()
{
var res = results.filter (trái cây = & gt; trái cây.length & gt; = 6);
alert ("Các dấu của một mảng nhất định trước hàm filter () là:" + results + "\ n Các dấu của một mảng mới sau hàm filter () là:" + res);
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Xem Thêm  Các phần tử ẩn / hiện trong JavaScript - javascript hiển thị phần tử ẩn

Bộ lọc mảng jQuery 3

Khi chúng tôi nhấp vào nút, kết quả đầu ra là:

name of fruit

Trong đoạn mã trên, mảng được tạo có chứa một số tên của các loại trái cây. Tiếp theo, hàm lọc mảng () được sử dụng để lọc ra tên của các quả có độ dài lớn hơn hoặc bằng sáu khỏi mảng là “fruit.filter (fruit = & gt; fruit.length & gt; = 6); “Và sẽ được hiển thị khi chúng ta nhấp vào nút, như chúng ta có thể thấy trong đầu ra.

Ví dụ # 3

Ví dụ về hàm filter () mảng jQuery để lọc ra các số chẵn có ở chỉ mục chẵn từ mảng đã cho.

Mã:

& lt;! doctype html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; script src = "https://code.jquery.com/jquery-3.5.0.js" & gt; & lt; / script & gt;
& lt; title & gt; Đây là ví dụ cho hàm filter () mảng jQuery & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; script & gt;
var array = [20, 12, 65, 45, 44, 87, 90];
hàm chẵn (phần tử, chỉ mục, mảng) {
return (phần tử% 2 == 0 & amp; & amp; index% 2 == 0);
}
hàm fun ()
{
res = array.filter (thậm chí)
$ ("# d1"). html ("Các phần tử của một mảng trước hàm grep () là:" + array);
$ ("# d2"). html ("Các phần tử của mảng sau hàm grep () là:" + res);
}
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h3 & gt; Ví dụ cho hàm lọc mảng (): & lt; / h3 & gt;
& lt; nút onclick = "fun ()" id = "test" & gt; Áp dụng hàm filter () & lt; / button & gt;
& lt; br & gt;
& lt; div id = "d1" & gt; & lt; / div & gt;
& lt; div id = "d2" & gt; & lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Bộ lọc mảng jQuery 5

Khi chúng tôi nhấp vào nút, kết quả đầu ra là:

số chẵn

Trong đoạn mã trên, mảng được tạo chứa một số số. Tiếp theo, hàm filter () được sử dụng với phần tử và chỉ mục để tạo một mảng mới bằng cách lọc các số chẵn có ở chỉ mục chẵn từ mảng và sẽ được hiển thị khi chúng ta nhấp vào nút, như chúng ta có thể thấy trong đầu ra .

Kết luận

Hàm lọc mảng jQuery () là một hàm tích hợp, được sử dụng để tạo một mảng mới bằng cách lọc các phần tử mảng đã cho vượt qua hàm bộ lọc.

Các bài báo được đề xuất

Đây là hướng dẫn về bộ lọc mảng jQuery. Ở đây chúng ta thảo luận về cách giới thiệu, hoạt động của hàm filter () mảng jQuery và các ví dụ tương ứng. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

Xem Thêm  Toán tử SQL VÀ, HOẶC, KHÔNG PHẢI - mệnh đề where với và

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề ví dụ về bộ lọc dữ liệu jquery

V02.Truy Xuất Dữ Liệu Từ Sql Server Đưa vào Dictionary

alt

  • Tác giả: Phan Thuong Chi
  • Ngày đăng: 2022-07-11
  • Đánh giá: 4 ⭐ ( 9457 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: playlist:https://www.youtube.com/playlist?list=PL7sbj-lq89aRwSAXG7BOwbwOdQ5w5nz5a
    Bài học
    Từ Python kết nối database dbStudent trong Sql Server truy cập table tbClass đưa dữ liệu vào biến kiểu Dictionary
    ví dụ
    thực hành
    Python GUI and SqlServer

Tự làm bộ lọc nội dung với Animate.css và jQuery – Init HTML

  • Tác giả: www.inithtml.com
  • Đánh giá: 5 ⭐ ( 5117 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này hướng dẫn tự làm bộ lọc nội dung đơn giản sử dụng jQuery với rất nhiều hiệu ứng từ Animate.css. Có thể…

Tham khảo jQuery

  • Tác giả: hocwebchuan.com
  • Đánh giá: 3 ⭐ ( 3085 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tham khảo jQuery giúp bạn củng cố thêm kiến thức và hiểu rõ hơn những gì bạn đã học – Học Web Chuẩn

JQuery: Bộ chọn, Phương thức và Truyền qua các ví dụ

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 5961 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu Trong bài đăng đầu tiên của tôi , tôi đã giới thiệu một số điều cơ bản trong jQuery: bộ chọn, DOM và cách duyệt qua các phương thức DOM (bằng phương thức eq () và find ()). Trong…

Hướng dẫn và ví dụ để sắp xếp và lọc dữ liệu theo màu

  • Tác giả: support.microsoft.com
  • Đánh giá: 4 ⭐ ( 8709 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lọc và sắp xếp dữ liệu theo màu giúp cho việc phân tích dữ liệu dễ dàng hơn, đồng thời giúp hiện các điểm nổi bật và xu hướng dữ liệu trong nháy mắt.

Lọc các phần tử thông qua bộ chọn

  • Tác giả: hiepsiit.net
  • Đánh giá: 3 ⭐ ( 8467 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài giảng JQuery

  • Tác giả: monhoc.vn
  • Đánh giá: 5 ⭐ ( 7594 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu về JQuery  JQuery Selector  JQuery Filter  Thay đổi nội dung document  Xử lý sự kiện  Hiệu ứng & hoạt ảnh

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình