2. JS Probleme
JS ist eine Sprache, kein Framework
Features verhalten sich unterschiedlich in Browsern
Beispiel: window.onload
Zum Teil viel redundanter Code notwendig für einfache Aufgaben
Ajax
Feature Detection
DOM Manipulation / Element Selektion
3. JS Enter jQuery
jQuery is a fast and concise JavaScript Library that simplifies HTML document
traversing, event handling, animating, and Ajax interactions for rapid web
development. jQuery is designed to change the way that you write JavaScript.
jquery.com
7. JS vs jQuery
Plain Javascript
Mit jQuery
1. var li = document.createElement("li");
2. li.innerHTML = songName;
3. var ul = document.getElementById("playlist");
4. ul.appendChild(li);
1. $("#playlist").append('<li>' + songName + '</li>')
8. JS vs jQuery
Plain Javascript
Mit jQuery
1. button = document.getElementById("addButton");
2. button.onclick = handleButtonClick;
1. $("#addButton").click(handleButtonClick);
9. Unobtrusive JavaScript
Separation of style and structure: CSS
Separation of behaviour and structure: Unobtrusive JavaScript
1. <button
2. color='red'
3. type="button"
onclick="document.getElementById('xyz').style.color='red';">
4. Click Me
5. </button>
10. jQuery design goals
focuses on retrieving elements from our HTML pages and performing operations
upon them.
high priority on ensuring our code will work in a consistent manner across all major
browsers
built in simple method for extending its functionality
11. document ready
Unobtrusive JavaScript performs operations on the page elements outside of the
document
need a way to wait until the DOM elements of the page are fully loaded before
execution
To trigger the execution of code once the DOM tree, but not external image resources,
has loaded, use:
This can be used multiple times within the same HTML document.
1. $(function() {
2. $("table tr:nth-child(even)").addClass("even");
3. });
15. Using basic CSS selectors
Demo of basic CSS selectors using ex01/index.html and Chrome Developer Tools.
1. // This selector matches all link elements.
2. $("a");
3.
4. // This selector matches elements that have an id of specialID
5. $("#specialID");
6.
7. // This selector matches elements that have the class of specialClass.
8. $(".specialClass");
9.
10. // This selector matches links with a class of specialClass declared
within elements.
11. $("div .specialClass")
16. The jQuery wrapper: Examples
1. // This selector selects all even elements.
2. $("p:even");
3.
4. // This selector selects the first row of each table.
5. $("tr:nth-child(1)");
6.
7. // This selector selects direct children of .
8. $("body > div");
9.
10. // This selector selects links to PDF files.
11. $("a[href$=pdf]");
12.
13. // This selector selects direct children of -containing links.
14. $("body > div:has(a)")
18. Child and attribute selectors
Selector Description
* Matches any element.
E Matches all element with tag name E.
E F Matches all elements with tag name F that are descendents of E.
E>F Matches all elements with tag name F that are direct children of E.
E+F Matches all elements F immediately preceded by sibling E.
E~F Matches all elements F preceded by any sibling E.
E:has(F) Matches all elements with tag name E that have at least one descendent
with tag name F.
E.C Matches all elements E with class name C. Omitting E is the same as *.C.
E#I Matches element E with id of I. Omitting E is the same as *#I.
21. Selecting by position
Selector Description
:first The first match of the page. li a:first returns the first link also under a list
item.
:last The last match of the page. li a:last returns the last link also under a list
item.
:firstchild The first child element. li:firstchild returns the first item of each list.
:lastchild The last child element. li:lastchild returns the last item of each list.
:onlychild Returns all elements that have no siblings.
:nthchild(n) The nth child element. li:nthchild(2) returns the second list item of each
list.
:nth
child(even)
and :nth
Even or odd children. li:nthchild(even) returns the even children of each
list.
24. :enabled Selects only form elements that are enabled in the interface
(supported by CSS).
:file Selects all file elements (input[type=file]).
:header Selects only elements that are headers; for example: h1 through h6
elements.
:hidden Selects only elements that are hidden.
:image Selects form images (input[type=image]).
:input Selects only form elements (input, select, textarea, button).
:not(filter) Negates the specified filter.
:parent Selects only elements that have children (including text), but not empty
elements.
:password Selects only password elements (input[type=password]).
:radio Selects only radio elements (input[type=radio]).
29. Determining the size of the wrapped set
wrapped sets acts a lot like an array
length property is present
length holds the count of elements in the wrapped set
See http://api.jquery.com/length/ and http://api.jquery.com/html/
1. $("#specialID").html('There are '+$('a').length+' link(s) on this
page.');
30. Adding more elements to the wrapped set
jQuery chaining makes it possible to perform any amount of work in a single
statement
we may manipulate the collection of elements in a wrapped set
often we do an operation on a subset, then add elements to perform another
operation on the bigger set
See http://api.jquery.com/add/
1. $('div.span2').css('background-color', '#efeddf').
2. add('div.span4').css('color', '#636365');
32. Getting wrapped sets using relationships
Method Description
children() Returns a wrapped set consisting of all unique children of the wrapped
elements.
contents() Returns a wrapped set of the contents of the elements, which may include
text nodes, in the wrapped set. (Frequently used to obtain the contents of
iframe elements.)
next() Returns a wrapped set consisting of all unique next siblings of the
wrapped elements.
nextAll() Returns a wrapped set containing all the following siblings of the wrapped
elements.
parent() Returns a wrapped set consisting of the unique direct parents of all
wrapped elements.
parents() Returns a wrapped set consisting of the unique ancestors of all wrapped
elements. This includes the direct parents as well as the remaining
34. Summary
jQuery provides a versatile and powerful set of selectors
jQuery allows us to create or augment a wrapped set using HTML fragments
jQuery provides a set of methods to adjust the wrapped set to hone the contents of
the set
The jQuery API explains all methods in detail: http://api.jquery.com/