JQUERY İÇERİK FİLTRELERİ

Tarhi : 11-06-2017 01:13:46 | Yazar : ÇAĞLAR BOSTANCI

İÇERİK FİLİTRELERİ
:contains() :Girilen seçiciye göre verilen ifadeye sahip olanları seçer.
:empty() :Girilen nesneye göre içerisinde bulunmayanları seçer.
:has() :İçerisinde girilen nesneye sahip olan nesneleri seçer.
:parent :Girinlen seçiciye göre içinde nesne bulunduranları seçer. Empty’nin tersidir
contains() Kullanımı ORN1

$('#ornek1').click(function(){
	var deger=$('p:contains("1")').text();// P elementleri içerisinde 1 geçen nesneyi seçtik.
	alert(deger);
	});

$('#ornek1').click(function(){

var deger=$('p:contains("1")').text();// P elementleri içerisinde 1 geçen nesneyi seçtik.

alert(deger);

});

empty Kullanımı ORN

$('#ornek2').click(function(){
	var deger=$('p:empty').append("merhaba"); //Boş elementi bulur 
	});

$('#ornek2').click(function(){

var deger=$('p:empty').append("merhaba"); //Boş elementi bulur

});

//:has Kullanımı

$('#ornek3').click(function(){
	var deger=$('p:has(a)').text(); //p elementleri içerisinden a elemtini bulur
	alert(deger); 
	});

$('#ornek3').click(function(){

var deger=$('p:has(a)').text(); //p elementleri içerisinden a elemtini bulur

alert(deger);

});

//:parent Kullanımı

$('#ornek4').click(function(){
	var deger=$('p:parent').text(); //p içerisinde nesne olanları seçer.
	alert(deger); 
	});

$('#ornek4').click(function(){

var deger=$('p:parent').text(); //p içerisinde nesne olanları seçer.

alert(deger);

});

Görünürlük Filtreleri (VISIBILITY)

:hidden Gizli nesneleri seçer.

:visible Görünür olan nesneleri seçer.

$('#ornek5').click(function(){
		var deger=$('div:hidden');
		deger.css("display","block");
		alert("Gizli olan içerik görünür hale getirildi.");
	});

$('#ornek5').click(function(){

var deger=$('div:hidden');

deger.css("display","block");

alert("Gizli olan içerik görünür hale getirildi.");

});

SIRA DIŞI (TRAVERSAL) SEÇİM FONKSİYONLARI
Filtreleme Fonksiyonları
.eq(index),.eq(-index) : Girilen indeks numaralı nesneyi seçer.
.has() : İçerisinde girilen nesneye sahip olan nesneleri seçer.
.filter(selector) : Girilen nesne/nesneleri seçer. Ayrıca içerisine girilen fonksiyonun gereğini yapar.
.is() : Seçili nesnenin verilen özelliğini olup olmadığını sınar.
.each() : Girilen nesne içersinde döngü kurar.
.first() : Girilen seçicinin ilk nesnesini dönderir.
.last() : Girilen seçicinin son nesnesini dönderir.
.map() : Seçicinin içerisindeki nesneleri diziye çevirir.
.not() : Belirtilen seçme işlemine uymayan nesneleri döndürür.
.slice() : İki adet indeks noktası arasındaki nesneleri seçer.

//.eq() Kullanımı

$('#ornek6').click(function(){
		var deger=$('p').eq(1);
		alert("Metin içerisindeki ikinci paragrafı seçer : "+deger.text());
	});

$('#ornek6').click(function(){

var deger=$('p').eq(1);

alert("Metin içerisindeki ikinci paragrafı seçer : "+deger.text());

});

//.has() Kullanımı

$('#ornek7').click(function(){
		var deger=$('ul').has('li');//
		alert("Metin içerisindeki ikinci paragrafı seçer : "+deger.text());
	});

$('#ornek7').click(function(){

var deger=$('ul').has('li');//

alert("Metin içerisindeki ikinci paragrafı seçer : "+deger.text());

});

//.filter() Kullanımı

$('#ornek8').click(function(){
		var deger=$('ul li').filter(":even");//listedeki çift indeksli elementleri seçer.
		alert("Metin içerisindeki ikinci paragrafı seçer : "+deger.text());
	});

$('#ornek8').click(function(){

var deger=$('ul li').filter(":even");//listedeki çift indeksli elementleri seçer.

alert("Metin içerisindeki ikinci paragrafı seçer : "+deger.text());

});

//.filter() Kullanımı

$('#ornek9').click(function(){
		$('tr').filter(function(index){
			return index % 2 == 1; 
			}).css("color","red");//tablonun ikinci satırlarının metin rengi kırmızı olacak.
		alert("Tamam");
	});

$('#ornek9').click(function(){

$('tr').filter(function(index){

return index % 2 == 1;

}).css("color","red");//tablonun ikinci satırlarının metin rengi kırmızı olacak.

alert("Tamam");

});

$('#ornek10').click(function(){
		$('ul li').css("backgroundColor","#333").filter('#li2').css("color","white");//tablonun ikinci satırlarının metin rengi kırmızı olacak.
		alert("Buton 10 Çalıştı");
	});

$('#ornek10').click(function(){

$('ul li').css("backgroundColor","#333").filter('#li2').css("color","white");//tablonun ikinci satırlarının metin rengi kırmızı olacak.

alert("Buton 10 Çalıştı");

});

//.is() Kullanımı

$('#ornek11').click(function(){
		if($('li').is("#li3")) alert("#li3 Mevcut");//li içerisinde #li3 bulup, bulunamadığın belirtir.
		
	});

$('#ornek11').click(function(){

if($('li').is("#li3")) alert("#li3 Mevcut");//li içerisinde #li3 bulup, bulunamadığın belirtir.

});

//.each() Kullanımı

$('#ornek12').click(function(){
		$('ul li').each(function(anahtar){
             alert(anahtar+" => "+$(this).text());
        });//li içerisinde #li3 bulup, bulunamadığın belirtir.
		
	});

$('#ornek12').click(function(){

$('ul li').each(function(anahtar){

alert(anahtar+" => "+$(this).text());

});//li içerisinde #li3 bulup, bulunamadığın belirtir.

});

$('#ornek13').click(function(){
		$('ul li').each(function(anahtar,deger){
             alert(anahtar+" => "+$(deger).text());
        });//li içerisinde #li3 bulup, bulunamadığın belirtir.
		
	});

$('#ornek13').click(function(){

$('ul li').each(function(anahtar,deger){

alert(anahtar+" => "+$(deger).text());

});//li içerisinde #li3 bulup, bulunamadığın belirtir.

});

//.first() Kullanımı

$('#ornek14').click(function(){
		alert($('ul li').first().text());
		
	});

$('#ornek14').click(function(){

alert($('ul li').first().text());

});

//.last() Kullanımı

$('#ornek15').click(function(){
		alert($('ul li').last().text());
		
	});

$('#ornek15').click(function(){

alert($('ul li').last().text());

});

//.map() Kullanımı

$('#ornek16').click(function(){
		var deger=$('div>*').map(function() {
            return this.text;
        }).get().join('-');
		alert(deger);
		
	});

$('#ornek16').click(function(){

var deger=$('div>*').map(function() {

return this.text;

}).get().join('-');

alert(deger);

});

//.not() Kullanımı

$('#ornek17').click(function(){
		$('ul li').not('#li2').css("color","red");//li2 dışındakilerin metin rengini kırmızı yapar.
		alert("tamam");
		
	});

$('#ornek17').click(function(){

$('ul li').not('#li2').css("color","red");//li2 dışındakilerin metin rengini kırmızı yapar.

alert("tamam");

});

//.slice() Kullanımı

$('#ornek18').click(function(){
		var deger=$('ul li').slice(2).css("backgroundColor","red");//listedeki 3 numaralı li'nin arkaplan rengi değişir.
		
	});

$('#ornek18').click(function(){

var deger=$('ul li').slice(2).css("backgroundColor","red");//listedeki 3 numaralı li'nin arkaplan rengi değişir.

});

$('#ornek19').click(function(){
		var deger=$('ul li').slice(1,3).css("backgroundColor","red");//li2 dışındakilerin metin rengini kırmızı yapar.
		
	});

$('#ornek19').click(function(){

var deger=$('ul li').slice(1,3).css("backgroundColor","red");//li2 dışındakilerin metin rengini kırmızı yapar.

});

İlgili

JQUERY

JQUERY İÇERİK FİLTRELERİ

Hemen Başla

Konu ile ilgili olarak mail gönderebilirsiniz.

Çağlar Bostancı

JQUERY İÇERİK FİLTRELERİ