jquery kütüphanesini sayfaya eklemek için iki yöntem vardır. 1. Direkt jquery nin sitesinden ekleme
|
|
- Esen Togan
- 8 ay önce
- İzleme sayısı:
Transkript
1 az kod, çok iş!
2 jquery bir JavaScript kütüphanesidir 2006 yılında, John Resig adlı bir JavaScript geliştiricisi tarafından yazılmaya başlanmıştır. Javascript ile yapmak istediğimiz bir uygulama için yazmamız gereken kodlar onlarca satır olabilecekken, JQuery ile birkaç satır kod ile aynı uygulamayı yapmamız mümkün olabilmektedir. jquery ile HTML elemanları seçilir (query) ve bu elemanlarla olaylar gerçekleştirilir.
3 Bütün modern browserlarla uyumlu HTML elemanlarını seçme (selection) HTML elemanlarını yenide düzenleme (manipulation) CSS düzenleme ve değiştirme HTML olaylarına bağlı fonksiyonlar JavaScript Efekt ve animasyonları HTML DOM (Document Object Model) olayları AJAX kullanımı Çok Sayıda Plugin
4 jquery kütüphanesini sayfaya eklemek için iki yöntem vardır. 1. Direkt jquery nin sitesinden ekleme <script type="text/javascript" src=" "> </script> 2. Belirtilen adresten download edip yerel dosyadan kullanma <script type="text/javascript" src="js/jquery js"> </script>
5 jquery ile HTML eleman(lar)ı seçilir ve bu eleman(lar)la belli olaylar meydana getirilir. Temel syntax : $(selector).action() dolar işareti ($) qquery i tanımlar. (selector) "(query)" belirtilen HTML elemanını ifade eder. action() seçilen eleman üzerinde istenen olayı meydana getirir.
6 $(this).hide() belirtilen elmanı gizler. $("#test").hide() id="test" olan elemanı gizler. $("p").hide() bütün <p> leri gizler. $("p.test").hide() class="test" olan bütün <p> leri gizler. $(".test").hide() class="test" olan bütün elemanları gizler.
7 Bütün jquery fonksiyonları (methodları), document.ready() fonksiyonu içerisinde bulunur. $(document).ready(function(){ }); // jquery fonksiyonları burada yazılır...
8 $("*") bütün elemanları seç. $("p") bütün<p> leri seç. $("p.intro") class="intro" olan bütün <p> ler $("p#intro") id="intro" olan bütün <p> ler $(":button") bütün <button> ları seç. $(":even") bütün çift elemanları. $(":odd") bütün tek.
9 Olay yakalama fonksiyonları jquer in temel elemanlarıdır. Olay yakalama HTML de belli bir olay meydana geldiğinde bu olayla ilgili ne yapılacağını belirtir. Örnek olaylar Sayfanın yüklenmesi Mouse tıklama Mouse hareketi Text kutusunu doldurma gibi Bu fonksiyonlar HTML in <head> bloğunda yazılır.
10 Fonksiyonlar $(document).ready(function) $(selector).click(function) $(selector).dblclick(function) $(selector).focus(function) $(selector).mouseover(function) Tanımı Fonksiyon dökümandaki olayları yakalamaya hazır Seçilen elemana tıklanmasıyla b başlatılacak veya çağrılacak fonksiyon Seçilen elemana çift tıklanmasıyla Seçilen eleman aktif hale geldiğinde Mouse bir elemanın üzerine geldiğinde
11
12 Üzerine tıkladığımız div ortadan kayboluyor
13 jquery css() Method jquery CSS stillerini değiştirmek için css() fonksiyonunu kullanır. css() farklı görevleir yerine getirmek için 3 farklı yazım kuralına sahiptir. css(name) : Belirtilen elemanın özellik değerini (property value) döndürür. css(name,value) : Belirtilen elemanın CSS özelliğini ve değerini değiştirir. css({properties}) : Birden fazla CSS özelliğini ve değerini değiştiri.
14 CSS Özelliğini Döndürme $(this).css("background-color"); mevcut elemanın arka plan rengini döndürür.
15 CSS Özelliğini Belirleme $("p").css("background-color","yellow"); Paragrafların arka plan rengini sarı yap.
16 Birden Fazla CSS Özelliğini Belirleme $("p").css({"background-color":"yellow","fontsize":"24pt"}); Paragrafların arka plan rengini sarı ve font büyüklüğünü 24pt yap.
17
18 Ajax uygulaması geliştirmek için jquery birçok fonksiyona sahiptir. $(document).ready(function(){ }); $("#btn1").click(function(){ $("div").load('sayfa1.html'); }); $("#btn2").click(function(){ $("div").load('sayfa2.html'); });
19 AJAX : Asynchronous JavaScript And XML AJAX hızlı ve dinamik bir web sayfası geliştirme tekniğidir. AJAX web sayfalarının asenkron bir şekilde güncellenmesini ve daha küçük miktarlarda verinin sunucudan yüklenmesini sağlar. Bu da sayfanın bütününü yüklemeye göre daha üstün bir performans sağlar.
20 Bir uygulama geliştirme tarzıdır. Birden fazla teknolojiyi kullanır. XHTML ve CSS DOM ve JavaScript XMLHTTPRequest XMLHTTPRequest i kullanarak asenkron iletişimi sağlar. Güncel tüm web tarayıcıları tarafından desteklenmektedir.
YZM 3215 İleri Web Programlama
YZM 3215 İleri Web Programlama Yrd. Doç. Dr. Deniz KILINÇ Celal Bayar Üniversitesi Hasan Ferdi Turgutlu Teknoloji Fakültesi Yazılım Mühendisliği 1 BÖLÜM - 3 jquery II. Bölüm Bu bölümde; Jquery II. Bölüm
CSS3, HTML 5 ve jquery ile Web Tasarımı. Umuthan Uyan
CSS3, HTML 5 ve jquery ile Web Tasarımı Umuthan Uyan JavaScript Kütüphanesi JavaScript ile yazılan özellikle AJAX ve diger web teknolojilerini kullanarak web yazılımlarını kolaylıkla gelistirmemizi saglayan
Öğr. Gör. Serkan AKSU http://www.serkanaksu.net. http://www.serkanaksu.net/ 1
Öğr. Gör. Serkan AKSU http://www.serkanaksu.net http://www.serkanaksu.net/ 1 JavaScript JavaScript Nedir? Nestcape firması tarafından C dilinden esinlenerek yazılmış, Netscape Navigator 2.0 ile birlikte
AJAX nedir? AJAX nasıl çalışır? AJAX. Tahir Emre KALAYCI. Sunucu Yazılım Teknolojileri
nedir? Sunucu Yazılım Teknolojileri nedir? Gündem 1 nedir? 2 XML 3 nedir? nedir? : Asynchronous JavaScript and XML Yeni bir teknoloji değil, daha çok bir yöntembilim, teknik, tasarım deseni. RIA = Zengin
solid; BORDER-LEFT: #1F9FFF 0px solid; BORDER-RIGHT: #1F9FFF 0px solid; BORDER-TOP: #1F9FFF 0px solid; COLOR: #1F9FFF; FONT-FAMILY: Trebuschet MS;
Web Teknoloji Kavramları Ahmet Demirelli ahmetdemirelli@sabanciuniv.edu MCP, SCJP 5.0, SCWCD 1.4 Sabancı Üniversitesi Bilişim Teknolojileri Yüksek Lisans Programı 6/9/2007 Sabanci University 1 Ajanda CSS
Basit bir web uygulaması
AJAX Ahmet Demirelli ahmetdemirelli@sabanciuniv.edu SCJP 5.0, SCWCD 1.4 Sabancı Üniversitesi Bilişim Teknolojileri Yüksek Lisans Programı 3/20/2007 Sabanci University 1 Ajanda Neden AJAX ihtiyacı AJAX
Algorithm of Your Life. AJAX ve...
AJAX ve... Neler Yapcaz? Tanışma Seminere Başlama Seminer Konusunun Anlatılması Seminerin Tamamlanması Vedalaşma 2/30 AJAX da neymiş? 3/30 Web Teknolojilerine Bakın 4/30 AJAX budur... AJAX (Asynchronous
BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1
BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML 5 Yük. Müh. Köksal GÜNDOĞDU 2 HTML 5 Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda
Arayüz Geliştirme Dokümantasyonu
Arayüz Geliştirme Dokümantasyonu Proje: İş: Müşteri: Nosab Web Sitesi Arayüz Geliştirme Aeronorm Index 1. Sayfalar 2. Renk Paleti 3. Tipografi 4. Kutu Modeli 5. Bileşenler 6. Kod ve Sayfa Yapısı 7. Responsive
JSON Korsanlığı. Mesut Timur, Şubat 2010, WGT E-Dergi 4. Sayı
JSON Korsanlığı Mesut Timur, Şubat 2010, WGT E-Dergi 4. Sayı İnternetin gün geçtikçe hayatımızdaki önemi arttı ve web siteleri milyonlarca insan tarafından girilen yerler haline geldi. Artık çevremizden
Web 2.0 Güvenliği @2014 Örnek Eğitim Notu bilgi@bga.com.tr
Web 2.0 Güvenliği @2014 Örnek Eğitim Notu bilgi@bga.com.tr Javascript 1995 Netscape, Brendan Eich tarafından geliştirildi. Dinamik olmasının yanında en önemli iki özelliği; Lambda Closure Javascript -
Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2015 2016 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 23 May. 2016 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları yardımıyla
Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama
Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının
JavaScript & DOM XML & JSON
JavaScript & DOM XML & JSON Ele alınacak başlıklar JavaScript Dili DOM (Document Object Model) JavaScript ve OO Programlama XML ve JSON JavaScript Kısım 1 Gelişim JavaScript, 1995 yılında Netscape tarafından
WEB TASARIMIN TEMELLERİ
WEB TASARIMIN TEMELLERİ ~ Sunu 2 ~ Öğr. Gör. Mehmet Fatih TAN http://blog.kmu.edu.tr/mftan mftan@kmu.edu.tr Bilgi paylaşıldıkça kıymetlenir.. Kaynak göstermek şartıyla sunu içeriğini çalışmalarınızda kullanabilirsiniz.
WEB TASARIMININ TEMELLERİ
WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri
2. Belgeye Metin Ekleme
METİN İŞLEMLERİ Flashta 2 çeşit metin vardır:1)tlf metni 2)Klasik metin 1)TLF Metni : CS5 ile başlayan metin türü. TLF metni FLA dosyanızın yayınlama ayarlarında ActionScript 3.0 ve Flash Player 10 veya
Güncel İnternet Teknolojileri ve PHP 2
Neler var? HTML CSS (Cascading Style Sheets) DOM (Document Object Model) JavaScript jquery kütüphaneleri W3C Standartları HTTP (Hypertext Transfer Protocol) Requests POST GET Headers Çerezler (Cookies)
4.41. WEB DE GENÇ TEKNİK: AJAX. Fırat Üniversitesi Fen Bilimler Enstitüsü, Elazığ. Fırat Üniversitesi Teknik Eğitim Fakültesi,
4.41. WEB DE GENÇ TEKNİK: AJAX 1 Zeynep ÖZER 2 Asaf VAROL 1 Fırat Üniversitesi Fen Bilimler Enstitüsü, Elazığ 2 Fırat Üniversitesi Teknik Eğitim Fakültesi, Elektronik ve Bilgisayar Eğitimi Bölümü, Elazığ
İNTERNET PROGRAMLAMA II. Tanımlar
İNTERNET PROGRAMLAMA II Tanımlar WWW( World Wide Web) Dünya üzerindeki bütün bilgisayarların bağlı olduğu bir ağdır. Çoğunlukla Web olarak adlandırılır. Web üzerindeki bilgisayarlar standart protokolleri
Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.
Ve Sırası, Diez, Nokta, Yıldız, Class Css Css stillerinin nesneyi etkileme yolları ve sıraları: (#), (.), (*), (class) CSS de nasıl kullanılır bu başlık altında bulabilirsiniz. Css Nedir? HTML bize metin
Google Search API ile ajax arama
Google Search API ile ajax arama 14 Ağustos Salı 12 http://mfyz.com/google-search-api-ile-ajax-arama Eğer bir kaynak arıyorsanız, indexlerin güncelliği, genişliği gibi nedenlerden dolayı, diğer arama motorları
HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek
STİLLER CSS NEDİR? CSS (Cascading Style Sheet) Stiller, HTML elemanlarının nasıl gösterileceğini tanımlar. Stiller HTML de karşılaşılan bazı problemleri çözmek için HTML 4.0 a eklenmiştir. HTML, web
Web Önyüzü Nasıl Olmalı? : İskelet {css} : Görünüm JavaScript() : Etkileşim
Web Önyüzü Nasıl Olmalı? : İskelet {css} : Görünüm JavaScript() : Etkileşim Bu üç öğe olabildiğince esnek bağlı olmalı Kötü Örnek / İyi Örnek Standartlara uygun olmalı! Standartlara uygun
Metin Text Kutuları. Metin kutusu oluşturmak için tagı kullanılır.
Form İşlemleri Form Nedir? Şu ana kadar öğrendiğimiz konularda hep ziyaretçilere veri göstermeye veya bilgi vermeye çalıştık. Gerek metinlerle, gerekse liste veya resimlerle ziyaretçilere bilgi sunmayı
YZM 3215 İleri Web Programlama
YZM 3215 İleri Web Programlama Yrd. Doç. Dr. Deniz KILINÇ Celal Bayar Üniversitesi Hasan Ferdi Turgutlu Teknoloji Fakültesi Yazılım Mühendisliği 1 BÖLÜM - 6 AJAX Bu bölümde; AJAX nedir? AJAX nasıl çalışır?
HESAP MAKİNASI YAPIMI
HESAP MAKİNASI YAPIMI 1..Aşağıdakine benzer görünüm ve butonları hazırlayın. 2. 24. Butonun içerisine aşağıdaki kodları yazın. 3. Yeni bir layer ekleyip Frame1 F9 na aşağıdaki kodları ekleyelim. 4. Butonlardan
WEB TASARIMININ TEMELLERİ
WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri
1 JQUERY MOBILE 2 JQM SAYFA YAPISI
İÇİNDEKİLER IX İÇİNDEKİLER 1 JQUERY MOBILE 1 Mobil Hayat 1 Mobil Cihazlar 2 Mobil telefonlar 2 Düşük Teknoloji Ürünü Mobil Cihazlar 2 Orta ve Üst Seviye Mobil Cihazlar 3 Akıllı telefonlar 3 Tabletler 4
YZM 3215 İleri Web Programlama
YZM 3215 İleri Web Programlama Yrd. Doç. Dr. Deniz KILINÇ Celal Bayar Üniversitesi Hasan Ferdi Turgutlu Teknoloji Fakültesi Yazılım Mühendisliği 1 BÖLÜM - 2 Javascript Çerçeveleri ve jquery Giriş Bu bölümde;
4 Front Page Sayfası Özellikleri
4 Front Page Sayfası Özellikleri İsterseniz Frontpage penceresinin sağ tarafından, isterseniz araç çubuklarından faydalanarak yeni bir sayfa açın. Frontpage te çeşitli sayfa şablonları bulunmaktadır. Ancak
YZM 3215 İleri Web Programlama
YZM 3215 İleri Web Programlama Yrd. Doç. Dr. Deniz KILINÇ Celal Bayar Üniversitesi Hasan Ferdi Turgutlu Teknoloji Fakültesi Yazılım Mühendisliği 1 BÖLÜM - 10 AJAX Bu bölümde; AJAX nedir? AJAX nasıl çalışır?
Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1
Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Son Teslim Tarihi: 5 Mayıs 2014-09:00 (ÖRGÜN) - 19:00 (İKİNCİ) Ödevi Teslim Alacak Olan Asistan:
Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 11-14 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları
Bilgisayar Programcılığı Ön Lisans Programı WEB EDİTÖRÜ. Öğr. Gör. Rıza ALTUNAY
CSS Ünite 7 Bilgisayar Programcılığı Ön Lisans Programı WEB EDİTÖRÜ Öğr. Gör. Rıza ALTUNAY 1 Ünite 7 CSS Öğr. Gör. Rıza ALTUNAY İçindekiler 7.1. CSS KULLANIM ALANLARI... 3 7.1.1. Yerel Kullanım Alanı...
Özgür Yazılımlarla Web Programlama. Özlem Özgöbek ozlem.ozgobek@linux.org.tr
Özgür Yazılımlarla Web Programlama Özlem Özgöbek ozlem.ozgobek@linux.org.tr Web Nedir? İnternet dünya çapında birbirine bağlı bilgisayar ağlarından oluşan bir sistemdir. Web ise internette çalışan servislerden
1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız.
1.1 Web Kavramlar 117 Anahtar 7erim/er 1.1.1.1 Web ve Internet terimlerini tanımlayınız. Her birinin anahtar özelliklerini tanımlayınız. Web bir Internet hizmetidir. Web Internet üzerinde bağlantılı html
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language) Ele Alınacak Başlıklar HTML tarihçesi Bir HTML dökümanın genel görünümü HTML ve tarayıcı etkileşimi Tarihçe Internet The World Wide Web (www) HTML URI/URL HTTP Tim Berners-Lee
CSS i Web Sayfalarına Eklemek
CSS i Web Sayfalarına Eklemek CSS in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value) XML de
PROGRAMLAMA DERSİ 1. İNTERNET
PROGRAMLAMA DERSİ 1. İNTERNET İnternet sunucu-istemci modeline göre çalışır. Fiziksel olarak bu sistem genelde isteği yapan bir bilgisayar (kullanıcı-client) ve bu isteği karşılayan özel bir bilgisayar
VISILABS SEGMENT KURULUM KILAVUZU
VISILABS SEGMENT KURULUM KILAVUZU ARALIK 2014 1)GİRİŞ A)TAKİP MEKANİZMASI Visilabs Segment, web siteleri ve mobil uygulamalarda yapılan tüm hareketleri takip etmektedir. Bu hareketlerin takibi, web sitelerinde
FireBug eklentisini eklentiyi yazan sitesinden veya FireFox un eklentiler indirebilirsiniz.
Firebug Hakkında Firebug hakkında... Kod yazarken bir sorunla karşılaşırız ve sorunlarla uğraşmak her ne kadar güzel bir şey olmasa da bu işin olmazsa olmazıdır. Kod yazarken muhakkak bazı sorunlarla karşılaşacağız,
2-Hafta Temel İşlemler
2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar * Htm Sayfasının Oluşturulması * Temel Html Komutları * Html Sayfalarının Düzenlenmesi * Html Sayfalarının İncelenmesi Html Komutlarının
ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR
ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ 1 Uygun ortam sağlandığında web sayfaları için formlar oluşturabileceksiniz. ARAŞTIRMA Web sayfalarında formların kullanım amaçlarını ve nasıl kullanıldığını
CODEIGNITER SEMINERI KÜTÜPHANE YAZMA GÜVENLIK ÖNLEMLERI CODEIGNITER 2.0
CODEIGNITER SEMINERI KÜTÜPHANE YAZMA GÜVENLIK ÖNLEMLERI CODEIGNITER 2.0 Özgür Web Teknolojileri Günleri 2010 Yeditepe Üniversitesi, Airties Salonu 16 Ekim 2010 (14:00 14:45) Fatih BAZMAN (http://codeigniter.gen.tr)
Html temelleri. Ders 4
Html temelleri Ders 4 1 Giriş World Wide Web (Kısaca web) uygun protokoller kullanarak haberleşen yazılımların çalıştırıldığı internet üzerindeki sistemlerin bir koleksiyonudur. Çoğu sistem gününüzde en