jQuery BootCamp : Creating the Wrapped Element Set


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

jQuery BootCamp : Creating the Wrapped Element Set

  1. 1. #2 Day #1 Creating the Wrapped Element Set Wildan Maulana wildan.m@openthinklabs.com http://workshop.openthinklabs.com
  2. 2. This Presentation Cover● Selecting elements to be wrapped by jQuery using selectors● Creating and placing new HTML elements in the DOM● Manipulating the wrapped element set
  3. 3. Selecting elements for manipulation● Selectors Lab
  4. 4. Using basic CSS selectors● Selection by an elements ID, CSS class name, tag name, and the DOM hierarchy of the page elements ● a → this selector matches all link (<a>) elements ● #specialD → This selector matches element that have an id of specialID ● .specialClass → This selector matches elements that have the class of specialClass ● a#specialID .specialClass → this selector matches links with an id of specialID and a class of specialClass ● p a.specialClass → This selector matches link with a class of specialClass declared within <p> elements Use Selector labs for exercise using various basic CSS selectors ... $("p a.specialClass")
  5. 5. Using child, container, and attribute selectors<ul class="myList"> If we want to select the link to <li><a href="http://jquery.com">jQuery supports</a> <ul> the remote jQuery site basic <li><a href="css1">CSS1</a></li> css selector ul.myList li a will <li><a href="css2">CSS2</a></li> not work .. <li><a href="css3">CSS3</a></li> <li>Basic XPath</li> </ul> </li> The right approach is using <li>jQuery also supports child selectors : <ul> <li>Custom selectors</li> <li>Form selectors</li> </ul> </li> ul.myList > li > a</ul>
  6. 6. Attribute Selectors● To select a link that points to an external site we can use : <li><a href="http://jquery.com">jQuery supports</a> <ul> <li><a href="css1">CSS1</a></li> a[href^=http://] <li><a href="css2">CSS2</a></li> <li><a href="css3">CSS3</a></li> <li>Basic XPath</li> </ul> </li>
  7. 7. More Attribute Selectors● To match an element that possesses a specific attribute, regardless of its value, we can use ● form[method] : This matches any <form> element that has explicit method attribute ● input[type=text] : This selector matches all input elements with a type of text ● div[title^=my] : This selects elements with title attributes whose value begins with my ● a[href$=.pdf] : This selects all links that reference PDF files ● a[href*=jquery.com] : this selectow matches all <a> elements that reference jQuery site
  8. 8. Container selector● Container selector is useful if we want to select an element only if it contains some other element ● li:has(a) → This selector matches all <li> elements that contain an <a> element
  9. 9. The basic Selectors Supported By jQuery Selector Elements* Matches any elementsE Matches all elements with tag nameEF Matches all elements with tag name F that are descendants of EE>F Matches all elements with tag name F that are direct children of FE+F Matches all elements F immediately preceded by sibling EE~F Matches all elements F preceded by any sibling EE:has(F) Matches all elements with tag name E that have at least one descendent with tag name FE.C Matches all elements E with class name C. Omitting E is the same as *.CE#I Matches elements E with id of I. Omitting E is the same as *#IE[A] Matches all elements E with attribute A of any valueE[A=V] Matches all elements E with attribute A whose value is exactly VE[A^=V] Matches all elements E with attribute A whose value begins with VE[A$=V] Matches all elements E with attribute A whose value ends with VE[A*=V] Matches all elements E with attribute A whose value contains V
  10. 10. Selecting by Position● Consider we want to select the first link on the page, or every other paragraph, or the list item of each list. JQuery supports mechanisms for achieving these specific selections.● For example : ● a:first → this format of selector matches the first <a> element on the page ● p:odd or p:even → this selector matches every odd or even paragraph ● li:last-child → this selector matches the last child of parent elements
  11. 11. Advanced Positional selectors supported by jQuery 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:first-child The first child element. li:first-child returns the first item of each child:last-child The last child element. li:last-child returns the last item of each list:only-child Returns all elements that have no siblings:nth-child(n) The nth child element. li:nth-child(2) returns the second list item of each list:nth-child(even|odd) Even or odd children. li:nth-child(even) return the even children of each list:nth-child(Xn+Y) The nth child element computed by the supplied formula.If Y is 0, it may be omitted. li:nth-child(3n) returns every third item, whereas li:nth-child(5n+1) return the item after every fifth element
  12. 12. Advanced Positional selectors supported by jQuery (2) Selector Description:even and :odd Even and odd matching elements page-wide . li:even return every even list item:eq(n) Th 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
  13. 13. Using Custom jQuery Selector● What if we want to select all check boxes that have been checked by the user ? ● We can use jQuery custom selector : :checked
  14. 14. The jQuery custom filter selectors Selector Description:animated Selects elements that are currently under animated control:button Selects any button (input[type=submit], input[type=reset],input[type=reset], input[type=button] or button):checkbox Selects only check box elements (input[type=checkbox]):checked Selects only check boxes or radio button that are checked (supported by CSS):contains(foo) Select only elements containing the text foo:disabled Select only form elements that are disabled in the interface (supported by CSS):enabled Selects only form elements that are enabled in the interface (supported by CSS):file Select all file elements (input[type=file])
  15. 15. The jQuery custom filter selectors -2 Selector Description:header Selects only elements that are headers; for example (<h1>) through <h6> elements:hidden Selects only elements that are hidden:image Select form image (input[type=image]):input Select only forms elements (input, select, textarea, button):not(filter) Negates the specified filter:parent Selects only elements that have children (including text), but not an empty elements:password Selects only password elements (input[type=password]):radio Selects only radio elements (input[type=radio]):reset Selects reset buttons (input[type=reset]) or button[type=reset]:selected Select option element that are selected:submit Selects submit buttons (button[type=submit] or input[type=submit]):text Select only text element (input[type=text]):visible Selects only elements that are visible
  16. 16. The jQuery custom filter selectors● We can combine selector filters too : :checkbox:checked:enabled
  17. 17. Using the :not filter● input:not(:checkbox) → Select non-check-box <input> elements● We cannot :not filter and other filters to find selector : div :not(p:hidden) → invalid div p:not(:hidden) → valied
  18. 18. Jquery XPath Support● http://jquery.com/plugins/project/xpath TODO : Learn about xpath support later, after we finish the book … @_@
  19. 19. Generating new HTML$("<div class=foo>I have foo!</div><div>I dont</div>") .filter(".foo").click(function() { alert("Im foo!"); }).end().appendTo("#someParentDiv");
  20. 20. Managing the wrapped element set
  21. 21. Determining the size of the wrapped set $(#someDiv) .html(There are +$(a).size()+ link(s) on this page.);Remember that the set of jQuery wrapped elements acts a lot like anarray. !
  22. 22. Obtaining elements from the wrapped set● jQuery allows us to treat the wrapped set as a JavaScript array, so we can use simple array indexing to obtain any element in the wrapped list by position : ● $(img[alt])[0] or $(img[alt]).get(0) → get the first element in the set of all <img> elements with an alt attribute on the page
  23. 23. Slicing and Dicing the Wrapped Element Set Live Demo
  24. 24. Adding more element to the wrapped set$(img[alt]).add(img[title])
  25. 25. Adding more element to the wrapped set● Lets say that we want to apply a thick border to all <img> elements with alt attributes, and then apply a level of transparency to all <img> elements with either alt or title attributes $(img[alt]).addClass(thickBorder).add(img[title]) .addClass(seeThrough)
  26. 26. Honing the Content of the Wrapped Set Live Demo
  27. 27. Q&A
  28. 28. Reference● JQuery in Action, Bear Bibeault, Yehuda Katz, Manning