![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)")](https://image.slidesharecdn.com/presentation-150524174246-lva1-app6891/85/Web2-jQuery-16-320.jpg)
![Child and attribute selectors
Demo of extended CSS selectors using ex01/index.html and Chrome Developer Tools.
1. // Match direct descendants
2. $("p > a");
3.
4. // Attribute selectors
5. $("input[type=text]")
6. $("a[href^=https://]")
7. $("a[href*=jquery.com]")](https://image.slidesharecdn.com/presentation-150524174246-lva1-app6891/85/Web2-jQuery-17-320.jpg)
![E#I Matches element E with id of I. Omitting E is the same as *#I.
E[A] Matches all elements E with attribute A of any value.
E[A=V] Matches all elements E with attribute A whose value is exactly V.
E[A^=V] Matches all elements E with attribute A whose value begins with V.
E[A$=V] Matches all elements E with attribute A whose value ends with V.
E[A*=V] Matches all elements E with attribute A whose value contains V.](https://image.slidesharecdn.com/presentation-150524174246-lva1-app6891/85/Web2-jQuery-19-320.jpg)
![Custom jQuery selectors
There are even selections possible based on a characteristic that the CSS specification
did not anticipate.
Selector Description
:animated Selects elements that are currently under animated control.
:button Selects any button (input[type=submit], input[type=reset],
input[type=button], or button).
:checkbox Selects only check box elements (input[type=checkbox]).
:checked Selects only check boxes or radio buttons that are checked (supported
by CSS).
:contains(foo) Selects only elements containing the text foo.
:disabled Selects only form elements that are disabled in the interface
(supported by CSS).](https://image.slidesharecdn.com/presentation-150524174246-lva1-app6891/85/Web2-jQuery-23-320.jpg)
![: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]).](https://image.slidesharecdn.com/presentation-150524174246-lva1-app6891/85/Web2-jQuery-24-320.jpg)
![:reset Selects reset buttons (input[type=reset] or button[type=reset]).
:selected Selects option elements that are selected.
:submit Selects submit buttons (button[type=submit] or input[type=submit]).
:text Selects only text elements (input[type=text]).
:visible Selects only elements that are visible.](https://image.slidesharecdn.com/presentation-150524174246-lva1-app6891/85/Web2-jQuery-25-320.jpg)
Web2 - jQuery
- 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
- 4. JS Enter jQuery Cross-Browser Kompatibilität Schnell und leichtgewichtig (32kb, minified, gzipped) Gute Lernkurve + gute Dokumentation Riesige Community => Plugins darunter jQuery UI CSS3 Selektoren
- 6. JS vs jQuery Plain Javascript Mit jQuery 1. var songName = document.getElementById("songTextInput").value; 1. var songName = $("#songTextInput").value;
- 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)")
- 17. Child and attribute selectors Demo of extended CSS selectors using ex01/index.html and Chrome Developer Tools. 1. // Match direct descendants 2. $("p > a"); 3. 4. // Attribute selectors 5. $("input[type=text]") 6. $("a[href^=https://]") 7. $("a[href*=jquery.com]")
- 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.
- 19. E#I Matches element E with id of I. Omitting E is the same as *#I. E[A] Matches all elements E with attribute A of any value. E[A=V] Matches all elements E with attribute A whose value is exactly V. E[A^=V] Matches all elements E with attribute A whose value begins with V. E[A$=V] Matches all elements E with attribute A whose value ends with V. E[A*=V] Matches all elements E with attribute A whose value contains V.
- 20. Selecting by position Demo of extended CSS selectors using ex01/index.html and Chrome Developer Tools. 1. // matches the first link element on the page 2. $("a:first") 3. 4. // matches every other element 5. $("a:odd") 6. $("a:even") 7. 8. // choosing the last child of a parent element 9. $("li:last-child")
- 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.
- 22. and :nth child(odd) :nth child(Xn+Y) The nth child element computed by the supplied formula. If Y is 0, it may be omitted. li:nthchild(3n) returns every third item, whereas li:nth child(5n+1) returns the item after every fifth element. :even and :odd Even and odd matching elements pagewide. li:even returns every even list item. :eq(n) The nth matching element. :gt(n) Matching elements after (and excluding) the nth matching element. :lt(n) Matching elements before (and excluding) the nth matching element.
- 23. Custom jQuery selectors There are even selections possible based on a characteristic that the CSS specification did not anticipate. Selector Description :animated Selects elements that are currently under animated control. :button Selects any button (input[type=submit], input[type=reset], input[type=button], or button). :checkbox Selects only check box elements (input[type=checkbox]). :checked Selects only check boxes or radio buttons that are checked (supported by CSS). :contains(foo) Selects only elements containing the text foo. :disabled Selects only form elements that are disabled in the interface (supported by CSS).
- 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]).
- 25. :reset Selects reset buttons (input[type=reset] or button[type=reset]). :selected Selects option elements that are selected. :submit Selects submit buttons (button[type=submit] or input[type=submit]). :text Selects only text elements (input[type=text]). :visible Selects only elements that are visible.
- 28. Generating new HTML Create a new div element and append it to the DOM See http://api.jquery.com/css/ 1. $("<p>Generated content.</p>").css("color", "red").appendTo(".row > .span4");
- 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
- 33. elements. This includes the direct parents as well as the remaining ancestors all the way up to, but not including, the document root. prev() Returns a wrapped set consisting of all unique previous siblings of the wrapped elements. prevAll() Returns a wrapped set containing all the previous siblings of the wrapped elements. siblings() Returns a wrapped set consisting of all unique siblings of the wrapped elements.
- 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/