Javascript Kod Deposu

JS ile çoğu zaman kullandığım kodlardan bazılarını sizlerle paylaşıyorum. Aklıma geldikçe ekleyeceğimden güncel kalacak bir konu olarak buraya bırakıyorum (:

Pure Javascript

1. JS Class Eklemek & Değiştirmek

   
   // Öğenin Class'ını Değiştir
   var el = document.getElementById('#foo');
   pres[i].className = 'my-class';
   
   // Öğenin Class'ını Değiştir + Eski Class'ına Dokunma
   var el = document.getElementById('#foo');
   el[i].className += ' my-class';
   
   // & ya da
   
   el.className = d.className + " my-class";
   
   
   // classList Yöntemi
   
   var el = document.getElementById("div1");
   
   // Single class
   el.classList.add("my-class");
   
   // Multiple calsses
   el.classList.add("my-class", "nother-class");
   
   
   // Kullanımı: 
   // add - Bir öğenin sınıf listesine bir sınıf ekler. Sınıf, öğenin sınıf listesinde zaten varsa, sınıfı tekrar eklemeyecektir.
   // remove - Bir öğenin sınıf listesinden bir sınıfı kaldırır. Sınıf, öğenin sınıf listesinde yoksa, bir hata veya istisna oluşturmaz.
   // toggle - Bir elemanın sınıf listesindeki bir sınıfın varlığını değiştirir
   // içerir - Bir elemanın sınıf listesinin belirli bir sınıf içerip içermediğini kontrol eder
   
   var el = document.getElementById("div1");
   
   el.classList.remove("my-class");
   
   el.classList.toggle("visible");
   
   if (el.classList.contains("my-class")) {
       // Has my-class in it
   } else {
       // No my-class :(
   var el = document.getElementById("div1");
   
   el.classList.remove("my-class");
   
   el.classList.toggle("visible");
   
   if (el.classList.contains("my-class")) {
       // Has my-class in it
   } else {
       // No my-class :(
   }
   
   
   

2. JS isMobileDevice Func

   
   ///// is Mobile Device
   function isMobileDevice() {
       return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
   }
   
   

3. JS Mouse Wheel Events

   
   ///// Mouse Wheel Events
   window.addEventListener('mousewheel', function(e){
       wDelta = e.wheelDelta < 0 ? 'down' : 'up';
       console.log(wDelta);
   });
   
   

4. JS Mobile Swipe Events
   swipe events

jQuery

5. jQuery Document Ready Kodu

   
   // A $( document ).ready() block.
   $( document ).ready(function() {
       console.log( "ready!" );
   });
   
   // Kısa Kullanımı $( document ).ready()
   $(function() {
       console.log( "ready!" );
   });
   
   
   

6. jQuery on Click

   
   $( "p" ).click(function() {
     $( this ).slideUp();
   });
   
   

7. jQuery addClass ve removeClass

   
   $( "p" ).addClass( "myClass yourClass" );
   
   $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
   
   
   
   

8. jQuery on :Checked

   
   $(function() {
      $(".checkbox").change(function() {
          if(this.checked) {
              //Do stuff
          }
      });
   });
   
   

9. jQuery html lang değiştirme

   
   $('.lang-tr').click(function() {
   $('html').attr('lang', 'tr');
   });
   $('.lang-en').click(function() {
   $('html').attr('lang', 'en');
   });
   
   

10. Label işlevi lazım olursa jQuery ile

    Etiketler, etiketledikleri girişin kimliğiyle eşleşen "for" niteliklerine sahip olmalıdır. Bunun anlamı, girişteki bir tıklamayı tetiklemek için bu özelliği seçip bir seçicide kullanabiliriz. Elbette girdilerde tıklamaları izlemek için bir nedeniniz olduğunu varsayalım.

    
    var labelID;
    
    $('label').click(function() {
           labelID = $(this).attr('for');
           $('#'+labelID).trigger('click');
    });
    
    

11. Kendi sitem için hazırladığım font büyütme, küçültme (jQuery Font Changer):

                      
                          <div class="tagcloud">
                            <a id="up"     href="#up">A+</a>
                            <a id="normal" href="#up">A</a>
                            <a id="down"   href="#up">A-</a>
                          </div>
    
                          <div class="single-content">
                          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis hic quae iure unde deserunt. Quidem, harum! Modi eligendi ab recusandae, quod quasi aut sit. Quia nesciunt vitae reprehenderit quisquam sapiente!
                          </div>
    
                      
    

                        
                          .normal{
                            font-size: 100%;
                          }
                          .up{
                            font-size: 150%;
                          }
                          .down{
                            font-size: 50%;
                          }
                        
    

                        
                          $( "#normal" ).on( "click", function() {
                            $( ".single-content" ).removeClass( "up down" ).addClass( "normal" );
                          });
                      
                          $( "#up" ).on( "click", function() {
                            $( ".single-content" ).removeClass( "normal down" ).addClass( "up" );
                          });
                      
                          $( "#down" ).on( "click", function() {
                            $( ".single-content" ).removeClass( "normal up" ).addClass( "down" );
                          });