Javascript – jQuery – Sayfa 4 – aycan.net

jQuery .attr() nedir? nasıl kullanılır?

jQuery .attr() = attribute’larla işlem yapmamızı sağlıyor. // attiribute’nin TR’ye geçmiş tam karşılığı nedir bilmiyorum ama şöyle açıklayacak olursak

<input name="adınız" value="aycan" />

1	<input name="adınız" value="aycan" />

Burada name ve value bir attribute’dur. jQuery .attr() ile bu attribute’ler üzerinde değişiklik yapıyoruz.

$('.button1').click(function(){
    $('input').attr('value','.attr() ile içerik değiştirdik');
});

$('.button1').click(function(){

$('input').attr('value','.attr() ile içerik değiştirdik');

});

Yukarıda .attr() ile seçtiğimiz value attribute’sine yeni değer atadık.

Çoklu attribute eklemek

$('.button2').click(function(){
    $('input').attr({
      value :'çoklu attr ekliyoruz',
      disabled : 'disabled'
    });
});

$('.button2').click(function(){

$('input').attr({

value :'çoklu attr ekliyoruz',

disabled : 'disabled'

});

Burada ise obje şeklinde çoklu attribute ekledik / güncelledik.

.attr() ile değer almak

Değer atayabildiğimiz gibi var olan attribute değerlerinede .attr() yardımı ile okuyabiliyoruz.

$('.button3').click(function(){
    alert($('input').attr('value') )
});

$('.button3').click(function(){

alert($('input').attr('value') )

});

Ön izleme

See the Pen jQuery .attr() nedir? nasıl kullanılır? by Aycan BÜLBÜL (@AycanB) on CodePen.

Yedek olsun diye kodları burada da tutalım 🙂

<input type="text" value="deneme"/>
<button class="button1">attr ekle</button>
<button class="button2">çoklu attr ekle</button>
<button class="button3">attr ile değer almak</button>

<button class="button2">çoklu attr ekle</button>

<button class="button3">attr ile değer almak</button>

$('.button1').click(function(){
    $('input').attr('value','.attr() ile içerik değiştirdik');
});

$('.button2').click(function(){
    $('input').attr({
      value :'çoklu attr ekliyoruz',
      readonly : 'readonly'
    });
});

$('.button3').click(function(){
    alert($('input').attr('value') )
});

$('.button1').click(function(){

$('input').attr('value','.attr() ile içerik değiştirdik');

});

$('.button2').click(function(){

$('input').attr({

value :'çoklu attr ekliyoruz',

readonly : 'readonly'

});

$('.button3').click(function(){

alert($('input').attr('value') )

});

$.trim() nedir ? nasıl kullanılır ?

$.trim() hemen hemen form işlemlerinin vazgeçilmezidir, var olan string ifadenin başında ve sonundaki boşlukları silmemize yardımcı olur.

$(document).ready(function(){

  $('button').on('click',function(){
    $('textarea').val
    (
      $.trim( $('textarea').val())
    )
  });
});

$(document).ready(function(){

$('button').on('click',function(){

$('textarea').val

(

$.trim( $('textarea').val())

)

});

Button tıklanıldığomda

textarea’nın içine, textareanın temizlenmiş valuesi’ni at.

See the Pen $.trim by Aycan BÜLBÜL (@AycanB) on CodePen.

jQuery form işlemleri / kontrolleri

Merhaba arkadaşlar,

Sürekli kullandığımız ve lazım olan kodları birleştirmeye çalıştım. Bu kodlar arasında yabancı gelen kodlar olabilir ancak bunları zaman buldukça detaylı anlatacağım.

Okumaya devam et jQuery form işlemleri / kontrolleri

jQuery Hash Change jQHashChange.js

Merhaba arkadaşlar,

Kısaca js hayatımıza çok girdi, artık sayfalar fiziksel olarak değilde bir internet sayfası içinde js işlemleri içinde bir kaç işlemi yaptırmaya başladık ancak bu yapıda geri ileri olmuyordu o yüzden bu yapıya 2. aşama olarak hash’lerle gitmeyi tercih ettik.

Hash konusunda “Ben Alman“ın yaptığı bir yapı var ancak ie7 ve alt sürüm tarayıcılar desteklemiyor o yüzden zamanında böyle birşey yazmıştım, paylaşmak istedim.

previousHash = '';

function jQHashChange( callback )
{
    
    var newHash = '';
    var url = window.location.href.split('#')[1];

    zaman = setInterval
    (
        function ()
        {
            newHash = (window.location.href.split('#')[1] || '');

            if( (previousHash !== newHash) && (newHash.length > 1) )
            {
                clearInterval(zaman);
                previousHash = newHash;
                
                if( callback )
                    callback(newHash);
                
                jQHashChange( callback );
            } 
        },100
    );
}

previousHash = '';

function jQHashChange( callback )

{

var newHash = '';

var url = window.location.href.split('#')[1];

zaman = setInterval

(

function ()

{

newHash = (window.location.href.split('#')[1] || '');

if( (previousHash !== newHash) && (newHash.length > 1) )

{

clearInterval(zaman);

previousHash = newHash;

if( callback )

callback(newHash);

jQHashChange( callback );

}

},100

);

}

Çalıştırma

jQHashChange( function (newHash){
    jQuery( '.newHashContent' ).append( '<div>New hash : ' + newHash + '</div>' );
});

jQHashChange( function (newHash){

jQuery( '.newHashContent' ).append( '<div>New hash : ' + newHash + '</div>' );

});

Çalışmayı buradan indirebilir ve buradan da ön izleme yapabilirsiniz.

Feedback için teşekkürler İbrahim (ibrahimd.com ) @DoktorCeykil 🙂

functionalBlocks.js

Merhaba Arkadaşlar,

functionalBlocks.js nedir ?

Modern temalarda gördüğünüz gizli (header/sidebar) yapılarını temiz bir şekilde size sunan bir eklenti

functionalBlocks.js nasıl çalışır ?

functionalBlocks.css, functionalBlocks.js dosyalarınızı sayfanıza eklemelisiniz.

<link type="text/css" rel="stylesheet" href="library/css/functionalBlocks.css"/>
<script src="library/js/functionalBlocks.js"/></script/>

1 2	<link type="text/css" rel="stylesheet" href="library/css/functionalBlocks.css"/> <script src="library/js/functionalBlocks.js"/></script/>

Okumaya devam et functionalBlocks.js