Jump to content
×
×
  • Yeni Oluştur...

Weblep.Com'a Hoş Geldiniz !

Weblep.Com'da aradığınız herşeyin çok daha fazlasını bulabilirsiniz , forum slayt reklam alanının da ilerleyen tarihlerde içerikler yer almaya başlauyacaktır.

WebLep Hosting ve Tasarım

Weblep.Com'a Hoş Geldiniz !

Weblep.Com'da aradığınız herşeyin çok daha fazlasını bulabilirsiniz , forum slayt reklam alanının da ilerleyen tarihlerde içerikler yer almaya başlauyacaktır.

WebLep Hosting ve Tasarım

Weblep.Com'a Hoş Geldiniz !

Weblep.Com'da aradığınız herşeyin çok daha fazlasını bulabilirsiniz , forum slayt reklam alanının da ilerleyen tarihlerde içerikler yer almaya başlauyacaktır.

WebLep Hosting ve Tasarım

Weblep.Com'a Hoş Geldiniz !

Weblep.Com'da aradığınız herşeyin çok daha fazlasını bulabilirsiniz , forum slayt reklam alanının da ilerleyen tarihlerde içerikler yer almaya başlauyacaktır.

WebLep Hosting ve Tasarım

Weblep.Com'a Hoş Geldiniz !

Weblep.Com'da aradığınız herşeyin çok daha fazlasını bulabilirsiniz , forum slayt reklam alanının da ilerleyen tarihlerde içerikler yer almaya başlauyacaktır.

WebLep Hosting ve Tasarım

  • Bu Alana Reklam Verebilirsiniz
    Bu Alana Reklam Verebilirsiniz

Jquery Nedir? Jquery Kullanım Klavuzu

Konuyu değerlendir


myakn55
 Paylaş


Önerilen İletiler

Jquery Nedir? Jquery Kullanım Klavuzu
 Paylaş


  • Moderatör

jquery-1024x559.png

Jquery Nedir? – Nasıl Kullanılır?

Merhaba, bu yazımda jquery nedir ve jquery nasıl kullanılır sorularına cevaplar verecek, örneklerle açıklayacağım. Bundan sonra siteye düzenli olarak Php ve Javascript kategorilerinde olduğu gibi Jquery kategorisinde de yazılar ekleyecek ve seri halde tamamlamaya çalışacağım.

Jquery Nedir?

 

Jquery en basit tanımıyla bir Javascript kütüphanesidir. Piyasada pek çok kişi tarafından gerek kullanım kolaylığı, gerekse çalışma hızı yüzünden tercih edilir. Tabi ki ben de çok uzun zamandır jquery kullanırım hatta şöyle ki, javascript kullanımım daha azdır. Bunun en büyük sebebi yazım kolaylığı, jquery kodlarının daha kısa olması ve sayfalarda seo konusunda google abimizin jquery kütüphanesine bakışıdır.

Css ve Html ile yapılamayan bazı efektif işle de jquery ile yapılabiliyor. Gerçi bu yazıyı yazdığım tarihte artık css ve html ile de pek çok işi rahatlıkla yapabilirsiniz ancak jquery bu konularda bilgisi zayıf olan kişilere de ilaç niteliğinde bir kütüphanedir. İnternet explorer 6 ve diğer tarayıcı uyumsuzlukları için de farklı farklı çözümler bulunur. Yani çalışmayacağı alan yok diyebiliriz kısaca..

Jquery Nasıl Kullanılır?

Jquery kullanabilmek için kütüphaneyi sayfanıza bir şekilde dahil etmeniz gerekir. İsterseniz jquery.com adresinden çekebilir, isterseniz indirip kendi sunucunuzda barındırabilirsiniz. Ben genellikle sayfa açılış hızını düşürmemek adına jquery’nin sıkıştırılmış halini indirip kendi sunucuma yüklemeyi tercih ediyorum. Eğer jquery üzerinde değişiklik yapmak gibi bir düşünceniz yoksa siz de sıkıştırılmış dosya ile işlerinizi halledebilirsiniz. Değişiklik yapacaksanız sıkıştırılmamış dosyasını da kullanabilirsiniz.

Direk jquery.com sitesinden çekerek kullanalım

<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.min.js"></script>

şeklinde ekledik. Şu anki sürümü 3.3.1 olduğu için ben onu ekledim siz o an en güncel olan sürümü çekip kullanabilirsiniz.

Sunucumuza yükleyerek kullanalım;

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

şeklinde eklememiz gerekir. Şu an sunucumuzun ana dizininde bulunan js klasörü içine jquery-3.3.1.min.js dosyasını yükledik ve sayfamıza çağırdık.

Javascript kütüphaneleri ve kodlarının genelde sayfanızın </body> tagı ile </html> tagı arasına yani sayfanın sonuna koyulması tavsiye edilir. Bunun sebebi sayfa açılışı sırasında javascript dosya ve kütüphanelerinin yüklenmesinin beklenmemesi ve sayfanın düzgün görünerek açılmasının sağlanmasıdır.

Neyse, gelelim jquery’nin nasıl yazıldığına.

Jquery Nasıl Yazılır?

Jquery dosyasını sayfamıza çektik ve artık yazmaya hazırız. Jquery operatörleri $ ve jQuery’dir. Ama ben genelde $ operatörü ile yazıyorum.

Aşağıdaki örnek sayfa hazır hale geldiğinde jquery kodlarının çalışmasını sağlar;

<html>
<head></head>
<body>
.
.
.
</body>
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

// Sayfa Hazır olduğunda Çalış
$(document).ready(function(){
// Ekrana uyarı mesajı olarak Merhaba, Jquery çalıştı! mesajını yaz
alert("Merhaba, Jquery çalıştı!");
});

</script>
</html>

Yukarıdaki sayfayı çalıştırdığınızda ekranda “Merhaba, Jquery çalıştı!” mesajı çıkacaktır. Yukarıda da belirttiğim gibi sayfa hazır olduğunda çalıştırılmasını istediğimiz için  $(document).ready(function(){…}); fonksiyonunu kullandık.

Şimdide sayfada bulunan bir div elemanını seçerek işlem yapalım;

<html>
<head></head>
<body>
<div></div>
</body>
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

// Sayfa Hazır olduğunda Çalış
$(document).ready(function(){
$("div").text("Div nesnesinin içine bu metni yaz.");
});

</script>
</html>

Çıktı;

Div nesnesinin içine bu metni yaz.

Yukarıdaki sayfayı çalıştırdığınızda ekrandaki çıktı yukarıdaki gibi olacaktır.

Bu sayfa Jquery serimin ilk yazısı oldu. Bu yazıda Jquery Nedir? Jquery Nasıl Kullanılır sorularına kendimce cevap vermek istedim. Sonraki yazılarda kullanımı ve örnekleri detaylandırmayı hedefliyorum şayet bir aksilik olmazsa. Bu yazılık bu kadar, bir sonraki yazıda görüşmek üzere.

Technology is Real

Yorum bağlantısı
Şimdi Paylaş


Konu Altı Reklam 1
Konu Altı Reklam 2
  • İleti 0
  • Oluşturulma
  • Son yanıt

Bu Konudaki En İyi Paylaşımcı

Popüler Günler

Bu Konudaki En İyi Paylaşımcı

Popüler Günler

Konu Görselleri

Şimdi Konuya Katılın

Şimdi gönderebilir ve daha sonra kayıt olabilirsiniz. Bir hesabınız varsa, şimdi oturum açın .

Misafir
Konuyu yanıtla

×   Yapıştırdığınız içerik biçimlendirme içeriyor.   Biçimlendirmeyi Temizle

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Önceki içeriğiniz geri yüklendi.   Editör içeriğini temizle

×   You cannot paste images directly. Upload or insert images from URL.

 Paylaş


×
×
  • Yeni Oluştur...