Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > General Coding > Coding Tutorials
You last visited: Today at 14:25

  • Please register to post and access all features, it's quick, easy and FREE!

Advertisement



jQuery - Webdesign auf dynamischer Ebene

Discussion on jQuery - Webdesign auf dynamischer Ebene within the Coding Tutorials forum part of the General Coding category.

Reply
 
Old   #1

 
Ravenstorm's Avatar
 
elite*gold: 0
The Black Market: 100/0/0
Join Date: Jan 2010
Posts: 13,150
Received Thanks: 3,207
Post jQuery - Webdesign auf dynamischer Ebene

Hallo,

da ich bereits einmal ein Tutorial über jQuery-Ui gemacht habe um einen dynamischen Content abzubilden werde ich mich in diesem Tutorial mit allgemein jQuery beschäftigen, bedeutet Gliederung in:



Im allgemeinen will ich euch in diesem Menüpunkt lediglich vermitteln was jQuery überhaupt ist. jQuery ist lediglich eine Javascript Libary, welche Javascript-Funktionen zusammenfasst in eine jQuery-Funktion um einen dynamischen Content zu erzeugen. In diesem Fall kann der dynamische Content diese Aspekte abdecken: Dynamischer Inhalt, Dynamisches Design.
Dynamischer Inhalt beinhaltet Manipulations-Funktionen um Inhalt zu bearbeiten nachdem eine Suche auf ein gewisses Element durchgeführt worden ist. Das dynamische Design beschäftigt sich in dem Sinne mit Funktionen um gefundenen Elementen z.B. CSS-Klassen, CSS-Eigenschaften, Events oder generell so etwas wie Animationen (FadeIn,FadeOut oder auch ein einfaches verschieben des Bildes)
Offizielle Homepage:
Downloads und Beispiele sind dort massig vorhanden.

Einbinden können wir das ganze als minimal oder als vollständige formatierte Datei. Wie üblich bei JS-Libarys müssen wir diese einbinden das können wir mit folgendem HTML-Eintrag im <Head> machen:
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In diesem Fall habe ich es einfach mal von der Homepage eingebunden, es ist aber natürlich möglich sich die Libary runterzuladen und dann persönlich anzupassen.

Zu diesem Bereich gibt es nur 2 Sachen zu sagen.

1. Wir müssen javascript sagen, dass er nun durch das jQuery Objekt handeln soll.
2. Wir müssen mit jQuery sicher gehen, dass wir alles ohne Störungen bearbeiten können.

Zu Punkt eins kann man nicht viel zeigen oder sagen, denn jQuery wird ironischer weise durch das jQuery-Objekt wieder gespiegelt oder abgekürzt durch ein simples $.

Bsp.
Ohne Abkürzung:
Code:
jQuery("#testButton").click();
Mit Abkürzung:
Code:
$("#testButton").click();
Und somit stellt der Punkt 2 kein Problem mehr da:

Code:
$( document ).ready(function() {
//jQuery Code
});
Das $-Zeichen spiegelt das jQuery-Objekt wieder und soll lediglich das Dokument überprüfen ob es bereit ist. jQuery Code außerhalb dieser "Funktion" auszuführen könnte zu Fehlern führen.


1: Methods
2: Effects
3: Events

Diese 3 Wörter beschreiben den Vorgang in jQuery ganz gut. Denn alle 3 Wörter können sich gegenseitig auslösen und ausführen. z.B. Unsere Methoden kann dazuführen ein Effekt anzuzeigen und dabei ein Event zu aktivieren. Das ganze kann aber auch ein Event sein, welches eine Methode ausführt um einen Effekt anzuzeigen. Im Endeffekt hängen diese 3 Namen sehr dich mit einander zusammen und man sollte sich, wenn mann sich aktiv mit jQuery beschäftigen will, besonders mit diesen 3 Namen auseinander setzen.


Ich hab das Tutorial jetzt extra mal klein gehalten, da es lediglich eine kleine Vorstellung von jQuery sein soll. Die Grundidee habe ich hiermit verwirklicht, falls eine Erweiterung des Tutorials erwünscht ist, werde ich dieses natürlich erweitern. Ich beschäftige mich nun seit ca. 2 Jahren mit jQuery und kann somit Support leisten, falls ihr Fragen/Probleme habt. Für Konkrete Fragen bitte ich euch allerdings an die richtige Sektion dafür zu wenden: oder mir das ganze per PN mitzuteilen.
Kritik ist immer erwünscht.
Ravenstorm is offline  
Thanks
9 Users
Old 11/26/2013, 20:39   #2
 
elite*gold: 0
Join Date: Dec 2009
Posts: 16
Received Thanks: 4
Ich liebe dich dafür .

Danke und weiter so
killax2x is offline  
Old 06/19/2014, 12:10   #3
 
yo#Legion's Avatar
 
elite*gold: 0
Join Date: Jun 2014
Posts: 6
Received Thanks: 6
Suppiiiii Tutorial!
Vielen Dank
yo#Legion is offline  
Reply


Similar Threads Similar Threads
jQuery nur bestimmte Elemente verändern
08/07/2013 - Web Development - 5 Replies
Hallo, ich hab derzeit ein Template, was aber nicht ganz funktioniert wie es soll. Wenn man bestimmten Menu Punkten "unclickable" gibt, sind die trotzdem clickable. Somit bin ich dann gerade in der scripts.js und habe folgende Funktion: jQuery( "li" ).each(function() {
[Tutorial] MW3 | Ammo Glitch ft. Wichtige Sachen [German][HD]
01/27/2012 - Video Art - 0 Replies
MW3 | Ammo Glitch ft. Wichtige Sachen - YouTube LG
Elemente ändern
06/28/2011 - Flyff Private Server - 2 Replies
hey elitepvper, ich wollte mal fragen welche dateien dafür stehen, die elemente zu ändern. also ich dachte das es für wind im model -> texture -> sfx_ItemWind usw ist. aber als ich die ganzen dateien geränder hatte, habe ich ingame keine änderung gespürt. kann mir einer sagen welche dateien die wind elemente sind? danke im vorraus
Visual Basic Tutorial 1.0 "Einführung"
05/09/2011 - Tutorials - 7 Replies
Viusal Basic Tutorial 1.0 Einführung -> Vorwort -> Download und Installation -> Die Toolbox -> Die .exe Datei -> Nachwort "Vorwort"
[SUCHE] C++ Einführung/Tutorial
10/17/2010 - C/C++ - 1 Replies
nabend, suche ein gutes tutorial in die welt der programmiersprache c++ mir ist bewusst das man sowas net von jetz auf gleich lernt aber ich hab vor mich da ein bischen zu bilden ;) kenntnisse bisher: nur autoit und bissl java postet einfach mal paar links die gut für komplette anfänger sind :) lg und vielen dank schonmal :mofo:



All times are GMT +2. The time now is 14:25.


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Terms of Service | Abuse
Copyright ©2024 elitepvpers All Rights Reserved.