jQuery Tutorial Reading Notes Part I (Selectors, Attributes, Traversing)

This is a reading note for jQuery Tutorial on TutorialsPoint.com, including useful functions/concepts for web development using jQuery. Please note I only pick parts of core concept which I will use most often.

This reading note is based on jQuery 1.3.2.

Note: All tips that is written by book will has a sign near it.
All code example in this post comes from offical documents.

Selectors

$()/jQuery() function

$() or jQuery() is the format for all selectors in jQuery. It can be applied to:

  • Tag: $('p') selects all paragraphs in document
  • #ID: $('#test') select element with ID as test
  • .Class: $('.test') select element with ClassName as test
  • *: star means universal. This means all DOM elements have been selected
  • Mutiple Selectors: results from mutiple selectors can be selected at the same time. For example, $('a#IDs.Classes') means an element with <a> and ID as id and Classes as class name.

Important Notes

  • $(XX:not(YY)): select XX elements without YY elements
  • $(XX YY): this means select YY elements which are descendants of XX elements. i.e, inside XX elements
  • $(XX YY:first): select first YY elements which is inside XX
  • $(XX > YY): select YY elements which are children of XX elements
  • $(XX + YY): select YY elements that is the connected following sibling of XX elements.
  • $(XX ~ YY): select YY elements that is the following siblings of XX elements
  • $(XX,YY): select elements that match XX or YY
  • $(':empty'):select elements that have no child elements
  • $('XX:empty'):select all XX elements that have no child elements
  • $('XX[YY]'): select all XX elements that contains an element with attribute YY
  • $('XX[@YY]'): select all XX elements that has a YY attribute
  • $('XX[@YY=ZZ]'): select all XX elements that has a YY attribute, and attribute value is ZZ
  • $('XX[@YY^=ZZ]'): select all XX elements that has a YY attribute, and attribute value begin with ZZ
  • $('XX[@YY$=ZZ]'): select all XX elements that has a YY attribute, and attribute value end with ZZ
  • $('XX[@YY*=ZZ]'): select all XX elements that has a YY attribute, and attribute value containing ZZ
  • $("XX:YY"): YY here can be: even, odd, first, last, visible, hidden, radio, checked, input, text, eq(n) (This mean nth element), li(n) (This means the first nth element), ge(n) (This means after n+1 element), first-child, last-child, contains(YY) (This means contain text YY)
  • $(XX/YY): select YY elements that are child of an element XX
  • $(XX//YY) or $(//XX//YY): select YY elements that are descendants of an element XX
  • $(:parent):all elements that are parents of another element, including text

DOM Attributes

  • Some of most import DOM attributes are: className, tagName, id, href, title, rel, src

  • Get Attribute Value: .attr(). For example: var title = $(#testId).attr('title');. Element testId should be <XX titile="..."/>

  • Set Attribute Value: .attr(name,value). For example, $("#testId").attr('src','/image.jpg');
  • Set Mutiple Attribute Value: .attr({key:value, key:value}):
1
2
3
4
5
$('#testId').attr({
src: `/image.png`,
alt: 'images',
style: `display:auto;`
});
  • Set Attribbute with Function: .attr(key, function(){...});
  • Remove Attribute: .removeAttr(Attr_Name);

  • Set Class: .addClass(). You may want to define the style for this class first in style sheet. For example, $(#testId).addClass('main');

  • Remove Class: .removeClass(Class_Name);
  • Judge if Exists Class: XX.hasClass(Class_Name). Return true if as least one of XX element has this specific class
  • Add/Remove Class: .toggleClass(Class_name). Add class if not exist. Remove class if it exists.

  • Get Content: .html(). Get html content of the first matched element. Equals to xx.getInnerHTML();

  • Set Context: .html(val). For example: var test = "<p>Test</p>. $('#testId').html(test)" means assign content in test to element testId.
  • Get All Text Content: .text(). Get the combined text contents of all matched elements.
  • Set Text Contents to All: .text(val). Set the text contents of all matched elements.
  • Get Value: .val() get the input value of the first matched element
  • Set Value: val(val). If applied to input, set the value of all input field. If applied to select and passign option value, that option is selected. If applied to checkbox or radiobutton, all match checkbox or radiobutton are selected.

DOM Traversing

For Table Lists

  • .eq(index): find the index+1th element, since we count staring from 0.
  • .filter(selector): remove all elements which not match to selector
  • .filter(function): remove all elements which not match to function
  • XX.is(selector): return true if at least one element of XX fits the selector
  • XX.map(callback): transfer XX to a jQuery array, following callback
  • .not(selector): remove all elements which match to the selector
  • .slice(start, [end]): select a subset of matched elements. Starting for 0. End is exclusive. If using nagative number, it means starting from the end of selection.

Others

  • XX.add(selector): add more elements to XX, which matches the selector.
  • XX.selector.andSelf().Do-something: Do something to elements in selector, and XX itself:
1
$('div').find(p).andSelf().addClass("border"); //Add border to all paragraphs, and all divs themselves
  • XX.children(selector): select sons of XX which matches selector
  • XX.closest(selector): First check if XX matches selector, if so return XX. Otherwise find XX’s cloest parent element which matches the selector, and return this element.
  • .contents(): Applies to iframe. Get all contents (i.e. child nodes) of iframe.
  • XX.end(): revert XX to its previous state.
  • .find(selector): find all descedent elements that match selector
  • .next(selector): find first sibling which match the selector
  • .nextAll()/.nextAll(selector): find all siblings. Can add selector as parameter
  • XX.offsetParent(): return the first parent of XX elements.
  • parent()/parent(selector): reutrn the direct parent of element. Can add selector as parameter
  • prev()/prev(selector): return closest previous sibling (which matches the selector).
  • prevAll()/prevAll(selector): return previous siblings (which matches the selector).
  • siblings()/siblings(selector): return siblings (which matches the selector).