jQuery 101
jQuery's core philosophy:
Simplify interaction between HTMl and JavaScript.
- Find some HTML
- Do something to it
The 'query' in the title is to emphasize the need to query for specific elements
Selectors / Attributes
The $() factory function to locate part of the page
$(selector/attribute).method().method()...
selector docs | attributes docs
- $('div').addClass('foo');
- finds all of the div's, give them a class of 'foo'!
- $('#third').toggleClass('striped');
- finds the node with an id of 'third', adds the class of 'striped' if the class is not present, removes if it is!
- $('div p.second').toggleClass("striped");
- finds all p tags inside of div's with a class of "second", toggle class
- $('p[language]').css("font-style", "italic");
- finds all p tags with an attribute of language, sets a style
- EX: <p language="English">This is a paragraph.</p>
- $('p[language="German"]').css("font-style", "italic");
- all p tags with an attribute of language="German"
- YES: <p language="German">Dies ist ein Absatz.</p>
- NO: <p language="English">This is a paragraph.</p>
- $('#selected > li').addClass("horizontal");
$('#selected li:not(.horizontal)').addClass("subLevel");
- What does this do? direct decendants of the id that are li are given a class, then all li's under the id that aren't are given a diff class
- $('body div p').toggleClass('striped');
- <div>
<p>This is paragraph 1.</p> (yes)
<p>This is paragraph 2.</p> (yes)
<p id="third">This is paragraph 3.</p> (yes)
<p>This is paragraph 4.</p> (yes)
</div>
<p>This is paragraph 5.</p> (no)
- $('div > p').css("font-style", "italic");
-
<div>
<span>
<p>This is paragraph 1.</p>(no)
</span>
<p>This is paragraph 2.</p>(yes)
<p>This is paragraph 3.</p>(yes)
<p>This is paragraph 4.</p>(yes)
</div>
<p>This is paragraph 5.</p>(no)
- $('p:first').hide();
- Hides the first p! (think display:none)
- $("p:eq(2)").css("font-style", "italic");
- changes the 3rd p (matches only a single element)
- $('ul li:nth-child(2)').css("font-style", "italic");
- Matches all elements that are nth-child of their parent
- $('p:contains("Dan")').css("font-style", "italic");
- Matches elements which contain the given text
- $("input:not(:checked) + span").css("background-color", "yellow");
- What does this do? (turns background yellow to the not checked inputs next span - checkboxes and radio!)
- $("tr:even").css("background-color", "#bbbbff");
- What does this do? (turns background blueish to the even elements - 0,2,4,etc.)
- Yes, there is an :odd as well...!
- $("td:gt(4)").css("text-decoration", "line-through");
- What does this do? (puts a line through the 5th td on...)
- Yes, there is a :lt as well...!
- $("div:animated").toggleClass("colored");
- What does this do? (returns all elements currently being animated)
Transversing
docs
- if($('#p1').is('p'))
- true if the id is a p tag
- There are more than 20 methods for transversing, check them out in the docs!
Manipulation
docs
- $("p").append("<strong>Hello</strong>");
- appends content to every matched element
- There are more than 20 methods for manipulation, check them out in the docs!
When to run code?
- <body onload="init()">
- runs after the page is loaded (AND after all of the images are loaded!)
- $(document).ready(function(){init();});
- jQuery way of running when the document is loaded (AND NOT the images!))
- can also be written as: (shortcut)
- So, what do these do?
1:
$(document).ready(function() {
$('a[href^mailto:]').addClass('mailto');
$('a[href$=.pdf]').addClass('pdflink');
$('a[href^http][href*=rit]').addclass('ritLink');
});
*for the ^,$,* substring matching selectors, check out the bottom of the page.
2:
$(document).ready(function() {
$('td:contains(Dan)').parent().children().addClass('special');
});