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

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

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

 

Çoklu attribute eklemek

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.

 

Ö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 🙂

 

 

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

Merhaba arkadaşlar,

Öncelikle belirtmeliyim ki ben each’i zor öğrendim yani anlamamak ve kullanmamak için kendimi zorladım ama baktım ki çok işe yarıyor öğrendim. each karışık durabilir ama gerçekten çok kolay.

Bugün pek yazı yazma isteğim yok o yüzden direk anlatıma geçiyorum. (Her eklentimde önce internette resim aramaktan ve bulamayıp kendi resimlerimi kullanmaktan bıktım. Yakında lipsum’un resimlisini yapacağım!)

Each  = for döngüsü olarak düşünün, tek farkı ise each elementlerin toplamini kendi aliyor ve hepsini tek tek işliyor. Okumaya devam et jQuery .each() nedir? nasıl kullanılır ?

jQuery tab kontrol (tab menü) uygulaması

30 Ağustos 2010’da uygulamanın valid olmaması nedeniyle düzenlenmiştir. Yeni uygulmadaki fark title tagları üzerinden açılacak tablar bulunmuştur.

jQuery çalışmalarına devam ediyoruz şimdi ise jQuery tab kontrol yani tab menü yapacağız . jQuery dosyasını yazarken baya bir açıklama yaptım takıldığınız yer olursa oradanda bakabiliriz.

jQuery ile basit bir tab menü yapmak çok kolaydır ve statiktir bunu jQueryden az çok anlayan insanlar kullanabilir ve düzenleyebilir ama benim amacım çok esnek yapıda menu eklemek  –  çıkartmak. Bunun için jQuery kütüphanesinden  removeAttr , addClass ve attr fonksiyonlarını kullandım. Öncelikle menümüzü hazırlayalım ve gerekli css , html kodlarını yazalım.

Ben iğrenç görünümlü bir menü oluşturdum her ne kadar renkler birbirinden uyumsuz olsada artık siz css kısımından menüyü düzeltebilirsizniz.

Menu ön izleme :

Menü html kodları

 

Menü Css kodları

 

Şimdi sıra geldi jquery işlemlerine ilk başta sayfamıza jquery.js veya googleapis’deki js dosyasını entegre edelim sonra bir alt satıra oluşturduğum ab-tabmenu.js dosyasını entegre edelim.

İşlemlerimiz bitti şuan jquery tab menümüz çalışır bir vaziyette ama bizim işimiz örnekleri anlatmak o yüzden ab-tabmenu.js dosyasını açıyorum ve anlatmaya başlıyorum.

Sayfa yüklendiğinde şu işlemleri yap.

anamenu classlı ul içerisindeki li içindeki a linkinin üzerine gelindiğinde fonksiyonu çalıştır

removeAttr ile şunu diyoruz :  anaMenu’nun altindaki li tagının altındaki a taglarinin hepsini classlarini sil.

addClass ile şunu diyoruz : üzerine geldiğimiz menünün class’ına aktifLi değerini yaz.

attr ile şunu diyoruz : acilacakTab degerinde bir degisken oluştur ve ustune gelinen menunun id=”***” degeri al.

acilacakTabMenuler div’inin icerisindeki ul’lari bul ve hepsini gizle.

Yukaridaki ” var acilacakTab = $(this).attr(‘id’); ” satirda ustune gelinen menunun id degerini al sonra acilacakTab olan (tab1 , tab2 , tab3 , vs.. ) degerini ul id degeri olarak ata ve o ul’u aç.

Bütün işlemlerimiz bu kadar arkadaşlar.

Epeki ben nasıl menü ekleyeceğim çıkartacağım sorusuna cevab ise :

Bir menü eklemek istiyorsanınız 2 işlem yapmanız gerekiyor

işlem 1 :

buraya

ekleyin sadece title kısmında tab5 yazın

işlem 2 :
Üst kısıma yeni menünün adını yazdık ama içeriğini yazmamız lazım

bu div’imizin içerisine yeni bir ul ekliyoruz

burada ise yukarıdaki Yeni Menü isimli li’mize verdiğiniz id değerini bu ul’un id kısmına verin. İd değerleri aynı olmak zorundadır.

Menu eklemek bu kadar basit. Menü silmek ise bunun tam tersidir ve uygulamamız tamamen hazır bir hale geldi.