Selecting with Javascript: With DOM/javascript you selected objects using functions like:
document.getElementById(); // returns an single element
document.getElementsByTagName(); // returns an array
document.getElementsByClassName(); // returns an array
Working with the selection in Javascript: most often involves for loops.
For example, searching for elements that has <a> tag thats is of class
"College" would require something like this in javascript
[
sample file]:
var anchors = document.getElementsByTagName('a');
for(var i=0; i < anchors.length; i++){
anchors[i].style.color = "yellow";
}
jQuery offers a powerful and easier technique for selecting and working on a
collection of elements. In fact, it can do the same thing as above in 1 line
$('a').css("color", "red");
Selection: -
CSS selectors!
// <h1> tag
h1 {
color: blue;
background: yellow;
}
// <em> elements nested inside the <p> element
p em {
color: blue;
}
// CSS selector for all members of the class "important"
// eg. <span class="important">
.important {
font-weight: bold;
}
// CSS selector for any <p> element in the class "important"
// eg. <p class="important">
p.important {
color: red;
}
// CSS selector for element with id "newest"
// eg. <li id="important">
#newest {
font-weight: bold;
}
// CSS selector for <div> element with id "newest"
// eg. <div id="important">
div#newest {
color: red;
}
Selection with jQuery
// <h1> tag
$('h1')
// <em> elements nested inside the <p> element
$('p em')
// CSS selector for all members of the class "important"
// eg. <span class="important">
$('.important')
// CSS selector for any <p> element in the class "important"
// eg. <p class="important">
$('p.important')
// CSS selector for element with id "newest"
// eg. <li id="important">
$('#newest')
// CSS selector for <div> element with id "newest"
// eg. <div id="important">
$('div#newest')
Working with the selections in jQuery:
Once you select one or more elements, you use functions provided by
jQuery to do things [
jq_01_selection.html].
$('h1').append(" Javascript Was Here");
$('.statistics').css("font-style","italic");
$('.institutions').css("color","green");
$('#reed').html('Yooo hoooooooooo!');
Where are these functions coming from? See the
jQuery API
