jQuery Performance

Demos: http://jsperf.com/jquery-performance-2015

Die folgenden Tipps erklären wie man die Performance von jQuery verbessern kann, einfach indem man das Framework korrekt einsetzt und bei kritischem Code auf JavaScript zurückgreift.

– verwende “gute” Selektoren
– verwende Variablen als Cache
– verwende “chaining” -> .function1().function2()…
– vermeide Dom Interaktionen

jQuery-Selektor Performance

Sehr Schnell: $(“#id”) || $(#id).find(“.class”)
Schnell: $(“tag.class”)
Normal: $(“.class”) || $(“.class”).children()
Langsam: $(“tag”)
Langsamer: $(“tag1 tag2”) || $(“.class tag:type”)
Extrem Langsam: $(“.class > *”) || $(“.class :type”)

Daraus ergibt sich z.B. das eine Kombination aus “.class #id” langsamer ist, als ein einfacher “#id”-Selektor. Deshalb ist es bei jQuery auch schneller einen bestimmten Bereich im Dom via “#id”-Selektor zu laden und anschließend in der entsprechenden Variable nach weitern HTML-Fragmenten zu suchen. -> .find()

Zudem sollte man bei Selektoren bedenken, dass rechts immer der spezifischste Ausdruck stehen sollte. Gegebenenfalls benötigt man jedoch gar keine lange Selektoren, wenn man Zugriff auf das entsprechende HTML hat, um dieses zu ändern.

// Unoptimiert:
$(“tag1.class1 .class2”)

// Optimiert:
$(“.class1 td2.class2”)

Demo (#id vs .class): 
http://jsperf.com/cached-jquery-selector-2015-v2/2

Demo (jQuery – find): 
http://jsperf.com/cached-jquery-selector-2015-v3

Demo (jQuery – find vs jQuery Plugin): 
http://jsperf.com/cached-jquery-selector-vs-jquery-plugin

Demo (jQuery – simple vs jQuery Plugin): 
http://jsperf.com/jquery-simple-vs-jquery-plugin

Demo (Zepto.js vs jQuery):
http://jsperf.com/cached-jquery-selector-vs-zepto-selector-v2/5

Demo (Zepto.js vs jQuery vs Sprint.js vs JavaScript): 
http://jsperf.com/zepto-vs-jquery-2013/103

Demo (Sprint.js vs jQuery): 
http://jsperf.com/cached-jquery-selector-vs-sprintjs-selector

Demo (JavaScript vs jQuery): 
http://jsperf.com/cached-jquery-selector-vs-javascript

IMMER Variablen als Cache verwenden

Um auf bestimmte HTML-Fragmente im Dom zuzugreifen ist es aus Performance-Sicht hilfreich, wenn man sich einen Teil vom Dom in einer Variable speichert und anschließend nur noch innerhalb von JavaScript arbeitet. z.B.:

// Sehr langsam (& Sinnfrei):
$('.myElement span').each(function(i) {
  $('.myElement span').eq(i).css('color', 'green');
});

// Langsam:
$('.myElement span').each(function() {
  $(this).css('color', 'green');
});

// Langsam:
$('.myElement span').css('color', 'green');

// Schneller:
$('#myElement').find('span').css('color', 'green');

// Noch schneller: (jQuery + JavaScript)
myElement = $('#myElement').find('span');
for (var i = 0, len = myElement.length; i < len; i++) {
  myElement[i].style.color = 'green';
}

// Sehr schnell: (kein jQuery)
myElement = document.querySelector('.myElement');
myElement = myElement.querySelectorAll('span');
for (var i = 0, len = myElement.length; i < len; i++) {
  myElement[i].style.color = 'green';
}

// Sehr sehr schnell: (kein jQuery)
myElement = document.getElementById('myElement');
myElement = myElement.getElementsByTagName('span');
for (var i = 0, len = myElement.length; i < len; i++) {
  myElement[i].style.color = 'green';
}

Demo (mit / ohne Cache-Variable): 
http://jsperf.com/cached-jquery-selector-2015-v2

Zusammenfassung:

jQuery ist im Vergleich mit JavaScript oder anderen Frameworks langsamer, aber wenn man z.B. noch den IE8 unterstützen muss, sollte man auf ein umfassendes Framework wie jQuery nicht verzichten, da ansonsten die entgütige Entwicklungszeit (z.B. Bugfixes für IE) die bessere Performance nicht rechtfertigt. Ein weitere Pluspunkt für jQuery sind die viele bereits fertigen jQuery-Plugins. Außerdem kann man die Performance von jQuery verbessern, wenn man beim programmieren von jQuery-Plugins darauf achtet so wenig Dom-Selektoren “$()” bzw. Dom-Interaktionen wie möglich zu nutzen.

Um dies zu bewerkstelligen kann man z.B. auf das jQuery Boilerplate zurückgreifen, so dass man bereits eine erste Programmier-Struktur vorgegeben hat. Dies hat zusätzlich den Vorteil, dass die eigenen Plugins, die jQuery typische Verkettung von Befehlen unterstützen. Außerdem gewöhnt man sich somit daran in Modulen / Plugins zu denken, welche man zudem durch dessen Konfiguration auch wiederverwenden kann.

Zepto.js war bei meinen Tests keine Alternative zu jQuery, da z.B. ein each() kein zepto-object zurückgibt, so dass man innerhalb der Schleife wieder einen Selektor benötigt. Das Framework nutz die Syntax und Namen wie jQuery, verhält sich jedoch leider etwas anders.

Sprint.js war in den Tests bei weitem schneller als jQuery, jedoch unterstützt dieses Framework nur IE 10+, außerdem ist dieses Framework nicht mal ein Jahr alt, die Dokumentation ist noch nicht vorhanden (bzw. verweist auf die jQuery Dokumentation) und es wurde noch nicht von so vielen Entwicklern getestet wie z.B. jQuery.

Links:

– Erklärung zu jQuery- bzw. CSS-Selektoren: http://suckup.de/howto/jquery/crashkurs-jquery-selektoren/
– Effektive CSS-Selektoren: https://css-tricks.com/efficiently-rendering-css/
– jQuery Performance (Tizen): https://developer.tizen.org/dev-guide/2.3.0/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
– jQuery Performance (jQuery): http://learn.jquery.com/performance/optimize-selectors/
– jQuery Performance (Blog-Post): http://blog.dareboost.com/en/2014/04/jquery-performance-optimization/

jQuery: width() in Prozent

Falls jemand mal die Breite eines HTML-Elements auslesen möchte und diese Wert jedoch in Prozent umgerechnet haben möchte – so geht es!

$(selector).width() / $(selector).parent().width() * 100;

Links:
http://api.jquery.com/width/

Toolchain für Webentwickler

Vorwort: Ich arbeite in Düsseldorf bei der “menadwork GmbH” als Webentwickler und vor einigen Monaten habe ich mein Betriebssystem auf Linux (Debian) umgestellt, daher musste ich meine Toolchain / Programmierumgebung neu einrichten. Vorweg kann ich schon mal verraten, dass man sehr gut und effizient damit arbeiten kann. Nur drei, vier Programme (IE, Photoshop, Outlook, MS Office) musste ich per VIrtualBox (Win7) virtualisieren.

Im folgenden wird eine Toolchain / Programmierumgebung für Webprojekte (PHP, HTML, CSS, Sass, JavaScript) eingerichtet. Diese Anleitung werden ich im parallel für Windows und Linux beschreiben.

Übersicht:
1. GIT
2. Webserver + PHP
3. Netbeans / PHPStorm / Sublime Text
4. Composer
5. Ruby && Node.js
6. Bower
7. SASS 
8. Compass
9. auto-prefixer
10. Grunt

1.) git – git-scm.com

Als erstes Installieren / Konfigurieren wir “git” zur Versionskontrolle und um Quellcode von github.com laden zu können. Auch wenn du mit wenigen Leuten oder alleine an einem Projekt arbeitest ist der Einsatz von “git” sehr empfehlenswert. Da man so auch noch nach Wochen / Monaten nachvollziehen kann, warum man welche Änderung gemacht hat und diese zudem ganz einfach rückgängig machen kann.

1.1) Installation:

1.1.1) Linux (Debian / Ubuntu)

sudo apt-get install git

 

1.1.2) Windows
http://msysgit.github.io/

Tipp:

– nutze von Anfang an die git-bash!

– bei der Installation wird nach “PATH” gefragt, hier sollte der zweite Punkt ausgewählt werden, da man ansonsten nur mit der git-bash arbeiten kann

git in der Windows-CMD
git für Windows

– Aktiviere “quick-edit-mode” in den Einstellungen der git-bash (nach der Installation), so dass man schnell kopieren und einfügen kann

– Windows-Laufwerke (Partitionen) sind direkt unter “/” aufgehangen -> z.b. cd /d/xampp/

– “vim ~/.vimrc” -> Konfiguration für “vim

z.B.:

:syntax enable
:set tabstop=2
:set shiftwidth=2
:set expandtab

 

1.2) Konfiguration

1.2.1) “line ending”

Es wird wahrscheinlich zu Probleme (Änderung in jeder Zeile der gespeicherten Datei) bei der Zusammenarbeit von “git unter Windows” & “git unter Linux (Mac)” geben, da diese ein anderes “line ending” haben (\n bzw. \r\n). – http://git-scm.com/book/ch7-1.html#Formatting-and-Whitespace

 

# Windows – Diese wandelt “LF” (\n) in “CRLF” (\r\n) Endungen um, wenn der Befehl “git pull” ausgeführt wird und wandelt dies beim “git commit” wieder zurück

git config --global core.autocrlf true

 

# Linux (Mac) – Diese wandelt “CRLF” (\r\n) in “LF” (\n) Endungen um, wenn der Befehl “git commit” ausgeführt wird

git config --global core.autocrlf input

-> somit sind die Dateien auf dem Repository (z.B.: github oder gitlab) und in der lokalen git-history immer mit “LF” (\n) codiert.

 

1.2.2) “push” 

git config --global push.default simple

-> der Befehl “git push” schiebt nur commits von der aktuellen “branch” zum Repository (branch mit dem selben Namen)

 

1.2.3) “user”

Teile “git” mit wer du bist:

git config --global user.name DEIN_NAME
git config --global user.email DEINE_MAIL@ADRESSE

 

1.2.4) “alias”

Wie in der Linux-Bash (~/.bashrc), kann man auch für git “aliases” (~/.gitconfig) vergeben:

git config --global alias.last 'log -1 HEAD'
git config --global alias.unstage 'reset HEAD --'
git config --global alias.hard 'reset --hard'
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.st status
git config --global alias.cam commit -a -m

 

1.2.5) “color”

git config --global color.diff auto
git config --global color.ui auto
git config --global color.status auto
git config --global color.branch auto

 

2.) Webserver + PHP

Als Webserver installieren wir uns lokal den “Apache”-Webserver, da diese bei vielen Web-Projekten später auch im Live-System zum Einsatz kommt und wir bereits lokal Dinge wie “.htaccess“-Umleitungen etc. testen kann.

2.1) Installation:

2.1.1) Linux (Debian / Ubuntu)

sudo apt-get install apache2 libapache2-mod-php5 php5-mysql php5-curl php5-gd php5-intl php-pear php5-imagick php5-imap php5-mcrypt php5-memcache php5-ming php5-ps php5-pspell php5-recode php5-snmp php5-sqlite php5-tidy php5-xmlrpc php5-xsl php5-apcu php5-xdebug

Achtung: “php5-xdebug” sollte man nur auf seiner lokalen PC installieren!!!

 

2.1.2) Windows

http://www.apachefriends.org/de/index.html

 

2.2) Konfiguration

Wenn man unter Linux bzw. Mac arbeitet, sollte man den Webserver bzw. PHP so konfigurieren, dass die entsprechenden PHP-Skript-Prozesse mit dem User des Webs laufen. Dies kann man z.B. via suphp oder via php-fpm bewerkstelligen. (Quick & Dirty: die Skripte mit dem eigenen User laufen lassen und das htdocs-Verzeichnis in das eigene Home-Verzeichnis legen)

Unter Windows braucht man sich an dieser Stelle noch keine Gedanken über User-Rechte machen, jedoch spätestens wenn man das Projekte zum ersten mal auf dem Server deployed muss man diesen Schritt auf dem Server wiederholen.

Tipp: hier findet man viele Anleitungen für die Installation von Linux-Servern -> http://www.howtoforge.de/

 

  2.2.1) xDebug -> http://xdebug.org

Unter Windows (XAMPP) ist xDebug bereits vorinstalliert und muss nur noch in der “php.ini”-Datei aktiviert werden. Unter Linux befinden sich die Konfigurationen für PHP-Erweiterungen unter “/etc/php5/config.d/”.

z.B.: für Windows, wenn xampp unter “D:\xampp\” installiert ist

[XDebug]
;zend_extension = /path/to/xdebug.so
zend_extension = "D:\xampp\php\ext\php_xdebug.dll"
;xdebug.profiler_append = 0
;xdebug.profiler_enable = 1
xdebug.profiler_enable_trigger = 1
xdebug.profiler_output_dir = "D:\xampp\tmp"
xdebug.profiler_output_name = "cachegrind.out.%t-%s"
xdebug.remote_enable = 1
xdebug.remote_handler = "dbgp"
xdebug.remote_host = "127.0.0.1"
xdebug.trace_output_dir = "D:\xampp\tmp"
xdebug.remote_port=9000

Info: http://wiki.netbeans.org/HowToConfigureXDebug#How_to_configure_XDebug

 

2.3) erster Test mit PHP

php -v

#MYSQL
php -r 'var_dump(function_exists("mysql_query"));'
php -r 'var_dump(function_exists("mysqli_query"));'

#JSON
php -r 'var_dump(function_exists("json_encode"));'

#BCMATH
php -r 'var_dump(function_exists("bcmod"));'

#MAIL
php -r 'var_dump(function_exists("mail"));'

#GD-LIB
php -r 'var_dump(function_exists("imagejpeg"));'

#SESSION
php -r 'var_dump(function_exists("session_start"));'

#SSH
php -r 'var_dump(function_exists("ssh2_connect"));'

#ZIP
php -r 'var_dump(function_exists("zip_open"));'

#GZIP
php -r 'var_dump(function_exists("gzopen"));'

#HASH
php -r 'var_dump(function_exists("hash_hmac"));'

#MCRYPT
php -r 'var_dump(function_exists("mcrypt_module_open"));'

#XML
php -r 'var_dump(function_exists("DomDocument"));'

#CURL
php -r 'var_dump(function_exists("curl_init"));'

#APC
php -r 'var_dump(function_exists("apc_store"));'

 

2.4) PHPUnit installieren

pear config-set auto_discover 1
pear install --alldeps pear.phpunit.de/PHPUnit
pear install --alldeps phpunit/PHPUnit_SkeletonGenerator

 

3.) Netbeans (HTML5 & PHP) || PhpStorm (kostenpflichtig) || Sublime Text

Als nächsten großen Schritt werden wir uns nun eine IDE installieren hier würde ich für größere PHP-Projekte “Netbeans” bzw. “PhpStorm” empfehlen, obwohl “Sublime Text” auch seine Stärken hat und jeder der das Programm noch nicht ausprobiert hat, sollte es einmal testen!!!

3.1) Konfiguration

3.1.1) Netbeans

3.1.1.1) PHPUnit

Unter den Tools -> Options -> PHP -> PHPUnit-> kann man automatisch nach dem bereits installiertem PHPUnit und dem Skeleton-Generator suchen lassen und anschließend aus jeder PHP-Klasse ein PHPUnit-Template erstellen lassen.

php_skeleton php_skeleton_confignetbeans_php_unit_beispiel

3.1.1.2) xDebug

Auch dieses Tool müssen wir einmal konfigurieren unter Tools -> Options -> PHP -> Debugging

netbeans_debug_xdebug netbeans_debug_xdebug_action

Tipp: Wir können unser PHP-Projekt nun nicht nur Debuggen, sondern auch Profilen. Indem wir den Parameter “XDEBUG_PROFILE=1” per GET oder POST übermitteln und den Output anschließend z.B.: via  KCachegrind visualisieren lassen.

kcachegrind1

 

4.) “composer” – getcomposer.org

composer ist ein Manager für externe Bibliotheken (libs) und dessen Abhängigkeiten in PHP-Projekten.

4.1) Installation

4.1.1) Linux

curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/bin

 

4.1.2) Windows
https://getcomposer.org/Composer-Setup.exe

 

4.2) Repository -> https://packagist.org/

Auf der Webseite Packagist.org findet man alle Projekte, welche man ohne weitere Anpassungen in seinem Projekt verwenden kann und man kann seine eigenen Projekte einstellen (oder auch eigene Repositories verwenden, falls man diese nicht öffentlich machen will). z.B.: mein Profil -> packagist.org/users/voku/

 

4.3) Konfiguration

Man lege eine Datei mit dem Namen “composer.json” an und sucht sich seine zu installieren Bibliotheken aus, anschließend ein “composer install –optimize-autoloader” bzw. “composer update” und schon kann man die Bibliotheken verwenden (include von “vendor/composer/autoload.php” nicht vergessen).

 

5.) Ruby && Node.js

Bower ist auch ein Manager für externe Bibliotheken, jedoch auf JavaScript, jQuery, SASS, LESS, CSS etc. (A package manager for the web) ausgerichtet. Für die Installation muss man auch Ruby und Node.js installieren, jedoch benötigen noch andere wichtige Tools in unserer Toolchain diese Programme, daher folgt nun zuerst die kurze Installation unter Linux und die etwas ausführlichere für Windows. :P

 

5.1) Installation

5.1.1) Linux (Debian / Ubuntu)

sudo aptitude install ruby-full build-essential nodejs

 

  5.1.2) Windows

Downlaod & Installation von Ruby & Node.js:

http://rubyinstaller.org/ + “DevKit”
http://nodejs.org/download/

Nachdem wir Ruby Installiert haben müssen wir noch das “DevKit” für Ruby herunterladen und in das Verzeichnis in welchem du Ruby installiert hat in das Unterverzeichnis “\DevKit” entpacken. – z.B.: “D:\xampp\Ruby200-x64\DevKit” und dann folgenden Befehl auf der Kommandozeile (ggf. muss man ruby noch zum PATH hinzufügen oder Windows mal wieder neu-starten)

ruby dk.rb init

Anschließend müssen wir die Datei “dk.rb” noch wie folgt anpassen:

# This configuration file contains the absolute path locations of all
# installed Rubies to be enhanced to work with the DevKit. This config
# file is generated by the 'ruby dk.rb init' step and may be modified
# before running the 'ruby dk.rb install' step. To include any installed
# Rubies that were not automagically discovered, simply add a line below
# the triple hyphens with the absolute path to the Ruby root directory.
#
# Example:
#
# ---
# - C:/ruby19trunk
# - C:/ruby192dev
#
---
- D:/xampp/Ruby200-x64

… und können die Installation mit folgenden Befehlen abschließen:

ruby dk.rb review
ruby dk.rb install

 

6.) Bower” – bower.io

Zurück zu Bower, nachdem wir nun Ruby && Node.js installiert haben, können wir nun weiter Tools sehe einfach über die Kommandozeile via npm installieren lassen.

 

6.1) Installation

npm install -g bower

 

6.2) Repository

http://bower.io/search/

 

6.3) Konfiguration

Auch Bower hat eine Konfigurationsdatei “bower.json”, in welcher man die entsprechenden Abhängigkeiten eintragen kann.

Tipp: Video anschauen -> https://egghead.io/lessons/bower-introduction-and-setup

 

7.) “Sass” – sass-lang.com

Sass ist ein Preprocessor für CSS, so dass man Variablen, Schleifen, Funktionen etc. in CSS nutzten kann. Große Projekte wie z.B.: Bootstrap bieten Ihren Quellcode als scss-Version an. Der Code-Style unterscheidet sich nur minimal von “normalem” CSS, wobei hier normal in Anführungszeichen stehen, da man die verschiedenen CSS-Selektoren nicht zwingend verschachteln muss. Man kann auch einfach seine bestehende CSS-Datei in eine SCSS-Datei umbenennen und per “sass” kompilieren oder eine bestehen CSS-Datei (z.B.: test.css) per “sass-convert” Konvertieren.

sass-convert -F css -T scss css/test.css scss/test.scss

 

7.1) Installation

gem install sass [--pre]

 

 7.2) Links

Basics: http://sass-lang.com/guide

Playground: http://sassmeister.com/

HowTos: http://thesassway.com/

 

7.3) Video

 

 8.) “compass” – compass-style.org

compass ist ein Framework, welches auf sass aufbaut und dieses um CSS3-Funktionen und z.B. automatisches erstellen und aktualisieren von CSS-Sprites bietet.

 

8.1) Installation

gem install compass [--pre]

Tipp: wenn man noch Browser unterstützen muss, welche keine Transparenzen via CSS (opacity) können, dann sollte man sich mal “compass-rgbapng” anschauen. Damit werden automatisch Fallback-Bilder (png’s) in der entsprechenden Farbe / Transparenz erstellt und im CSS eingebaut.

 

8.2) Konfiguration

Wir starten indem wir folgende Datei anlegen -> “config.rb”

# Require any additional compass plugins here.
#require "rgbapng"

#add_import_path "vendor/bower/foundation/scss/"
#add_import_path "vendor/bower/normalize-scss/"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
line_comments = true

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

 

8.3) HowTo

Nachdem wir die Konfiguration angelegt und ggf. angepasst haben, wird mit dem folgendem Befehl automatisch (bei Änderungen) die entsprechende scss-Datei in eine css-Datei kompeliert.

compass watch

compass_watch

 

9.) “auto-prefixer” – github.com/ai/autoprefixer-rails

Anstatt die entsprechenden CSS3-Funktionen von compass zu verwernden, erscheint es mir einfacher und Sinnvoller entsprechende Vendor-Prefixes automatisch zu erstellen und genau das macht dieses Tool! Man kann es entweder selber aufrufen, in compass oder via “grunt” (dazu kommen wir gleich) integrieren.

 

9.1) Installation

gem install autoprefixer-rails [--pre]

 

9.2.1) HowTo: Grunt + autoprefixer

(Auch wenn ich noch gar nicht zu grunt geschrieben habe, zeige ich schon mal wie, man dies nutzten kann.)

Als erstes wird das Plugin “grunt-autoprefixer” installiert und dann folgender Task in der Datei “Gruntfile.js” angelegt:

    autoprefixer: {
      options: {
        browsers: ['last 4 version']
      },
      multiple_files: {
        expand: true,
        flatten: true,
        src: 'css/*.css',
        dest: 'css/'
      }
    },

 

9.2.2) HowTo: compass + autoprefixer

Folgendes in die compass-Konfiguration “config.rb” einfügen:

  require 'autoprefixer-rails'

  on_stylesheet_saved do |file|
    css = File.read(file)
    File.open(file, 'w') do |io|
      io << AutoprefixerRails.process(css)
    end
  end

 

10.) “Grunt” – gruntjs.com

Grunt ist ein Task-Runner, dass heißt das Programme automatisch z.B. nach dem Speichern einer Datei ausgeführt werden können. Falls jemand das Tool noch nicht im Einsatz hat -> einfach mal Testen!!! Erst dieses Tool verknüpft alle hier vorgestellten Tools zu einer “Toolchain”. Und man ist nur noch einen Schritt davon entfernt automatisierte Tests im Browser, Live-Reload im Brower etc. zu nutzen.

 

10.1) Installation

npm install -g grunt-cli
npm install -g grunt-init

 

10.2) HowTo: Init

Entweder man legt sich selber ein entsprechendes “Gruntfile.js” (Konfiguration) und “package.json”- Datei an oder man nutzt den Befehl:

grunt-init TEMPLATE_NAME

 

10.3) Video

 

Wie im Video erklärt wird, kann man gunt, nachdem man dies einstellt hat, mit dem Befehl “grunt watch” auf Änderungen von beliebigen Dateien, beliebige Tasks ausführen lasse. In meinem Fall lasse ich z.B. bei Änderungen von “*.scss”-Dateien diese via compass in CSS compilieren, anschließend per “autoprefixer” überarbeiten, minifizieren und zum Schluss wird automatisch ein reload von dem entsprechendem Brower-Tab durchgeführt. :)

 

10.4) Pluginshttp://gruntjs.com/plugins

Nachdem man ein Plugin in der Datei “package.json” eingetragen hat, kann man diese über diesen Befehl installieren:

npm install

Tipp: Mit dem Plugin “matchdep” muss man die entsprechenden Plugins nicht noch in der Datei “Gruntfile.js” registrieren.

PS: hier noch mein aktuelles Gruntfile + package

 

Viel Spaß beim programmieren!!! :)

Auto-Slideshow via jQuery

Heute stelle ich eine kleine JavaScript-Funktion vor. Das Script ist jedoch nicht für den produktiveren Einsatz bereit, da die 3D-CSS-Transformation via “transform-style: preserve-3d;” zwar schick aussieht, jedoch noch keine Unterstützung bei allen Browser hat (wie immer ist der IE die Ausnahme).

 

Demo

 

Das ursprüngliche Script “TILTED CONTENT SLIDESHOW” (Lizenz: MIT | von “Mary Lou“) habe ich hier her. Daraufhin habe ich folgendes ergänzt und das CSS via SASS / Autoprefixer überarbeitet. An dieser Stelle gehe ich jedoch nicht weiter auf das CSS (+ Toolchain) ein, sondern zeige / erkläre die erstellte JavaScript-Funktionalität.

 

  //
  // Im Gegensatz zu anderen Programmiersprachen besitzt JavaScript keine richtigen Klassen, 
  // dafür Objekt-Prototypen und jede Funktion kann als Objekt genutzt werden. 
  //
  // Links:
  // OOP mit JavaScript - Objektliterale: http://www.peterkropff.de/site/javascript/objektliterale.htm
  // Wiedereinführung in JavaScript: https://developer.mozilla.org/de/docs/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript
  // 
  TiltSlider.prototype._autoSlider = function () {

    //
    // Variablen sind in JavaScript meistens global verfügbar, 
    // außer man schreibt "var" vor die Variabel (in einer Funktion) 
    //
    // Links:
    // Variablen-Test: http://jsfiddle.net/voku/mZnh6/1/    
    // JavaScript - Grundlagen - Variablen: http://www.peterkropff.de/site/javascript/variablen.htm
    //
    var wait = 2000;
    var counter = 0;
    //
    // jQuery - Selektoren fungieren meistens wie CSS-Selektoren
    //
    // Links:
    // Crashkurs: jQuery-Selektoren: http://suckup.de/howto/jquery/crashkurs-jquery-selektoren/
    //
    var slideshowNavSpanSelector = $("#slideshow nav span");
    // 
    // Größe vom Array 
    //
    // Links:
    // JS-Array: http://www.w3schools.com/jsref/jsref_obj_array.asp
    //
    var slideshowNavSpanSelectorLength = slideshowNavSpanSelector.length;

    // 
    // Funktion mit Übergabeparameter
    //
    function sliderCheck(counter_tmp) {
      if ($(".navcount" + counter_tmp).hasClass('current')) {
        return true;
      } else {
        return false;
      }
    }
    
    // 
    // Funktion welche die globale "counter"-Variable nutzt
    //
    function autoSlider() {
      if (sliderCheck(counter) === false) {
        $('.navcount' + counter).click();
      }

      if (counter === slideshowNavSpanSelectorLength) {
        counter = 0;
      } else {
        counter++;
      }
    }

    // 
    // Intervall für die "autoSlider"-Funktion
    //
    // Link:
    // http://www.w3schools.com/jsref/met_win_setinterval.asp
    // 
    var timer = setInterval(autoSlider, wait);

    // 
    // Für alle zuvor selektieren "span"-Elemente, wird hier das "MouseEnter"- & "MouseLeave"-Event 
    // von jQuery registriert. Das Event wird im Gegensatz zu "MouseOver" nur ausgelöst, 
    // wenn man in das Element hinein bzw. hinausgeht.
    //
    // Link:
    // https://api.jquery.com/mouseenter/
    //
    slideshowNavSpanSelector.each(function(index) {
      $(this).mouseenter(function() {
        // 
        // Stoppt das zur definierte Intervall
        //
        // Link:
        // http://www.w3schools.com/jsref/met_win_clearinterval.asp
        // 
        clearInterval(timer);

        if (sliderCheck(index) === false) {
          $('.navcount' + index).click();
        }

      }).mouseleave(function () {

        // set counter
        counter = index;

        // ... Intervall wieder starten ...
        timer = setInterval(autoSlider, wait);
      });
    });

  };

 

Scrollen via jQuery

Hier ein kurzes Beispiel, wie man via jQuery die Position eines Elements herausfindet und automatisch an diese Stelle scrollen kann. Wer sich noch nicht so gut mit jQuery- / CSS-Selektoren auskennt, sollte sich einmal folgenden Beitrag durchlesen. -> http://suckup.de/howto/jquery/crashkurs-jquery-selektoren/

 

.scrollTop() -> gibt die Scrollbar Position eines bestimmten Elements zurück 

.scroll() -> wird ausgeführt, wenn gescrollt wird (event handler)

.animate() -> erzeugt animations Effekte via numerischer CSS-Einstellungen

.offset() -> gibt die Koordinaten (x,y) eines Elements zurück 

.height() -> gibt die Höhe eines Elements zurück

 

Beispiel: jQuery_scroll.html

 

onClick=”$(‘#box’).show(); $(‘html,body’).stop(true,true); var target = $(‘#box’); var bottom = target.offset().top+target.height()-250; $(‘html,body’).animate({scrollTop: bottom}, 500); return false;”

 

-> bei “Klick” [onClick] 

    -> zeige das Element mit der ID “box” [#box] an

        -> halte alle Animationen an [stop(true,true)]

          -> die Höhe des Elements auf den x-Koordinate daraufrechnen [offset().top+target.height()]

            -> zu der neuen Koordinate des Elements scrollen [animate({scrollTop: bottom}, 500)]

 

Crashkurs: jQuery-Selektoren

Was ist jQuery?

Es ist eine Vereinfachung von JavaScript durch ein sogenanntes Framework, welches uns lästige Routinearbeit beim Programmieren abnimmt und einen einfachen Zugang zu schwer nutzbaren JavaScript-Methoden bietet.

 

JavaScript mit & ohne jQuery!

Für den Einstieg in das Thema möchte ich ein Beispiel mit JavaScript und den selben Effekt via jQuery zeigen.

JavaScript: (JavaScript_test1.html)

<html>
<head>
<title>JavaScript</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script tyle="text/javascript">
window.onload = function() {
	var elements = document.getElementById("box").getElementsByTagName("p");
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].firstChild.data == "Zweiter Absatz") {
			elements[i].className = "green";
		}
	}
}
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>
Mit ein wenig Programmiererfahrung kann man den Quelltext direkt lesen und wer dieses Beispiel nicht versteht, sollte sich auf der folgenden Webseite umschauen > de.selfhtml.org/javascript/

 

jQuery: (jQuery_test1.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p:contains('Zweiter Absatz')").css({ 'color' : '#009933' });
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

Wie man an diesem Beispiel erkennen kann, sind die “Selektoren” ein sehr wichtiger / umfangreicher Teil von jQuery.

 

jQuery-Selektoren

Als nächstes möchte ich einige jQuery-Selektoren und Methoden zum Auswählen von HTML-Elementen zeigen. Doch zuerst sollten wir die selben Werkzeuge zum ausführen & debuggen von JavaScript (jQuery) nutzen. Da JavaScript direkt im Browser kompiliert wird, könnten wir die Code-Zeilen auch direkt im Browser ausführen: Firefox + Firebug oder z.B. hier html5snippet.net

Firebug zum debuggen
Firebug zum debuggen
JavaScript via Firebug ausführen
JavaScript via Firebug ausführen

 

Selektiert alle HTML-Elemente von einem bestimmten Typ. -> z.B.: $(“p”)

(jQuery_selektoren1.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert HTML-Elemente mit einer bestimmten ID. -> z.B.: $(“#box”)

(jQuery_selektoren2.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#box").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

PS: ID’s müssen auf einer HTML-Seite einmalig sein!

 

Selektiert HTML-Elemente mit einer bestimmten CSS-Klasse. -> z.B.: $(“.box”)

(jQuery_selektoren3.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div div .box").addClass("green");
});
</script>
</head>
<body>
<div class="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
<div>
	<div>
		<div class="box">
			<p>Erster Absatz</p>
			<p>Zweiter Absatz</p>
			<p>Dritter Absatz</p>
		</div>
	</div>
</div>
</body>
</html>

Hier wurde die Auswahl noch einmal via HTML-Tags (div) eingeschränkt.

 

Selektiert HTML-Elemente und die Auswahl weiterer Selektoren. -> z.B.: $(“div + .box”)

(jQuery_selektoren4.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div + .box").addClass("green");
});
</script>
</head>
<body>
<div class="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
<div>
	<div>
		<div class="box">
			<p>Erster Absatz</p>
			<p>Zweiter Absatz</p>
			<p>Dritter Absatz</p>
		</div>
	</div>
</div>
<div class="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle HTML-Elemente X, die Kindknoten eines Elements Y sind. -> $(“X > Y”) -> z.B: $(“div > p”)

(jQuery_selektoren5.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div > p").addClass("green");
});
</script>
</head>
<body>
<div>
	<span>
		<p>Erster Absatz</p>
		<p>Zweiter Absatz</p>
		<p>Dritter Absatz</p>
	</span>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle folgenden Geschwisterknoten eines Elements X, die den Typ Y besitzen. -> $(“X ~ Y”) -> z.B: $(“#start ~ p”)

(jQuery_selektoren6.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#start ~ p").addClass("green");
});
</script>
</head>
<body>
<div>
	<p id="start">Erster Absatz</p>
	<p>Zweiter Absatz<p>
	<div>
		<p>Dritter Absatz<p>
	</div>
	<p>Vierter Absatz</p>
</div>
</body>
</html>

 

Selektiert die Kombination aus allen durch die Selektoren gewählten Knoten. -> z.B: $(“#p1, #p2, #p3”)

(jQuery_selektoren7.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#p1, #p2, #p3").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p id="p1">Erster Absatz</p>
	<p id="p2">Zweiter Absatz</p>
	<p id="p3">Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert bestimmte HTML-Kind-Tags. -> z.B: $(“#box”).find(“p”)

(jQuery_selektoren8.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#box").find("p").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

(jQuery_selektoren9.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#box").find("*").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert über Attribute. -> z.B: $(“div[id]”)

(jQuery_selektoren10.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div[id]").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert über Attribute und dessen Werte. -> z.B: $(“div[id=’box’]”)

(jQuery_selektoren11.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div[id='box']").addClass("green");
});
</script>
</head>
<body>
<div id="box1">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert über HTML-Tags und dessen Anordnung in der HTML-Struktur. -> z.B: $(“div:first”)

(jQuery_selektoren12.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:first").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

(jQuery_selektoren13.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:last").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle Elemente mit geradem Index innerhalb der aktuellen Auswahl. (0 ist even) -> z.B: $(“div p:even”)

(jQuery_selektoren14.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:even").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle Elemente mit ungeradem Index innerhalb der aktuellen Auswahl. (1 ist odd) -> z.B: $(“div p:odd”)

(jQuery_selektoren15.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:odd").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle Elemente die nicht zutreffen. -> z.B: $(“div:not(:last)”)

(jQuery_selektoren16.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:not(:last)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert Elemente, die innerhalb der aktuellen Auswahl einen bestimmten Index haben. -> z.B: $(“div p:eq(1)”)

(jQuery_selektoren17.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:eq(1)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die innerhalb der aktuellen Auswahl einen bestimmten größeren Index haben. -> z.B: $(“div p:gt(1)”)

(jQuery_selektoren18.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:gt(1)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die innerhalb der aktuellen Auswahl einen bestimmten kleineren Index haben. -> z.B: $(“div p:lt(1)”)

(jQuery_selektoren19.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:lt(1)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die sich innerhalb der aktuellen Auswahl “bewegen”. -> z.B: $(“div p:animated”)

(jQuery_selektoren20.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	function run() {
		$("#test").slideToggle("slow",run);
	}
	run();

	$("div p:animated").addClass("green");
});
</script>
</head>
<body>
<div>
	<p id="test">Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die mindestens ein Element enthalten, auf die der Selektor zutrifft. -> z.B: $(“div:has(‘span’)”)

(jQuery_selektoren21.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:has('span')").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die Elternelement eines anderen Knotens sind. (also sowohl von Element- als auch Textknoten) -> z.B: $(“p:parent”)

(jQuery_selektoren22.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p:parent").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p></p>
	<p>Zweiter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die über ein bestimmtes Attribut verfügen. -> z.B: $(“[name]”)

(jQuery_selektoren23.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("[name]").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Erster_Absatz">Erster Absatz</p>
	<span name="Zweiter_Absatz">Zweiter Absatz</span>
	<p name="Dritter_Absatz">Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die über ein bestimmtes Attribut mit einem bestimmten Wert verfügen. -> z.B: $(“span[name=’Zweiter_Absatz’]”)

(jQuery_selektoren24.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span[name='Zweiter_Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Erster_Absatz">Erster Absatz</p>
	<span name="Zweiter_Absatz">Zweiter Absatz</span>
	<p name="Dritter_Absatz">Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert ein Element, wenn das Attribut einen bestimmten Wert, oder den bestimmten Wert mit einem “Bindestrich” abgetrennten String folgt -> z.B: $(“p[name|=’Absatz’]”)

(jQuery_selektoren25.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name|='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz-Erster">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz-Vierter">Vierter Absatz</p>
</div>
</body>

 

Selektiert ein Element, wenn der Wert des benannten Attributs den übergebenen String als Substring enthält. -> z.B: $(“p[name*=’Absatz’]”)

(jQuery_selektoren26.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name*='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz-Erster">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz-Vierter">Vierter Absatz</p>
</div>
</body>

 

Selektiert ein Element, wenn der Wert des benannten Attributs durch Leerzeichen abgetrennten Teilwert des benannten Attributes oder dem vollständigen Wert entspricht. -> z.B: $(“p[name~=’Absatz’]”)

(jQuery_selektoren27.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name~='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz Erster">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz Vierter">Vierter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die nicht einem bestimmten Attribut entsprechen. -> z.B: $(“p[name!=’Absatz’]”)

(jQuery_selektoren28.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name!='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz Vierter">Vierter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die mit einem bestimmten Attribut beginnen. -> z.B: $(“p[name^=’Absatz’]”)

(jQuery_selektoren29.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name^='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Erster_Absatz">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="VierterAbsatz">Vierter Absatz</p>
</div>
</body>

 

Selektiert alle Knoten, die der erste (letzte) Kindknoten ihres Elternelements sind. -> z.B: $(“p[name^=’Absatz’]”)

(jQuery_selektoren30.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p:first-child, p:last-child").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt ein neues jQuery-Objekt aus dem unmittelbar folgendem Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“p”).next(‘span’)

(jQuery_selektoren31.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").next('span').addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

(jQuery_selektoren34.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").next().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Holt die Kindelemente jedes Elements der Auswahl. -> z.B: $(“div”).children()

(jQuery_selektoren32.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div").children().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt eine neue Auswahl aus den Elternknoten jedes Elements der aktuellen Auswahl. -> z.B: $(“span”).parent()

(jQuery_selektoren33.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").parent().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt ein neues jQuery-Objekt aus den unmittelbar vorherigen Geschwisterknoten des Elemente der aktuellen Auswahl. -> z.B: $(“span”).prev()

(jQuery_selektoren35.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").prev().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt ein neues jQuery-Objekt aus allen folgenden Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“p”).nextAll()

(jQuery_selektoren36.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").nextAll().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt ein neues jQuery-Objekt aus allen vorherigen Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“p”).prevAll()

(jQuery_selektoren37.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").prevAll().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Bildet eine Auswahl aus allen Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“span”).siblings()

(jQuery_selektoren38.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").siblings().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

 

(jQuery_selektoren39.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").siblings().add("span").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

 

Bildet auf der Decendant-Achse der Elemente der aktuellen Auswahl eine neue Auswahl aus Elementen, die dem angegebenen Selektor entsprechen. -> z.B: $(“div p”).filter(‘:contains(Erster Absatz)’)

(jQuery_selektoren40.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p").filter(':contains(Erster Absatz)').addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

 

Bildet auf der Decendant-Achse der Elemente der aktuellen Auswahl eine neue Auswahl aus Elementen, die dem angegebenen Selektor nicht entsprechen. -> z.B: $(“div p”).not(‘:contains(Erster Absatz)’)

(jQuery_selektoren41.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p").not(':contains(Erster Absatz)').addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

 

(jQuery_selektoren42.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	var auswahl = $("div p");

	auswahl.clone().appendTo('#test');
	auswahl.not(':contains(Erster Absatz)').addClass("green").end().css({ 'color' : 'red', 'background-color' : 'black' }).last().css({ 'color' : 'yellow'});
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<br>
<div id="test"></div>
</body>

 

jQuery-Beispiel

Zum Schluss möchte ich noch ein einfaches Beispiel mit Selektoren zeigen …

(jQuery-Selektoren_test.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>jQuery-Selektoren | Beispiel</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<h1>TEST: JPEG + PNG</h1>

<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_PNG.png" alt="PNG: Original > 10 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_PNG_punypng.png" alt="PNG: Optimized > 9 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_JPEG_100.jpg" alt="JPEG: 100% Qualität > 27 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_JPEG_80.jpg" alt="JPEG: 80% Qualität > 9 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_JPEG_60.jpg" alt="JPEG: (60% Qualität > 7 KB" height="54">
</div>

<br clear:both><div style="float:left">
	<img style="margin-top: 50px; margin-left: -450px;" id="refMain" src=""><br>
	<div style="width: 420px; margin-left: -450px;" id="imageText"></div>
</div>

<script type="text/javascript">
$('div.pic_all').css({ 'border-color' : '#ffffff', '-moz-opacity' :'0.4' });
$(document).ready(function() {
	$('div.pic_all').each(function() {
		$(this).mouseenter(function() {
			$(this).css('border-color', '#EE398C').css('-moz-opacity', '1');
			$('div.pic_all').css({ 'border-color' : '#ffffff', '-moz-opacity' :'0.4' });
			$(this).css('border-color', '#EE398C').css('-moz-opacity', '1');
			var src_new = $(this).find('img').attr('src');
 			$('#refMain').attr('src', src_new);
 			var text_new = $(this).find('img').attr('alt');
 			$('#imageText').html(text_new);
		});
		$(this).mouseleave(function() {
			$(this).css('border-color', '#ffffff').css('-moz-opacity', '0.4');
			if ($(this).find('img').attr('src') == $('#refMain').attr('src')) {
				$(this).css('border-color', '#EE398C').css('-moz-opacity', '1');
			}
		});
 	});
});
</script>

</body>
</html>