jQuery’deki kullanışlı filtreler parametre filtreleridir. Regular Expression gibi kullanaiblirsiniz ve Reqular Expression gibi karmaşık bir yapıya sahip olmak yerine çok basit bir yapıya sahiptirler.
Jquery ile parametre filtrelerin kullanımı
Jquery’de parametre filtre kullanımına ait örnekleri alttaki kodda görebilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></ script> <script type="text/javascript"> $(document).ready(function() { $("[target]").css({ background: 'cyan' }); $("[src$=png]").css({ height: '250px' }); $("[target=ortam]").css({ color: 'white' }); $("[target^=blog]").css({ color: 'yellow' }); $("[target*=alternatif]").css({ background: 'gray' }); }); </ script> </head> <body> <a href="http://www.google.com">link1</a> <br /> <a href="http://www.muratoner.net" target="ortam">link2</a><br /> <a href="http://www.hotmail.com" target="ortam">link3</a><br /> <a href="http://www.facebook.com" target="blog">link4</a><br /> <a href="http://www.facebook.com.tr" target="blogalternatif">link5</a> </body> </html> |
Sonuç
Parametrik filtrelerde parametreyi köşeli parantezin içerisine yazıyoruz. $(“[target]”) şeklindeki bir kullanımla diyoruz ki parametresi target olan taga erişim sağlansın. (“[target*=alternatif]”) kullanımındaki src parametresinin yanı sıra yıldız kullanıldığı için src parametresinin değerinin her hangi bir yerinde alternatif kelimesi varsa o tag işleme konur. Yıldız yerine $ işareti kullanıldığında değerin içinde en sonda gelmesi gerekiyorö ^ işareti değerin başında veriyi istemektedir ve son olarak ! kullanılsaydı veri parametre değerinde olmaması gerekiyordu ki ancak o zaman o parametrenin bulunduğu taga erişim sağlanırdı.
Filtrelerle selektörleri de kombine edebiliriz. Bunun için kısa bir örnek hazırladım:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></ script> <script type="text/javascript"> $(document).ready(function () { $("td[id]").css({ background: 'green' }); }); </ script> </head> <body> <table> <tr> <th id="h1">1</th> <th id="h2">2</th> </tr> <tr> <td id="d1">icerik 1</td> <td id="d1">Icerik 2</td> </tr> </table> </body> </html> |
