Javascript & J Query
Uploaded by
serenityyapimJavascript & J Query
Uploaded by
serenityyapimJAVASCRIPT
&
JQUERY
Hazırlayan: Dr. Özkan Kafadar
GİRİŞ
jAVASCRİPT
Web sayfası içerisinde istemci tarafında çalıştırılabilen bir script dilidir.
• HTML tasarımcılarına bir programlama desteği sağlar, bünyesinde değişkenler,
fonksiyonlar, döngüler, yordamlar bulundurur.
• HTML sayfalarına hareketli HTML nesneleri (metin, resim, vb.) yerleştirilmesini sağlar.
• Olaylara tepki verir.
• HTML elemanlarını okuyabilir veya yazabilir.
• Kullanıcı ile bilgi alışverişinde bulunmamızı sağlar.
<script type=“text/javascript”>
…
</script>
<script src="[Link]">
</script>
CLIENT
(BROWSER) URL
HTML
INTERNET EXPLORER
NETSCAPE NAVIGATOR
OPERA
BROWSER 1
2 3
ASP DATABASE
6 SCRIPTI SERVER
4
5
IIS
NESNE YÖNTEM
Window Alert()
Confirm()
Document
…. Write()
Writeln()
….
Java Script Hatalarını Ayıklayabilmek İçin
Tarayıcıda Yapılması Gereken İşlem
Tarayıcıda Bilgilerin Görüntülenmesi
Document . Write (“ ”)
Writeln (“ ”)
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
[Link]("Merhaba");
</SCRIPT>
</BODY>
</HTML>
HATALI KOD
<Script Language = “JavaScript” >
[Link](deneme");
</Script>
HATASIZ KOD
<Script Language=“JavaScript”>
[Link]("deneme");
</Script>
DEĞİŞKENLER
Değişkenler Mutlaka Bir Harf İle veya _ karakteri İle Başlamalıdır.
Sayi = 25; Durum 1Uye
Mesaj = “Deneme”; Ad_soyad Uye adı
var Sayi = 25; _hatakodu BİRİM
Islem1 Alan%
KOD
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
var sayi1=1
sayi2=5
[Link]("Toplam="+sayi1+sayi2)
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
var sayi1=1
sayi2=5
toplam=sayi1+sayi2
[Link]("Toplam="+toplam)
</SCRIPT>
</BODY>
</HTML>
Sayısal Değerler
Aritmetik işlemler yapılabilen her türlü sayısal değer: tam sayı, ondalık sayı,
negatif sayı.
sayi = 32
Alfanümerik Değerler
Aritmetik işlemler yapılmayan, metinsel özellikler taşıyan değerler.
metin= “Merhaba"
Onay Değerleri
Sadece doğru veya yanlış değerlerini kabul eden değerler. Doğru ifadesi 1
ile, yanlış ifadesi 0 ile ifade ediliyor.
Fonksiyon Değeri
Değişkenler fonksiyonları da saklayabilmektedir.
degisken = hesapla()
Nesne Değeri
Değişkenler HTML nesnelerini (düğme, metin, resim, vb.) değer olarak
saklayabilmektedir.
eleman = dugme
FONKSİYONLAR
Fonksiyonlar <head>...</head> bölümünde yer alır. Bir fonksiyonun genel
yapısı:
function fonksiyon adı (argüman1, argüman2,....,argümanN)
{
…
}
Argümansız Fonksiyonlar
<script language="JavaScript"> <form>
function mesaj() Mesaja bakmak istiyorsanız,
{ düğmeye basın.<br>
alert(“Mesajınız yok."); <input type="button"
[Link]("Mesaja baktınız..."); onclick="mesaj()"
} value=“Kontrol">
</script> </form>
Argümanlı Fonksiyonlar
<script language="JavaScript">
function puan(a, b)
{
alert("Verdiğiniz notu göndermek için basın.");
[Link](a + " isimli yoruma" + b + " notunu verdiniz.");
}
</script>
<form>
<input type="button" value="Notu Gönderin"
onclick= "puan(‘Yorum1', '100')">
</form>
Değer Atamalı Fonksiyonlar
function fonksiyon adı (argüman1, argüman2,....,argümanN)
{
…
<script language="JavaScript">
return değer
function karesi(x)
}
{
x=x*x;
<script language="JavaScript">
return x
var a1, a2, a3, a4, a5;
}
a1 = karesi (1);
</script>
a2 = karesi (2);
a3 = karesi (3);
a4 = karesi (4);
a5 = karesi (5);
[Link]
(“1 den 5 e kadar olan sayılarının kareleri hesaplanmıştır.<br>");
[Link] (a1 +", " + a2 +", " + a3 +", " + a4 +", " + a5 +”);
</script>
AKIŞ DENETİMİ
VE
DÖNGÜLER
IF – ELSE DEYİMİ
IF KOŞUL { IF KOŞUL {
KOMUTLAR; KOMUTLAR;
} }
ELSE
{
KOMUTLAR;
}
<SCRIPT LANGUAGE = “JAVASCRIPT”>
sayi = -150;
if ( sayi > 0 ) {
document . write ( “ Sayı Pozitif ” );
}
else
{
document . Write ( “ Sayı Negatif ” );}
</SCRIPT>
SWITCH DEYİMİ
SWITCH ( İFADE ) { <script language="javascript">
CASE ETİKET :
KOMUTLAR;
BREAK; var ay=prompt("Bir Sayı Giriniz:");
CASE ETİKET :
KOMUTLAR; switch(ay){
BREAK;
DEFAULT : case "1":
KOMUTLAR; [Link]("OCAK");
} break;
case "2":
[Link]("ŞUBAT");
break;
case "3":
[Link]("MART");
break;
}
</script>
FOR DEYİMİ
For ( sayaç = başlangıç ; koşul ; artma )
Komutlar;
<script language="javascript">
for (i=1;i<10;i++)
{
[Link](i+"<br>");
}
</script>
WHILE DEYİMİ
while ( koşul ) {
Komutlar;
<script language="javascript">
deger=1
while (deger<10){
[Link](deger+"<br>")
deger++
}
</script>
DO - WHILE DEYİMİ
do {
Komutlar;
while ( koşul )
<script language="javascript">
var deger=0
do
{
deger=deger+1;
[Link](deger+"<br>");
}
while(deger<9)
</script>
TRY – CATCH DEYİMİ
try {
komutlar;
}
catch ( hata nesnesi ) {
Komutlar;
}
finally {
Komutlar;
}
<script language="javascript">
try{
[Link](x);
}
catch(hata){
[Link]("Hata:"+hata+"<br>");
[Link]("Hata
Numarası:"+[Link]+"<br>");
[Link]("Hata
Tanımı:"+[Link]+"<br>");
}
</script>
PENCERE
KOMUTLARI
Uyarı Kutusu
Alert (" Merhaba ");
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
[Link](“Merhaba");
</SCRIPT>
</BODY>
</HTML>
Onay Kutusu
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
var Secim=[Link]("Devam İçin TAMAM, İptal için iPTAL");
if (Secim){
[Link]("DEVAM");
}
else
[Link]("İPTAL");
</SCRIPT>
</BODY>
</HTML>
YENİ BİR PENCERENİN AÇILMASI
<html>
<head>
<script language="javascript">
function yeni()
{
yenipencere=[Link]("http:\\
[Link]")
}
</script>
</head>
<body>
<form name="denetleme">
<input type="button" value="yeni" name="B2"
onclick="yeni()">
</form>
</body>
</html>
yeniPencere=[Link](
URL,
"YeniPencereninAdı",
"toolbar=0,
menubar=no,
resizable=0,
width=150,
height=150,
top=150,
left=150")
yeniPencere=[Link](URL,
"YeniPencereninAdı",
"toolbar=1,
menubar=yes,
resizable=1,
width=150,
height=150,
top=150,
left=150")
<html>
<head>
<script language="javascript">
function kapat()
{ [Link]() }
</script>
</head>
<body>
<form name="denetleme">
<input type="button" value="kapat" name="B2"
onclick="kapat()">
</form>
</body>
</html>
Sayfa Yönlendirme
<script language="JavaScript">
function yonlendir()
{
location = “[Link]"
}
</script>
<form>
Pencerenizi "Giriş" sayfasına yönlendirmek için butona
basınız.<br>
<input type="button" onclick="yonlendir()" value=“Ana
Sayfa">
</form>
Sayfayı YenidenYönlendirme
<script language="JavaScript">
function tazele()
{
[Link]()
}
</script>
<form>
Sayfayı yeniden yüklemek için aşağıdaki düğmeye
basınız.<br>
<input type="button" onclick="tazele()" value="Sayfayı
yeniden yükle">
</form>
Pencere Kutusu
<script language="JavaScript">
function bilgi()
{
[Link] = “Siteye Hoşgeldiniz…“;
}
</script>
<form>
Düğmeye basarsanız pencerenin alt kısmında bir mesaj
göreceksiniz.<br>
<input type="button" onclick=“bilgi()" value=“Bilgi">
</form>
METİN
KOMUTLARI
SAYISAL KARAKTERLERİN DENETLENMESİ
<html> dizgi= “1234567890”
<head>
<script language="javascript">
……..
</script>
</head>
<body>
<form name="denetleme">
<input type="text" name="T1" size="20"> * Lütfen Rakam
Giriniz.<p>
<input type="button" value="Gönder" name="B1"
onclick="sayisalTest([Link])"> </p>
</form>
</body>
</html>
function sayisalTest(form) {
testVar=Test([Link]);
if (testVar==1)
{
alert("sayisal deger girdiniz");
}
else
{
alert("sayisal olmayan bir deger girdiniz");
}
}
function Test(deger) {
if ( [Link] == 0) return(0);
var sayisalDizgi="1234567890"; [Link](başlangı
for(i=0;i<[Link];i++) ç,bitiş)
{
karakter=[Link](i,i+1);
if ([Link](karakter,0)==-1)
return (0);
}
return (1); [Link](dizgi,başl
} ama)
TÜRKÇE KARAKTERLERİN DENETLENMESİ
dizgi= “ABCDEFGHIJKLMNOPRSTUXVWZabcdefghijklmnoprstuxvwyz”
DİZİLER
var hafta = new Array("pazartesi", "salı", "çarşamba", "perşembe", "cuma",
"cumartesi", "pazar")
veya
var hafta = new Array(6)
hafta[0] = "pazartesi"
hafta[1] = "salı"
hafta[2] = "çarşamba"
hafta[3] = "perşembe" var hafta = new Array (6,1)
hafta[4] = "cuma" hafta[0][0] = "pazartesi sabahı"
hafta[5] = "cumartesi" hafta[0][1] = "pazartesi akşamı"
hafta[6] = "pazar" hafta[1][0] = "salı sabahı"
hafta[1][1] = "salı akşamı"
hafta[2][0] = "çarşamba sabahı"
hafta[2][1] = "çarşamba akşamı"
…
ZAMAN
KOMUTLARI
getDate() Ayın kaçı olduğunu gösterir.
[Link]()
getMonth() Hangi ayda olduğumuzu gösterir. Ocak için 0, Şubat için 1, Mart için
2, ..., Aralık için 11 değerini verir.
[Link]()
getFullYear() İçinde bulunduğumuz yılı dört rakamıyla gösterir.
[Link]()
getHours() Saat değerini ifade eder. 24'lük sistem kullanılır.
[Link]()
getMinutes() Dakika değerini ifade eder.
[Link]()
getSeconds() Saniye değerini ifade eder.
[Link]()
getUTCHours() UTC saat değerini ifade eder. UTC bir zaman standardı;
[Link]()
getUTCMinutes() UTC dakika değerini ifade eder.
[Link]()
getUTCSeconds() UTC saniye değerini ifade eder.
[Link]()
getDay() Haftanın günlerini ifade eder. Pazar için 0, Pazartesi için 1, Salı için 2, ...,
Cumartesi için 6 değerini verir.
[Link]()
<html>
<head>
<title>Zaman Komutları</title>
</head>
<body>
<h3>Zaman Komutları ve Sonuçları</h3>
<script language="JavaScript">
var zaman = new Date()
[Link]("<b>Zaman</b>: " + zaman)
[Link]("<br><b>getFullYear</b>: " + [Link]())
[Link]("<br><b>getDate</b>: " + [Link]())
[Link]("<br><b>getMonth</b>: " + [Link]())
[Link]("<br><b>getHours</b>: " + [Link]())
[Link]("<br><b>getMinutes</b>: " + [Link]())
[Link]("<br><b>getSeconds</b>: " + [Link]())
[Link]("<br><b>getUTCHours</b>: " + [Link]())
[Link]("<br><b>getUTCMinutes</b>: " + [Link]())
[Link]("<br><b>getUTCSeconds</b>: " + [Link]())
[Link]("<br><b>getDay</b>: " + [Link]())
</script>
</body>
</html>
OLAYLAR
ONCLICK()
<script language="JavaScript">
function mesaj()
{
sayfa = [Link]("","yeni_sayfa",
"toolbar=0,location=0,directories=0, status=0,
menubar=0,scrollbars=0,resizable=0, copyhistory=0,width=280,
height=80, left=200, screenX=200, top=100, screenY=100")
[Link]("<h1>Merhaba</h1>")
}
</script>
<a href="#" onclick="mesaj()">Mesajınız var.</a>
ONDBLCLICK()
<script language="JavaScript">
function mesaj()
{
alert("Hiperlinkin üzerine geldiniz.")
}
</script>
<img src="[Link]" border="0" ondblclick="mesaj()"><br>
<p>Resmin üzerine çift tıklarsanız mesaj kutusu görünür.</p>
ONMOUSEOVER()
<script language="JavaScript">
function mesaj()
{
alert("Hiperlinkin üzerine geldiniz.")
}
</script>
<a href="#" onmouseover="mesaj()">Hiperlinkin üzerine
gelirseniz mesaj görünür.</a>
ONMOUSEOUT()
<script language="JavaScript">
function mesaj()
{
alert("Hiperlinkten çıktınız.")
}
</script>
<a href="#" onmouseout="mesaj()">İmleci hiperlinkin
üzerinden çekerseniz mesaj görünür.</a>
ONLOAD VE ONUNLOAD OLAYLARI
onLoad Sayfa Yüklenirken Meydana Gelen Olaydır.
onUnLoad Sayfadan Başka Bir Sayfaya Geçilmesi veya
Sayfanın Kapatılması Olayı
<html><head>
<script language="javascript">
function merhaba()
{
yeniPencere=[Link]("[Link]","Merhaba","toolbar=1
,menubar=yes,
resizable=1,width=150,height=150,top=150,left=150")
}
function gulegule()
{
yeniPencere=[Link]("[Link]","gulegule","toolbar=1
,menubar=yes,
resizable=1,width=150,height=150,top=150,left=150")
}
</script></head><body onLoad="merhaba()"
onUnLoad="gulegule()">
DHTML
Document Object Model
<script language="JavaScript">
function yan()
{
[Link]="[Link]"
}
function son()
{
[Link]="[Link]"
}
</script>
<img id="resim" onmouseover="yan()" onmouseout="son()"
src="[Link]" border="0">
<br><br>Yazının parlaması için DHTML yazısının üzerine gelin.
<script language="JavaScript">
function buyut()
{
[Link]="500" }
function kucult()
{
[Link]="347" }
function yan()
{
[Link]="[Link]" }
function son()
{
[Link]="[Link]" }
</script>
<img id="resim" onmouseover="yan()" onmouseout="son()"
onclick="buyut()" ondblclick="kucult()" src="[Link]"
border="0">
<br><br>Yazının parlaması için DHTML yazısının üzerine gelin.
<br>Yazının büyümesi için DHTML yazısının üzerine tıklayın.
<br>Yazının küçülmesi için DHTML yazısının üzerine çift
tıklayın.
DOCUMENT
NESNESİ
Döküman Nesnesinin İçeriğini Değiştirmek
<script language="JavaScript">
function cikis()
{
[Link]=“Kitap Fuarını Ziyaret Eden Herkeze Bir Kitap
Hediyedir"
[Link]="blue"
}
function giris()
{
[Link]=“Kitap Fuarı "
[Link]="black"
}
</script>
<h1 id="ilan" onmouseover="cikis()" onmouseout="giris()"
>Kitap Fuarı</h1>
Döküman Başlığını Belirlemek
<p>Sayfa başlığı: <b><script
language="JavaScript">[Link]([Link])</script
></b></p>
Döküman Nesnesini Türünü Belirlemek
<script language="JavaScript">
function bul(metin)
{
var x=[Link](metin)
alert("Ben bir <" + [Link] + "> elemanıyım")
}
</script>
<h1 id="eleman1" onclick="bul('eleman1')">Bana tıklarsanız,
hangi HTML nesnesi olduğumu görürsünüz!!!</h1>
<h2 id="eleman2" onclick="bul('eleman2')">Bana tıklarsanız,
hangi HTML nesnesi olduğumu görürsünüz!!!</h2>
<h3 id="eleman3" onclick="bul('eleman3')">Bana tıklarsanız,
hangi HTML nesnesi olduğumu görürsünüz!!!</h3>
<h4 id="eleman4" onclick="bul('eleman4')">Bana tıklarsanız,
hangi HTML nesnesi olduğumu görürsünüz!!!</h4>
<p id="eleman5" onclick="bul('eleman5')">Bana tıklarsanız,
hangi HTML nesnesi olduğumu görürsünüz!!!</p>
<div id="eleman6" onclick="bul('eleman6')">Bana tıklarsanız,
hangi HTML nesnesi olduğumu görürsünüz!!!</div>
Arka Plan Rengini Değiştirmek
<script language="JavaScript">
function renklendir(n)
{switch(n)
{case 1: [Link]="red"
break
case 2: [Link]="yellow"
break
case 3: [Link]="blue"
break
default: [Link]="white"
break}
}
</script>
<a href="#" onclick="renklendir(1)">Kırmızı</a><br /><br />
<a href="#" onclick="renklendir(2)">Sarı</a><br /><br />
<a href="#" onclick="renklendir(3)">Mavi</a><br /><br />
JQUERY
Javascript’ in derlenip kullanımı basite indirgenmiş bir kütüphanesidir.
[Link]
• Download the compressed, production jQuery 1.9.0
• Download the uncompressed, production jQuery 1.9.0
<html>
<head>
<script
src=“[Link]">
</script>
</head>
<body >
</body>
</html>
<html>
<head>
<title>Ilk jQuery Ornegi</title> jQuery’de $ işareti bizi bir çok uzun
<script src="[Link]"></script> kodlamadan kurtarır. getElementByTagname
<script type="text/javascript"> gibi kodlamalar tarihe karışmıştır. Fakat
$(document).ready( burada asıl önemli olan ready teriminin
function() { kullanılmasıdır. Web sayfasındaki DOM ağacı
$("#b1").click( doğru yapılanmışsa ready teriminin içindeki
function() { blok çalışacaktır.
alert('Merhaba');
}
);
}
$(“#b1”) ile b1 id’sine sahip taga
);
ulaşılmaktadır. Ardından gelen click terimi
</script>
kullanılarak bu id’ye sahip nesne tıkladığında
</head>
yapılacak olay bir fonksiyon olarak
<body>
tanımlanmıştır.
<h1>Dugmeyi tikla</h1>
<button id="b1">Lütfen Butona Tıklayınız</button>
</body>
</html>
<html>
<head>
<title>Ilk jQuery
Ornegi</title>
<script
src="[Link]"></script>
<script
type="text/javascript">
$
(document).ready(function()
{
$("#b1").click(function(){
alert('1. Button');});
$("#b2").click(function(){
alert('[Link]');});
$("#b3").click(function(){
alert('3. Button');});});
</script>
</head><body>
<h1>Lütfen Butonlardan
Birisine Tıklayınız</h1>
<button
<html>
<head>
<script type="text/javascript"
src="[Link]">
</script>
<style type="text/css">
<body>
.CSS_Class {
<h1>JQUERY</h1>
background: black;
<button id="a“>CSS
font-size: 34px;
Kullan</button>
color:white;
<button id="b“>CSS
</style>
Kullanma</button>
<script type="text/javascript">
<button id="c“>Gizle</button>
$(document).ready(function(){
<button id="d“>Goster</button>
$("#a").click(function(event){
<hr/>
$("#e").addClass("CSS_Class");});
<div id="e">
$("#b").click(function(event){
Bir Yerde Küçük İnsanların
$("#e").removeClass("CSS_Class");});
Büyük Gölgeleri Varsa O Yerde
$("#c").click(function(event){
Güneş Batıyor Demektir.
$("#e").hide("slow");});
</div>
$("#d").click(function(event){
<hr/>
$("#e").show("fast");});});
</body>
</script>
</html>
ÖZET
$ işareti web sayfası içerisindeki herhangi bir tag’ a ulaşmak için kullanılır.
$(“#b1”) ile b1 id’sine sahip taga ulasılmaktadır
jQuery’de $ işareti bizi bir çok uzun kodlamadan kurtarmaktadır. getElementByTagname
gibi kodlamalar bu sayede tarihe karışmıştır.
Web sayfasındaki DOM ağacı doğru yapılanmışsa ready teriminin içindeki blok
calışır.
$(“#b1”) ifadesinden sonra click terimi kullanılarak bu id’ye sahip nesne tıkladığında
gerçekleştirilecek olay tanımlanmıştır.
ÖZET
4 tane farklı metot kullanılmıştır. Bunlar animasyon metotlarıdır ve DHTML özelliği
taşırlar.
addClass() metodu, parametrede verilen sınıfı ekler. Bundan dolayı “girilen metin CSS
sınıfında verilen özelliği yansıtır.
removeClass() metodu eklediğimiz CSS sınıfını siler.
hide() metodu gösterilen <div> tagındaki yazıyı parametredeki değere göre saklar. hide
parametresi, yavaş sakla anlamını taşır.
show() metodu yazıyı parametredeki ifadeye göre gösterir. fast burada hızlı anlamını
taşır.
<html>
<head>
<title>Resim buyutme kucultme</title>
<script type="text/javascript" src="[Link]">
</script>
<script type="text/javascript">
$(document).ready(function(){ $
("#toggle1").click(function(event){
$('#b1').slideToggle('slow'); });
$("#toggle2").click(function(event){ $
('#h2').slideToggle('slow'); });
});
</script>
</head>
<body>
<h1 id="u1">jQuery ile Resim buyutme kucultme</h1>
<button id="toggle1"> Toogle Resim </button>
<button id="toggle2"> Toogle Yazi </button>
<br/>
<img src="[Link]" id="b1" />
<br/>
<h2 id="h2">JQuery Öğreniyoruz</h2>
</body>
ÖZET
“ready(function(){“ ile başlayan blok içerisinde $(“#toggle1“) ile id’si
toggle1 olan elemente ve $(“#toggle2“) ile id’si toggle2 olan bir elemente
ulaşılmaktadır Elementlerin click metodunda id’si b1 ve h2 olan
elementlerle işlem yapılmaktadır.
slideToggle() metodu, her hangi bir elementi animasyon seklinde küçültür ya da
büyütür.
$('#b1').slideToggle('slow').slideToggle('fast').hide('slow');
<head>
<title>Kusat</title>
<script type="text/javascript" src="[Link]">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#metin1").click(function(event){
$("#metin1").wrap("<div style='background:green'></div>");
});
});
</script>
</head>
<body>
<h1>Elementi kusalt</h1>
<span id="metin1"/>
Ben kusatilacagim</span>
</body>
</html>
Bir tagı baska bir tag bilgisiyle kuşatmak için wrap() metodu kullanılır.
$("#toggle3").click(function(){
<html> $("img").attr({
<head> width: "300"
<title>Parametre</title> });});
<script type="text/javascript" $("#toggle4").click(function(){
src="[Link]"> $("img").attr({
</script> width: "100"
<script type="text/javascript"> });});});
$(document).ready(function(){ </script>
$("#toggle1").click(function(){ </head>
$("img").attr({ <body>
src: "[Link]" <button id="toggle1“>Resim 1
}); </button>
}); <button id="toggle2“>Resim 2
$("#toggle2").click(function(){ </button>
$("img").attr({ <button id="toggle3“>Buyuk
src: "[Link]" </button>
}); <button id="toggle4“>Kucuk
}); </button>
<hr/><img/>
</body>
</html>
ÖZET
$("img") kodunda # işareti kullanılmamış ve bu şekilde tüm <img> taglarına hitap
edilmiştir. <img> tagının parametrelerini değiştirebilmek için attr() metodu kullanılır.
Bu metodunun içinde {} parantezlerini kullanarak hangi parametreler değiştirilmek
isteniyorsa o parametre yazılır ve “:” işaretinden sonra değeri tırnak
içerisinde yazılır.
CSS Kuralları Eklemek
<html>
<head>
<title>CSS</title>
<script type="text/javascript" src="[Link]">
</script>
<script type="text/javascript">
$("document").ready(function(){
$("h1:eq(1)").css({ background:“blue", color:"white", textAlign:"center“ });
$("h2").css({ background:"black", color:"red", textAlign:"center“ });
});
</script>
</head> <body>
<h1>Birinci satır</h1>
<h1>İkinci satır</h1>
<h1>Üçüncü satır</h1>
<h1>Dördüncü satır</h1>
<h2>ve</h2>
<h1>Beşinci satır</h1>
</body></html>
ÖZET
css() metodunun içerisine {} parantezini kullanarak eklemek istediğiniz CSS
parametrelerini ekleyebilirsiniz.
h1:eq(1) sayfadaki ikinci <h1> tagı ile işlem yapılacağını belirtir.
NESNELER VE SINIFLAR
<html>
<head>
<title>Nesne oluşturma</title>
<script type="text/javascript" src="[Link]">
</script>
<script type="text/javascript">
var x = {
ad:"Özkan", soyad:"Kafadar”
};
alert([Link]+" "+[Link]);
</script>
</head>
<body>
<h1>Nesneleri blok halinde oluşturma işlemi</h1>
</body>
</html>
{} parantezleriyle blok başlangıç ve bitişi tanımlanır. Blok içerisinde nesne, değişken ve
metot tanımları yapılır. Değişken ve metot tanımlanırken “:” kullanılır. Değişken ve
metot tanımlamaları arasında “,” kullanılır.
Örnekte blok tanımlandıktan sonra blok bir değişkene atılıyor ve bu değişken nesne
olarak kullanılıyor.
<html>
<head>
<title>Nesne Erişimi</title>
<script type="text/javascript" src="[Link]">
</script>
<script type="text/javascript">
function Kisi(ad, soyad){
[Link] = ad;
[Link] = soyad;
};
var x = {
ad: "Ahmet",
soyad: "Sarı“ };
var y = new Kisi("Mehmet", "Sarı");
alert(x["soyad"]);
alert(y["ad"]);
</script>
</head>
<body>
<h1>Nesne bölümlerine erişim</h1>
</body>
</html>
FONKSİYONLAR VE METOTLAR
Fonksiyonlar iki türlü çağrılır.
• Doğrudan
• Fonksiyon referansı ile
<html>
<head> <title>Fonksiyon Çağırma</title>
<script type="text/javascript" src="[Link]">
</script>
<script type="text/javascript">
function cikti(){
$("#cikti").html("fonksiyon cikti()");
}
$(document).ready(function(){
// cikti();
$("#b1").click(cikti);
});
</script>
</head> <body>
<h1>Fonksiyon çağırma</h1> <button id="b1"> Click </button>
<div id="cikti"> </div> </body> </html>
ÖZET
cikti() fonksiyonu click() metodunun içerisinde parantez olmadan çağrılmıştır. Bu
çağırma şekli referans ile çağırma şeklidir.
cikti(); seklindeki çağırma şekli ise doğrudan çağırma şeklidir.
function() olarak tanımlanan fonksiyonlar anonim fonksiyonlardır. Bu fonksiyonlar
sadece o yerde kullanılmaktadır. Anonim fonksiyonlar değişkenlere atanabilir veya bu
örnekteki gibi metotlara parametre olarak verilebilir.
CALLBACK VE İÇ FONKSİYONLAR
jQuery’de iç fonksiyonlar çok kullanılmaktadır. İç fonksiyonlar, bir fonksiyonun içerisinde
olan başka fonksiyonlardır. Callback fonksiyonlarda genelde iç fonksiyonlarla beraber
kullanılmaktadır.
<html>
<head> <script type="text/javascript" src="[Link]"> </script>
<title>Callback</title>
<script type="text/javascript">
function benimFonksiyon(icerik){
$("#cikti").html(icerik); }
function getText(metin){ return function(){
benimFonksiyon(metin); }; }
$(document).ready(function(){
$("#b1").click(getText("Kocaeli Üniversitesi"));
$("#b2").click(getText("Köseköy MYO"));
}); </script>
</head> <body> <h1>Callback</h1> <button id="b1"> Tikla </button>
<button id="b2"> Tikla </button> <div id="cikti"> </div>
</body>
</html>
ÖZET
$("#b1").click(getText(“Kocaeli Üniversitesi")); kodunda click() metodunun
parametresine, referans içerikli bir fonksiyon yazmak yerine doğrudan çağrılan bir
fonksiyonun yazıldığını görülmektedir.
getText() fonksiyonu aslında içeriğinde benimFonksiyon() fonksiyonun referansını
iletmektedir, çünkü fonksiyon() olarak tanımlanan anonim fonksiyonların bir başka
özelliği tanımlandıkları yerde referans özelliği taşımalarıdır.
QUEUE() , DEQUEUE() ve CLEARQUEUE()
Fonksiyonlar sıralı olarak çağrılmak isteniyor ise queue() ve dequeue() fonksiyonları
kullanılır.
<html>
<head> <script type="text/javascript" src="[Link]"> </script>
<title>jQuery ile animasyon</title>
<script type="text/javascript">
$(document).ready(function(){ $("*").css({ background: "#ecaae2", color: "#1e1e1e“ });
$("#resim1").css({ position: "absolute", left: "20px", top: "160px“ });
$("#resim2").css({ position: "absolute", left: "450px", top: "60px“ });
$("#b1").click(function(){ $("#resim1").animate({ left: '+=200px‘ }, 2000);
$("#resim1").animate({ top: '300px‘ }, 600); $("#resim1").slideUp("slow");
$("#resim1").slideDown("slow"); $("#resim1").animate({ left: '20px', top: '160px'
}, 700); });
$("#b2").click(function(){ $("#resim2").animate({ left: '+=200px‘ }, 2000).animate({
top: '300px‘ }, 600).slideUp("slow").slideDown("slow").animate({ left: '400px',
top: '60px‘ }, 700); }); });
</script>
</head> <body> <h1>jQuery ile animasyon</h1>
<img src="[Link]" id="resim1" style=""/>
<img src="[Link]" id="resim2“ style="position:absolute;left:20px;top:60px"/>
<button id="b1"> Click1 </button>
<button id="b2"> Click2</button>
</body>
</html>
QUEUE
<html>
<head>
<style>div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:60px;
background:green; display:none; }
[Link] { background:blue; }
p { color:red; } </style>
<script src="[Link]"></script>
</head>
<body>
<p>Kuyruktaki animasyon sayısı: <span></span></p>
<div></div><script> var div = $("div");
function calistir() {
[Link]("slow"); [Link]({left:'+=200'},2000); [Link](1000);
[Link]("fast"); [Link]({left:'-=200'},1500); [Link]("slow");
[Link](1200); [Link]("normal", calistir); }
function goster() {
var n = [Link]("fx"); $("span").text( [Link] ); setTimeout(goster, 100); }
calistir(); goster(); </script>
</body>
</html>
DEQUEUE
<html> <head>
<style>
div { margin:3px; width:50px; position:absolute; height:50px; left:10px; top:30px;
background-color:yellow; } [Link] { background-color:red; }
</style> <script src="[Link]
</head> <body>
<button>Başla</button> <div></div>
<script>
$("button").click(function () {
$("div").animate({left:'+=200px'}, 2000);
$("div").animate({top:'0px'}, 600);
$("div").queue(function () {
$(this).toggleClass("kirmizi");
$(this).dequeue();
});
$("div").animate({left:'10px', top:'30px'}, 700);
});
</script>
</body>
</html>
CLEARQUEUE
<html>
<head> <style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
[Link] { background:blue; }
</style>
<script src="[Link]"></script>
</head>
<body> <button id="basla">Başla</button> <button id="dur">Dur</button>
<div></div>
<script>
$("#basla").click(function () {
var myDiv = $("div"); [Link]("slow"); [Link]({left:'+=200'},5000);
[Link](function () { var _this = $(this); _this.addClass("yenirenk");
_this.dequeue(); });
[Link]({left:'-=200'},1500); [Link](function () { var _this = $(this);
_this.removeClass("yenirenk"); _this.dequeue(); });
[Link](); });
$("#dur").click(function () { var myDiv = $("div"); [Link]();
[Link](); });</script> </body> </html>
DİZİLER
<html>
<head>
<title>Dizi olusumu</title>
<script type="text/javascript" src="[Link]">
</script>
<script type="text/javascript">
$(document).ready(function(){
var a = new Array();
var b = [5, 89, 43, 33];
alert([Link]);
alert([Link]);
});
</script>
</head>
<body>
</body>
</html>
DİZİLER
<html>
<head>
<title>Dizi erisim</title>
<script type="text/javascript" src="[Link]">
</script>
<script type="text/javascript">
var sayilar = new Array();
var sayicek = [1, 2, 3, 4, 5, 6, 7];
$(document).ready(function(){
for (i = 0; i < 7; i++) {
sayilar[i] = [Link](1 + [Link]() * 148);}
for (i in sayilar) {
$("#cikti").append("Sayi " + sayicek[i] + ": ");
$("#cikti").append(sayilar[i] + "<br>");
}
});
</script>
</head><body><h1>Sayilar</h1><div id="cikti">
</div>
</body>
</html>
EACH
Döngülerin zahmetinden kurtarmak için each() fonksiyonu kullanılabilir.
each() fonksiyonuyla dizilere erişim sağlayabildiğimiz gibi nesnelere de erişim
sağlayabilmekteyiz.
<html>
<head>
<title>each()</title>
<script type="text/javascript" src="[Link]">
</script>
<script type="text/javascript">
function isim() { [Link] = 30;[Link] = “Ahmet“;}
var sayi=[1,2,3,5,7,11,13,17,19,23,29];
var kisi = new isim();
$(document).ready(function(){
[Link](sayi,function(belirtec,value){
$("#cikti1").append((belirtec + 1),". Sayi: ", value,"<br />");});
[Link](kisi,function(belirtec,value){
$("#cikti2").append("Belirtec: ", belirtec,", Deger: “,value, "<br />");});});
</script></head><body>
<h1>Sayilar</h1><div id="cikti1"></div><h1>Nesne</h1>
<div id="cikti2"></div></body></html>
[Link]() fonksiyonu iki parametre beklemektedir. Birinci
parametre erişim sağlamak istediğimiz dizi ya da nesne. İkinci parametre ise
bir callback ya da anonim bir fonksiyondur. İkinci parametrede ne
yapılacağı ifade edilir. Belirteç değişkeni dizideki ya da nesnedeki
belirteci belirtmektedir ve value ise belirtilmekte olan sıradaki elemanın
değerini vermektedir.
[Link](sayi,function(belirtec,value){} yapısı şu şekilde düşünebilir:
for (belirtec=0;belirtec<[Link];belirtec++)
jQuery ALANI
jQuery Framework’unda tüm genel değişkenler jQuery alanı denilen bir yerde
kayıt edilir ve bu değişkenlere, jQuery() veya $() şeklinde ulaşılabilir.
<html>
<head><script type="text/javascript" src="[Link]“></script>
<title>jQuery() ve $()</title>
<script type="text/javascript">
$(document).ready(function(){$("#resim1").click(function(){
jQuery("#resim").fadeOut();});
jQuery("#resim2").click(function(){$("#resim").fadeIn();});});
</script>
</head><body>
<h1>jQuery() $()</h1>
<img src="[Link]" id="resim" style=""/><hr />
<button id="resim1“>Tikla</button><button id="resim2“>Tikla</button>
</body>
</html>
$() ve jQuery() şeklindeki tanımlamalar arasında hiç bir fark yoktur. Parametrelerine
bakıldığında bir selektor kullanıldığı görülmektedir. ikinci bir parametre daha verilebilir
fakat bunu başka bir örnekle inceleyelim.
fadeIn() ve fadeOut() metotları animasyon şeklinde gösterilen nesneyi yok eder ve gösterir.
<html>
<head>
<script type="text/javascript" src="[Link]“></script>
<title>jQuery Context</title>
<script type="text/javascript">
$(document).ready(function(){$("#b1").click(function(){
$("#cikti").html(jQuery("input:text", [Link][0]).val());});
$("#b2").click(function(){$("#cikti").html(jQuery("input:text", [Link][1]).val());
});});
</script>
</head><body>
<h1>jQuery Context</h1><form><input/></form><form>
<input/></form><hr/><button id="b1“>Tikla</button><button id="b2“>Tikla</button>
<div id="cikti“></div>
</body>
</html>
$() ve jQuery() tanımlamalarının ikinci parametrelerinde kayıt edilecek verilerin
context’leri girilir, yani verilerin kayıt edilecek bölgeleri girilir.
ikinci parametre girilmezse veriler bulunduğumuz web sayfasında saklanırlar. İkinci
parametre girildiğinde ise bir DOM ya da jQuery nesnesi oluşturmuş oluruz ve veriler bu
nesnelerde saklanırlar.
[Link][0] denildiğinde, context sayfadaki birinci Formdur.
val() metodu seçilmiş nesnenin içeriğindeki değeri iletir.
Birinci Tikla düğmesine tıklandığında birinci Form seçilir,
İkinci Tikla düğmesine tıklandığında ikinci Form seçilir ve bunlar sadece ikinci parametre
sayesinden birbirinden ayrılmaktadır.
DİNAMİK ELEMENT
jQuery’de taglar dinamik olarak oluşturulabilir. String formatında oluşturulan veri
appendTo() metoduyla her hangi bir taga eklenebilir.
<html>
<head><script type="text/javascript" src="[Link]“></script>
<title>jQuery() ve $()</title>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
var sayi = [Link]();
$("<tr><td>Sayi</td><td>" + sayi + "</td></tr>").appendTo("#t1");});});
</script>
</head><body>
<h1>jQuery() ve $()</h1>
<table id="t1"/>
<button id="b1“>Tikla</button>
</body>
</html>
Tıkla düğmesine tıklandığında Tıkla düğmesinin altında bir satır oluşur ve bu oluşan satır
aslında bir tablo satırıdır. Her tıklamada yeni bir tablo satırı oluşturuyor.
$() tanımlamasının içine yazılan String HTML kriterlerine uygun olmalıdır. Mesela bu
örnekteki bir <td> tagını kapatmazsanız kod calışmaz. Ya da bir <div> tagının içine bir
<body> tagı yerleştirmeye çalışırsanız kod yine çalışmayacaktır.
eq()
DOM elementleriyle işlem yapabilmek için eq() çok yararlı bir metottur. Metodun
parametresi, aynı guruptaki elementlerin belirtecidir.
Burada <img> tagı aynı gurup olmuş oluyor ve i değişkeniyle eq() metodundan
yararlanarak tüm <img> tagların CSS özellikleri değiştiriliyor.
<html>
<head><title>eq()</title>
<script type="text/javascript" src="[Link]“></script>
<script type="text/javascript">
$(document).ready(function(){
for (i = 0; i < $("img").length; i++) {
$("img").eq(i).css("left", 50 + (i * 200) + "px");
$("img").eq(i).css("top", 50 + (i * 80) + "px");}});
</script><style type="text/css">
img {position: absolute;}
</style>
</head><body style="text-align:center;font-size:12px">
<img src="[Link]" /><img src="[Link]" />
<img src="[Link]"/><img src="[Link]" />
</body></html>
get()
DOM elementlerine ulaşmanın bir başka yolu da get() metodunu kullanmaktır. DOM
nesnelerine doğrudan erişebilmek için bu yöntem çok uygundur. get() metoduyla $()
parantezinde belirtilen tüm tagları elde ederiz.
<html>
<head><title>get()</title><script type="text/javascript" src="[Link]“></script>
<script type="text/javascript">
$(document).ready(function(){
var resim = $("img").get();
for (i = 0; i < [Link]; i++) {
resim[i].[Link] = 50 + (i * 200) + "px";
resim[i].[Link] = 50 + (i * 80) + "px“;}});
</script>
<style type="text/css“>img {position: absolute;}</style>
</head>
<body style="text-align:center;font-size:12px">
<img src="[Link]" />
<img src="[Link]" />
<img src="[Link]"
/><img src="[Link]" />
</body></html>
get() metoduyla resim değişkenine sayfadaki tüm <img> taglarını DOM elementi şeklinde
aktarmış olduk. eq() metoduyla jQuery nesnesi uzerinden ulaşırken get() metoduyla
doğrudan DOM elementlerine ulaşılabilinmektedir.
index()
index() metoduyla bir elementin sayfadaki pozisyonu bulunabilir.
<html>
<head>
<title>index()</title>
<script type="text/javascript" src="[Link]">
</script><script type="text/javascript">
$(document).ready(function(){
$("img").css("width", "250px");
$("img").click(function(){
var index = $("img").index(this);
$("#cikti").text("belirtec " + index);});});
</script>
</head>
<body style="text-align:center;font-size:12px">
<img src="[Link]" />
<img src="[Link]" />
<h1 id="cikti"></h1>
</body>
</html>
index(this) ifadesindeki this tetikleyici nesne demektir. İkinci resime tıklandığında buradaki
tetikleyici ikinci resim oluyor. text() metoduyla cikti id’sine sahip <h1> tagındaki yazı
belirtec 1 olarak değiştiriliyor.
data() ve removedata()
Bazı durumlarda özel bir element için web sayfasında ek bilgiler kayıt etmek istenebilir.
data() metodu bize bu olanağı tanımaktadır.
<html><head><title>Veri Kayıtı</title>
<script type="text/javascript" src="[Link]“></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(e){
var deger;switch ($("button").index(this)) {case 0:deger = $("img").data("bilgi");
Break;case 1:$("img").data("bilgi", "Bu bir değer");deger = $("img").data("bilgi");
Break;case 2:$("img").removeData("bilgi");deger = undefined;break;}
$("span").text("" + deger);});});
</script></head><body>
<h1>Veri Kayıtı</h1><img src="[Link]"><hr/><button>Metainfo oluştur</button>
<button>Metainfo oluştur ve değer ata</button><button>Metainfo sil</button>
<h2>Metainfo değeri: <span></span>.</h2>
</body>
</html>
data() metodunun birinci parametresi anahtar kelimedir, ikinci parametreyse saklanacak
olan değerdir. undefined terimi tanımlanmamış anlamına gelmektedir. removedata()
metodu ile de, data() ile oluşturulan veri silinebilmektedir.
Selektörler
Selektör, websayfasındaki ağaç yapısındaki elementlerin seçilmesi işlemidir.
<html>
<head><title>Temel Selektorler</title>
<script type="text/javascript" src="[Link]“></script>
<script type="text/javascript">
$(document).ready(function(){$("*").css("color", "blue");
$("#b1").css("border", "10px solid blue");$("hr").css({'background-color': 'grey',
'height': '3px‘,'width': '400px’});$(".sinif").css("fontSize", "22px");
$(".sinif1.sinif2").css({'background-color': 'yellow‘,'color': 'red‘,'fontSize': '30px’});
$("div,p,h1").css("border", "3px solid gray");});
</script>
</head>
<body>
<h1>Temel Selektor</h1>
<span class="sinif1">Bir Logo</span>
<img src="[Link]" id="b1"/><hr/>
<div class="sinif2 sinif2“>Merhaba</div></body> </html>
$(“*”) şeklindeki bir selektör tüm taglara erişim sağlamaktadır.
$(“#b1”) ile belirli bir tagı seçilebilir.
$(“hr”) şeklindeki bir kullanım tüm <hr> taglarına erişim sağlamaktadır.
$("div,p,h1") kullanımıyla parantez içerisinde verilen tag gruplarına erişim sağlamaktadır.
$(".sinif") kullanımında tanımlamadan once bir nokta kullanılmıştır. Nokta, class
parametresi içeren taglara erişim sağlamak içindir.
$(".sinif1.sinif2") olarak tanımlanan sınıf içerisindeki bir sınıfa erişim sağlanır. Bu
class=”sinif1 sinif2” biçiminde algılanabilir.
Filtreler
<html>
<head>
<script type="text/javascript" src="[Link]">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(":header").css({ background: 'black', color: 'white‘ });
$("td:even").css({ color: 'yellow‘ });
$("td:odd").css({ color: 'gray‘ });
$("tr:odd").css({ fontSize: '20px‘ });
$("tr:first").css({ fontSize: '14px‘ });
$("td:lt(2)").css({ background: '#aaa‘ });
$("td:gt(3)").css({ background: '#ff0000‘ });
$("td:eq(2)").css({ color: 'red‘ }); });
</script>
</head>
<body> <h1>Başlık 1</h1> <h2>Başlık 2 </h2> <table> <tr>
<td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td>
<td>6</td> </tr> </table>
</body></html>
$("tr:first") kullanımında görüldüğü gibi tr ile first arasında iki nokta üst üste kullanılmıştır.
Burada : <tr> tagının ilk alt tagına erişilmiştir. first yerine last kullanılsaydı son alt tag
olacaktı.
$("td:even") ile <td> tagı 2’ye bölünebilen bir sayı ise işleme koy anlamını taşımaktadır.
odd anahtar kelimesi de even anahtar kelimesinin tam tersine 2’ye bölünemeyen sayılarda
gecerlidir.
lt(2) ile 2 sayısından küçük olanlar işleme konuluyor.
gt(3) ise 3 sayısından büyük olanlara işaret ediyor.
eq(2) ise 2 sayısına eşit olanlara işaret etmektedir.
Parametre filtreler
<html>
<head>
<script type="text/javascript" src="[Link]">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("[target]").css({ background: 'cyan‘ });
$("[src$=png]").css({ height: '250px‘ });
$("[target=ortam]").css({ color: 'white‘ });
$("[target^=blog]").css({ color: 'yellow‘ });
$("[target*=alternatif]").css({ background: 'gray‘ });});
</script>
</head><body>
<a href="[Link] <br/>
<a href="[Link] target="ortam">link2</a> <br/>
<a href="[Link] target="ortam">link3</a> <br/>
<a href="[Link] target="blog">link4</a> <br/>
<a href="[Link] target= "blogalternatif">link5</a>
</body>
</html>
Parametrik filtrelerde parametreler köşeli parantezlerin içerisine yazılır.
$("[target]") seklindeki bir kullanımla parametresi target olan taga erişim sağlanır.
("[target*=alternatif]") kullanımındaki src parametresinin yanı sıra yıldız kullanıldığı için src
parametresinin değerinin her hangi bir yerinde alternatif kelimesi varsa o tag işleme konur.
Yıldız yerine $ işareti kullanıldığında değerin içinde en sonda gelmesi gerekiyor ^ işareti
değerin başında veriyi istemektedir ve son olarak ! kullanılsaydı veri parametre değerinde
olmaması gerekiyordu ki ancak o zaman o parametrenin bulunduğu taga erişim
sağlanabilirdi.
Form filtreleri
<html>
<head>
<title>Form Filtresi</title>
<script type="text/javascript" src="[Link]">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(":input").css({ border: '1px red solid‘ });
$(":submit").css({ background: 'red‘ }); });
</script>
</head>
<body>
<form><table><tr><td>Kullanıcı adı</td><td>
<input type="text"/> </td> <td> <input type="submit" value="OK" /> </td> </tr>
</table>
</form>
</body>
</html>
Form filtreleri
<html>
<head>
<title>Form filtresi 2</title>
<script type="text/javascript" src="[Link]"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("form :checkbox:first").parent().append('Seçiminizi yapınız').css({ background: "yellow",
border: "1px red solid“ }); });
</script>
</head>
<body>
<h1>Filtreler</h1>
<form> <table width="500"> <tr> <td> </td> <td>
<input type="checkbox" name="agb" /> </td> <td> </td> <td>
<input type="checkbox" name="nl" /> </td> </tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>slice filtresi</title>
<script type="text/javascript" src="[Link]">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("span").slice(2).css("color", "red");
$("span").slice(1,3).css("background", "cyan");});
</script>
<style type="text/css">
div { font-size: 42px; border: 1px solid; width: 300px; }
</style>
</head>
<body>
<div> Söz: <span>Kendini</span>, <span>affetmeyen</span>
bir insanın, <span>bütün</span>
kusurları <span>affedilebilir</span>
Konfüçyüs
</div>
</body>
</html>
Is() filtresi
<html>
<head>
<title>is filtresi</title>
<script type="text/javascript" src="[Link]“></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
if ($(this).is(":first-child")) { alert("İlk düğme"); }
if ($(this).is(":last-child")) { alert("İkinci düğme"); } }); });
</script>
</head>
<body>
<button>
Click1
</button>
<button>
Click2
</button>
</body>
</html>
You might also like
- İstemci Taraflı Programlama: Javascript: Javascript'In Kodlama ÖzellikleriNo ratings yetİstemci Taraflı Programlama: Javascript: Javascript'In Kodlama Özellikleri30 pages
- 15temmuzsehitlerfenlisesi 2025 Calisma DokumaniNo ratings yet15temmuzsehitlerfenlisesi 2025 Calisma Dokumani4 pages
- Sınıf Bilişim Teknolojileri Deers NotlarıNo ratings yetSınıf Bilişim Teknolojileri Deers Notları4 pages
- İbrahim Çelikbilek (Kodlab) - JavaScript50% (2)İbrahim Çelikbilek (Kodlab) - JavaScript337 pages
- Java Bi̇lgi̇sayar Di̇li̇yle ProgramlamaNo ratings yetJava Bi̇lgi̇sayar Di̇li̇yle Programlama565 pages
- Java Script Nesneler-Dä°zä°ler-Dã Ngã LerNo ratings yetJava Script Nesneler-Dä°zä°ler-Dã Ngã Ler9 pages
- YBS404U-VER Madenc L: Ünite 1: Temel KavramlarNo ratings yetYBS404U-VER Madenc L: Ünite 1: Temel Kavramlar4 pages
- 2018-2019 Öğretim Yılı Bahar Dönemi Ara Sınavı: Müşteri İlişkileri YönetimiNo ratings yet2018-2019 Öğretim Yılı Bahar Dönemi Ara Sınavı: Müşteri İlişkileri Yönetimi16 pages
- 2016-2017 Bahar Dönemi Ara Sınavı: Müşteri İlişkileri YönetimiNo ratings yet2016-2017 Bahar Dönemi Ara Sınavı: Müşteri İlişkileri Yönetimi12 pages
- 2017-2018 Öğretim Yılı Bahar Dönemi Ara Sınavı: Müşteri İlişkileri YönetimiNo ratings yet2017-2018 Öğretim Yılı Bahar Dönemi Ara Sınavı: Müşteri İlişkileri Yönetimi16 pages
- PZL208U-MÜ TER L K LER Yönet M: Ünite 4: Mü Teri Li Kilerinde Stratejik Yakla ImNo ratings yetPZL208U-MÜ TER L K LER Yönet M: Ünite 4: Mü Teri Li Kilerinde Stratejik Yakla Im4 pages
- 2015-2016 Bahar Dönemi Ara Sınavı: Müşteri İlişkileri YönetimiNo ratings yet2015-2016 Bahar Dönemi Ara Sınavı: Müşteri İlişkileri Yönetimi12 pages
- PZL208U-MÜ TER L K LER Yönet M: Ünite 1: Mü Teri Li Kileri Yönetimi: Tanımı, Kapsamı, ÖnemiNo ratings yetPZL208U-MÜ TER L K LER Yönet M: Ünite 1: Mü Teri Li Kileri Yönetimi: Tanımı, Kapsamı, Önemi3 pages
- Gün 10 Lerp Clamp Light Raycast KullanımıNo ratings yetGün 10 Lerp Clamp Light Raycast Kullanımı10 pages
- Veri Yapıları - Source Linked List SinglyNo ratings yetVeri Yapıları - Source Linked List Singly5 pages
- Gün 8 Unity Vuforia AR Uygulama Virtual ButtonNo ratings yetGün 8 Unity Vuforia AR Uygulama Virtual Button26 pages