JQuery Tutorial Part 1 - How to use? What is Selectors? (Turkish Tutorial)

image source

jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto ? Write less, do more, jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code.

What Will I Learn? (Neler Öğreneceğiz?)

What is JQuery? (JQuery nedir?)
How to use JQuery? (JQuery nasıl kullanılır?)
What is Selector? (Seçici nedir?)
Why should Document.ready be written? (Document.ready neden yazılmalıdır?)

Requirements (Gereksinimler)

JQuery library file (JQuery kütüphane dosyası)
Intermediate html, js knowledge (Orta seviye html, js bilgisi)
Visual Studio Code or any Text Editor (Visual Studio Code veya herhangi bir metin editörü)

Difficulty (Zorluk Seviyesi)

Basic (Temel)

Tutorial Contents

Nedir bu JQuery?

JQuery en kısa tanımıyla bir javascript kütühanesidir. John Resig tarafından 2006 yılında geliştirilmiş ve şuan JQuery ekibi tarafından geliştirilmeye devam etmektedir. Open source (açık kaynak) olarak ücretsiz bir şekilde sunulmaktadır.

Neler yapılabilir bu JQuery ile?

JQuery kendi içerisinde birçok hazır metod bulundurmaktadır ve biz de bu metodları kullanarak istediğimiz html elemanlarına istediğimiz şekilde görsel efektler katabilir ve değişik etkileşimlerde bulunmalarını sağlayabiliriz. Microsoft ve Google gibi dev firmalar da JQuery kütüphanesini desteklemektedir.

Nasıl indirilir ve entegre edilir?

JQuery kütüphanesini projemize dahil edebilmenin 2 farklı yolu vardır.

(1) JQuery dosyamızı indirebilir ve kendi sunucumuzda barındırabiliriz bu şekilde offline olarakta üzerinde çalışabiliriz.
JQuery resmi sitesinden son sürümü indirmek için buraya tıklayın.

(2) Dosyayı indirmeden Google, Microsoftun veya jsDelivr'ın sağladığı CDN (Content Delivery Network) linkleri üzerinden birini kullanarak bağlantı sağlayabiliriz. Aşağıda Google, Microsoft ve jsDelivr sunucuları üzerinden JQuery bağlantısı linkleri bulunmaktadır.

CDN linkleri :
-Google
-Microsof
-jsDelivr
Linklere tıkladığınızda en üst kısımlarda en son sürümü görebilir veya istediğiniz eski sürümleri alt taraflarda bulabilirsiniz, istediğiniz sürüme tıklarak açılan sayfanın linkini projenizdeki "script" çağırma tag'ı içerisindeki source bölümüne kopyalamanız yeterli olacaktır.

CDN olarak eklemenin avantajı ise artık günümüzde çoğu internet sayfası JQuery kütüphanesini kullanmaktadır. Web sitesine gelen ziyaretçilerin tarayıcılarının ön belleğinde JQuery kütüphanesi hazır olacak, bu da sayfamızın yüklenmesini hızlandıracaktır.

Visual Studio Code programını açıyoruz, isterseniz başka bir editör kullanabilirsiniz. Kolay olması ve Open Source olması nedeniyle VS Code programını seçtim. Buraya tıklayarak VS Code indirebilirsiniz.

Bir klasör oluşturuyoruz, içerisine Ders1 adında bir html uzantılı dosya oluşturuyoruz ve bu klasör içerisinde js adında bir klasör daha oluşturuyoruz, bunun içine indirmiş olduğumuz JQuery kütüphane dosyamızı atıyoruz. VS Code programını açtıktan sonra File -> Open Folder ve oluşturduğumuz projeyi ekliyoruz.

Projemize indirdiğimiz JQuery dosyasını dahil etmek için ilk satırı, CDN olarak eklemek içinse ikinci satırdaki gibi gibi yazabiliriz. Bu satırları head etiketi içerisine ekleyiniz.

<script src="js/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Serinin ilk dersi oluduğundan dolayı biraz ayrıntılı işleyeceğiz, devamında normal seviyede olacak.

Şimdi ilk örneğimizle bakalım.


<!DOCTYPE html>
<html>
    <head>
        <title>Jquery Dersleri</title>
        <script src="js/jquery-3.3.1.js"> </script>        
        <script>
            $(document).ready(function(){
                $("h1").click(function(){
                    (this).hide();
                });
            });                
        </script>
    </head>    
    <body>
        <h1>Jquery Derslerine hoşgeldiniz.</h1>
        <h1>Bu 1. Ders</h1>  
    </body>
</html>

Burada jquery dosyamızı tanımladıktan sonra "script" tagları içerisinde javascript kodlarımızı yazdık.

$("h1").click(function(){})

ile h1 etiketi bulunan bütün yazılara tıklanma eventini yani tıklama olayını tetiklemiş olduk.

$(this).hide();

kod parçacığında ki this anahtarı o an tıklanan yazıyı otomatik olarak algılamakta ve sadece tıklanan kısma etki etmektedir. hide() ile de saklama-gizleme işlemi yapılmaktadır.

Üstte görüldüğü gibi resim 3 parçadan oluyor, ilk parça kodun ilk çıktısı ve burada "Jquery Derslerine hoşgeldiniz." yazısına tıklanıyor bu "h1" tagları içerisinde olduğundan 2. kısımda gözüktüğü gibi bu yazı kayboluyor ve sonra "Bu 1. Ders" yazısında tıklanıyor ve 3. kısımda görüldüğü gibi bu kısımda kayboluyor. Bunların hepsini resimde gözüktüğü gibi (document).ready() içerisine şu kodları yazarak gerçekleştirdik.

$("h1").click(function(){
$(this).hide();
});

$(document).ready(function(){})

Bu parantez içerisine yazdığımız kodlar sayfamız tam olarak yüklendikten sonra çalışacak kodları barındırmaktadır, daha da açıklayacak olursak bu parantezler içerisine yazılmayan kodlar sayfa tam ready olmadan yani hazır olmadan çalışmaya çalışacak fakat sayfa yüklenmediği için etki edeceği elemanı bulamayacaktır ve bu yüzden etkisiz olacaktır. Basit bir örnekle açıklarsak;


 <!DOCTYPE html>
<html>
    <head>
        <title>Jquery Dersleri</title>
        <script src="js/jquery-3.3.1.js"> </script>        
        <script>
            $(document).ready(function(){
                $("h1").css('color', 'blue');
            });                
        </script> 
    </head>    
    <body>
        <h1>Jquery Derslerine hoşgeldiniz.</h1>
        <h1>Bu 1. Ders</h1>  
    </body>
</html>

Yazılmış olan h1 taglarının rengini blue değeri vererek mavi yaptık ve sayfamız ilk açıldığı anda aşağıdaki gibi oldu;

Sebebi gerekli kod parçacıklarını document ready metodları içerisine yazmamız ve sayfa tam yüklendikten sonra çalışması oldu fakat bunları direk yazmış olsaydık görseldeki gibi;


<!DOCTYPE html>
<html>
    <head>
        <title>Jquery Dersleri
        <script src="js/jquery-3.3.1.js">         
        <script>
                $("h1").css('color', 'blue');
        </script> 
    </head>    
    <body>
        <h1>Jquery Derslerine hoşgeldiniz.
        <h1>Bu 1. Ders  
    </body>
</html>

Tahmin edeceğimiz üzere sayfa yüklenmeden kod parçacığı çalışmaya çalışacak ve de yazmış olduğumu h1 taglarını bulamayacak, bu yüzden de etki edemeyecektir.

Sonuç;

Bu şekilde sayfa tam olarak hazır olduktan sonra direk çalışmasını istediğimiz kod parçacıklarını
$(document).ready(function(){ }) metodu içerisine yazmamız gerekmektedir. Aynı işlevi görecek şekilde daha kısa şekilde yazımı şu şekildedi;

$(function(){ });
$(document).ready(function(){ }) ile aynı işlemi görmektedir sadece yazılışı daha kısadır.

Şimdiye kadar olan örneklerde kullandığım "h1" etiketi için yazdığımız yere seçici alanı diyoruz. Kodda görüldüğü gibi $("h1").click(function(){}) burada h1 seçicidir. Seçici olarak classlar, idler, tüm elemanlar vb. öğeleri kullanabiliriz, bunlar şöyledir;

[ $("h1").css('color','red'), $("p").css('color','red'), vb ] ;

Tüm girilen seçici tag ne ise tüm o etiketler için çalışır

$(".metin").css('color','red');

metin class’ı uygulanmış tüm etiketler için çalışır. (Class için Nokta ile başlamalı)

$("#metin").css('color','red');

id değeri metin olan etiket için çalışır. (ID için # ile başlamalı)

$(this).hide();

Olayı başlatan,uygulanan elemanın kendisi için çalışır.

$("*").css('color','red');

Sayfadaki tüm etiketler için çalışır

$("h1:first").css('color','red');

Sayfadaki ilk h1 etiketi için çalışır

$("ul li:first").css('color','red');

Sayfadaki ilk ul etiketi içindeki ilk li etiketi için çalışır

$("ul.ulClass li:first").css('color','red');

Sayfada .ulClass class’ı uygulanmış ul etiketleri içindeki ilk li etiketi için çalışır

$("ul li:first-child").css('color','red');

Sayfadaki tüm ul etiketlerinin ilk li etiketleri için çalışır

Birkaç örnek aşağıdaki resimde bulunmaktadır.


<!DOCTYPE html>
<html>
    <head>
        <title>Jquery Dersleri
        <script src="js/jquery-3.3.1.js">         
        <script>
            $(document).ready(function(){
                $("h1").click(function(){
                    $(this).hide();
                });
                $(".metin").css('color', 'red')
                $("#metin").css('color', 'blue')
                $("ul li:first").css('color','red')
                $("ul.ulClass li:first").css('color','red')                                
            });
        </script>
    </head>

<body>
    <h1>Jquery Derslerine hoşgeldiniz.</h3>
    <h1>Bu 1. Ders</h5>
    <span class="metin">Burada class kullanıldı.</span></br>    
    <span id="metin">Burada id kullanıldı.</span>    
    <ul>
        <li>1. ul 1.Madde</li>
        <li>1. ul 2.Madde</li>
        <li>1. ul 3.Madde</li>
    </ul>
    <ul>
        <li>2. ul 1.Madde</li>
        <li>2. ul 2.Madde</li>
        <li>2. ul 3.Madde</li>
    </ul>        
    <ul class="ulClass">
        <li>3. ul 1.Madde</li>
        <li>3. ul 2.Madde</li>
        <li>3. ul 3.Madde</li>
    </ul> 
</body>

</html>

Sonuç;

Aynı işlemi uygulayacağımız etiketler, classlar, idler için her seferinde tek tek yazmaya gerek yoktur. Seçiciler aynı parantez içerisinde virgül ile ayrılarak yazılabilir, Aynı örnek için şu şekilde düzenlersek;

$(".metin, #metin, ul li:first, ul.ulClass li:first").css('color','red')

Çıktı gene aynı olacaktır, bu şekilde daha kısa ve daha okunaklı kodlar yazabiliriz.

Temel seviye de olsa Javascritp bilgimiz var ise yazdığımız script kodlarını ayrı bir dosyada tutabilir ve bunu JQuery tanımladığımız dosya altında tanımlayabiliriz. Burada önemli husus ise normal JQuery dosyamızın altında tanımlamamız gerektiğidir, yoksa öncesinde tanımlarsak kodlar çalışmaya çalışacak ve daha sistem JQuery kütüphanesini okumadığından dolayı çalışmayacaktır.

Neler öğrendik?

JQuery nedir, nasıl eklenir, nasıl kullanılır, selector nedir ve detaylı elaman seçme işlemleri nelerdir, this nedir, document.ready nedir ve nerede nasıl kullanılmalıdır, tekli ve çoklu seçimler nasıl yapılır gibi sorulara cevap bulduk.

Serinin bir sonraki dersinde event konusu ile effect konularını işleyeceğiz.
Görüşmek üzere.

Posted on Utopian.io - Rewarding Open Source Contributors

Sort Order:

Trending

[-]

shreyasgune (58) · 7 years ago

Thank you for the contribution. It has been approved.

Please write all your code in code box. Not complying with this instruction ASAP will lead to immediate rejection.

You can contact us on Discord.
[utopian-moderator]

$0.69

1 vote

begold (52) · 7 years ago

Thank you.I will be more careful next time and I have also added all of them.

$0.00

ozgurbulut (47) · 7 years ago

It's so informative!

utopian-io (71) · 7 years ago

Hey @begold I am @utopian-io. I have just upvoted you!

Achievements

You have less than 500 followers. Just gave you a gift to help you succeed!
Seems like you contribute quite often. AMAZING!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x