JS Tricks, Labs

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 (: jQuery jQuery Document Ready Kodu // A $( document ).ready() […]

yzr: Hakkı Cengiz
A+ A A- okuma

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 (:

jQuery

  1. jQuery Document Ready Kodu
    
    // A $( document ).ready() block.
    $( document ).ready(function() {
        console.log( "ready!" );
    });
    
    // Kısa Kullanımı $( document ).ready()
    $(function() {
        console.log( "ready!" );
    });
    
    
    
  2. jQuery on Click
    
    $( "p" ).click(function() {
      $( this ).slideUp();
    });
    
    
  3. jQuery addClass ve removeClass
    
    $( "p" ).addClass( "myClass yourClass" );
    
    $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
    
    
    
    
  4. jQuery on :Checked
    
    $(function() {
       $(".checkbox").change(function() {
           if(this.checked) {
               //Do stuff
           }
       });
    });
    
    
  5. jQuery html lang değiştirme
    
    	$('.lang-tr').click(function() {
    		$('html').attr('lang', 'tr');
    	});
    	$('.lang-en').click(function() {
    		$('html').attr('lang', 'en');
    	});
    
    
  6. 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" );
                          });
                        
    
0 Yorumları: Yorum Formunu:

Henüz yorum eklenmemiş.

Bi yoruma ne dersin ?

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir