Jquery extend ile jquery’e kendi fonksiyonlarımızı ekleyebilir böylelikle Jquery’i genişletebiliriz makale devamında jquery genişletmenin nasıl yapıldığını örneklerle anlatmaya çalıştık.
İçerik
göster
Jquery extend ile kendi fonksiyonlarımızı tanımlama
extend() fonksiyonu kullanılan nesneyi geliştirmektedir. Aşağıdaki örnekte jQuery nesnesi geliştirilmiştir.
Html Kodu
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></ script> <script type="text/javascript"> $(function() { $.extend({ sayi: function() { return Math.random(); } }); alert($.sayi()); }); </ script> <title></title> </head> <body> </body> </html> |
Sonuç
Şimdi ise jquery’e kendi fonksiyonlarımızı tanımlayıp jquery’i genişletelim bu örneğimizde jquery seçici ile seçilen elemanları kirmizi diyerek kirmizi renge boyuyor olacağız veya mavi, yesil gibi jquery’i genişletmek için uyguladığımız fonksiyonları kullanarak kolayca renk değişimlilerini sağlamış olacağız.
Html Kodu
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></ script> <script type="text/javascript"> $(function() { $.fn.extend({ kirmizi: function() { return this.each(function () { this.style.color = "red"; }); }, mavi : function() { return this.each(function() { this.style.color = "blue"; }); }, yesil: function() { return this.each(function() { this.style.color = "green"; }); } }); $("#List li:lt(3)").kirmizi(); $("#List li:gt(2)").mavi(); $("#List li:eq(2)").yesil(); }); </ script> <title></title> </head> <body> <ul id="List"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html> |
