با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش jQuery ، را دنبال می کنند. در این فصل تاکنون، بخشی را برای آشنایی با کاربرد و نحوه استفاده ی یک تابع پرکاربرد، اختصاص دادیم. در این بخش نیز، قصد داریم به مبحث آشنایی با فیلترها در jQuery یا jQuery Filters و متد ()filter در jQuery ، بپردازیم.
در فصل قبلی موارد بسیار کاربردی و مهمی از جمله آشنایی با توابع ()get و ()post در jQuery و کاربرد های آن را ارائه کردیم. همچنین در بخش قبلی این فصل نیز ، به موضوع کار با تابع ()noConflict در jQuery ، پرداختیم.
در ادامه ی فصل در این بخش، به مبحث آشنایی با فیلتر ها در jQuery یا jQuery Filters ، می پردازیم.
در jQuery ، از فیلترها،برای جستجوی عناصر خاص، استفاده می شود.
برای جستجوی موارد غیر حساس (case-insensitive) در جداول ، می توانید، از فیلتر جداول استفاده کنید.
مثال: در کادر جستجو بخشی از داده های یک فیلد از جدول را تایپ نمایید:
مثال: کد jQuery مثال بالا، بصورت زیر است:
1 2 3 4 5 6 7 8 9 10 | <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> |
شرح کامل مثال فوق:
ما از کدهای jQuery استفاده می کنیم. تا از طریق هر ردیف جدول به انتهای حلقه برسیم. تا بررسی کنیم، که آیا مقادیر متن برابر با مقدار فیلد ورودی وجود دارد. تابع toggle ، سطری را مخفی می کند. (display: none) که با جستجو مطابقت ندارد.
از تابع ()toLowerCase ، برای تبدیل متن جدول در زمان جستجو به حروف کوچک، استفاده می کنیم. تا از این طریق عباراتی که با عبارت جستجوی ما برابرند، اما حاوی حروف بزرگ هستند، از جستجو حذف نشوند.
مثال ۲: در کادر جستجو بخشی از داده های یک فیلد از جدول را تایپ نمایید:
در آخرین بخش از آموزش این فصل و آخرین بخش این دوره ، یکی دیگر از آموزشهای متفرقه در jQuery را، در مبحث آشنایی با فیلتر ها در jQuery یا jQuery Filters ، بررسی کردیم. امیدواریم که تمام آموزشهای این دوره، مورد توجه و استفاده ی شما قرار گرفته باشد.