Bagaimana untuk melaksanakan fungsi penapisan dalam jquery

Fungsi penapisan dilaksanakan dalam jquery melalui pemilih penapis. Mengikut peraturan penapisan yang berbeza, pemilih penapis boleh dibahagikan kepada: 1. Pemilih penapis kandungan, yang boleh mendapatkan elemen berdasarkan kandungan teks dalam elemen atau ciri-ciri sub-elemen yang terkandung di dalamnya, dan kandungan teksnya boleh menjadi kabur sepenuhnya. atau dipadankan secara mutlak untuk kedudukan elemen; boleh diperolehi melalui ciri-ciri atribut objek dalam bentuk Elemen, seperti atribut yang didayakan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 3.6.0, komputer Dell G3.

Jquery melaksanakan fungsi penapisan melalui pelbagai pemilih penapis.

Tapis? Sudah tentu perlu menambah syarat penapis. Tambahkan syarat penapis melalui ":", seperti "$("div:first")" untuk mengembalikan elemen div pertama dalam koleksi elemen div, dan pertama ialah keadaan penapis.
Mengikut peraturan penapisan yang berbeza, pemilih penapis boleh dibahagikan kepada: pemilih penapis mudah, pemilih penapis kandungan, pemilih penapis keterlihatan, pemilih penapis atribut, pemilih penapis sub-elemen, pemilih penapis atribut objek bentuk Peranti dsb.

1) Pemilih penapis ringkas

Pemilih penapis memadankan elemen mengikut jenis peraturan penapisan tertentu Apabila ditulis, ia bermula dengan penapis mudah pemilih Pemilih penapis ialah jenis pemilihan penapis yang paling banyak digunakan

选择器	功能描述
first()或 :first	获取第一个元素
last()或 :last	获取最后一个元素
:not(selector)	获取除给定选择器外的所有元素
:even	获取所有索引值为偶数的元素，索引号从0开始
:odd	获取所有索引值为奇数的元素，索引号从0开始
:eq(index)	获取指定索引值的元素，索引号从0开始
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始
:lt(index)	获取所有小于给定索引值的元素，索引号从0开始
:header	获取所有标题类型的元素，如h1、h2… 元素集合
:animated	获取正在执行动画效果的元素

2) Pemilih penapis kandungan

Pemilih penapis kandungan adalah berdasarkan kandungan dalam elemen. Kandungan teks atau ciri sub-elemen yang terkandung digunakan untuk mendapatkan elemen, dan kandungan teksnya boleh menjadi kabur atau dipadankan secara mutlak untuk kedudukan elemen

选择器	功能描述
:contains(text)	获取包含给定文本的元素
:empty	获取所有不包含子元素或者文本的空元素
:has(selector)	获取含有选择器所匹配的元素
:parent	获取含有子元素或者文本的元素

3) Penapis keterlihatan

Pemilih penapis keterlihatan memperoleh elemen berdasarkan ciri sama ada elemen itu boleh dilihat atau tidak

选择器	功能描述
:hidden	获取所有不可见元素，或者type为hidden的元素
:visble	获取所有的可见元素

4) Penapis atribut

Penapis atribut memperoleh elemen berdasarkan atribut tertentu bagi elemen Elemen, seperti nombor ID atau nilai atribut padanan kandungan, bermula dengan "[" dan berakhir dengan "]"

选择器	功能描述
[attribute]	获取包含给定属性的元素
[attribute=value]	获取等于给定的属性是某个特定值的元素
[attribute!=value]	获取不等于给定的属性是某个特定值的元素
[attribute^=value]	获取给定的属性是以某些值开始的元素
[attribute$=value]	获取给定的属性是以某些值结束的元素
[attribute*=value]	获取给定的属性是以包含某些值的元素
[selector1][selector2][selectorN]	获取满足多个条件的符合属性的元素

5) Penapis sub-elemen

Semasa proses pembangunan halaman, anda mungkin menghadapi keperluan untuk menyerlahkan baris tertentu. Walaupun pemilih penapis asas ":eq(index)" boleh digunakan untuk memaparkan satu jadual, ia tidak dapat memenuhi keperluan pemilihan sejumlah besar data dan berbilang jadual. Untuk mencapai fungsi sedemikian, jQuery boleh mendapatkan elemen dalam semua elemen induk dengan mudah melalui pemilih penapis elemen anak.

选择器	功能描述
:nth-child(eq/even/odd/index)	获取每个父元素下的特定位置元素，索引号从1开始
:first-child	获取每个父元素下的第一子元素
:last-child	获取每个父元素下的最后一个子元素
:only-child	获取每个父元素下的仅有一个子元素

6) Penapis atribut objek bentuk

Pemilih penapis atribut objek borang memperoleh elemen melalui ciri atribut objek dalam bentuk, seperti didayakan , dilumpuhkan , diperiksa, atribut yang dipilih.

选择器	功能描述
:enabled	获取表单中所有属性为可用的元素
:disabled	获取表单中素有属性为不可用的元素
:checked	获取表单中所有被选中的元素
:selected	获取表单中所有被选中option的元素

7) Penapis borang

Memperkenalkan pemilih borang dalam pemilih jQuery, yang direka khas untuk borang, yang melaluinya anda boleh mencari objek borang dengan pantas pada halaman tersebut.

选择器	功能描述
:input	获取所有input、textarea、select
:text	获取所有单行文本框
:password	获取所有密码框
:radio	获取所有单选按钮
:checkbox	获取复选框
:submit	获取所有提交按钮
:image	获取所有图像域
:reset	获取所有重置按钮
:button	获取所有按钮
:file	获取所有文件域

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi penapisan dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!