This document discusses selecting elements and manipulating the wrapped element set in jQuery. It covers: 1. Using basic and advanced CSS selectors like ID, class, tags, attributes, position, and custom selectors to select elements. 2. Creating and adding new HTML elements to the DOM with jQuery. 3. Managing the wrapped element set - determining its size, obtaining elements, slicing/dicing, and adding more elements to the set. 4. Applying jQuery methods like addClass() to the selected elements to manipulate the DOM.

1. #2
Day #1
Creating the Wrapped Element Set
Wildan Maulana
wildan.m@openthinklabs.com
http://workshop.openthinklabs.com

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. Selecting elements for manipulation
● Selectors Lab

4. Using basic CSS selectors
● Selection by an element's 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. 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. 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. 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. 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. The basic Selectors Supported By jQuery
Selector Elements
* Matches any elements
E Matches all elements with tag name
EF Matches all elements with tag name F that are descendants of E
E>F Matches all elements with tag name F that are direct children of F
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 elements 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

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. 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. 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. 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. 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. 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. The jQuery custom filter selectors
● We can combine selector filters too :
:checkbox:checked:enabled

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. Jquery XPath Support
● http://jquery.com/plugins/project/xpath
TODO : Learn about xpath support later, after we finish the
book … @_@

19. Generating new HTML
$("<div class='foo'>I have foo!</div><div>I don't</div>")
.filter(".foo").click(function() {
alert("I'm foo!");
}).end().appendTo("#someParentDiv");

20. Managing the wrapped element set

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 an
array. !

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. Slicing and Dicing the Wrapped Element Set
Live Demo

24. Adding more element to the wrapped set
$('img[alt]').add('img[title]')

25. Adding more element to the wrapped set
● Let's 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. Honing the Content of the Wrapped Set
Live Demo

27. Q&A

28. Reference
● JQuery in Action, Bear Bibeault, Yehuda Katz,
Manning