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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
