If I wanted to select all the paragraph tags in a document that had the class of special:
$('p.special')

All the header tags:
$('h1, h2, h3, h4, h5, h6') // this is called a group selector

$('h1 h2 h3') // this is a descendant selector

Filters (chap 5)
:hidden
:visible

Look this stuff up:
remove
replace
clone
append

Automatic Loops
$('p').hide();
In jQuery it has automatic looping, the jQuery Selectors have automatic loops built in. So you don't to loop through all the p tags to hide each one. It does that automatically.

We can chain functions:
$('p').width(300).height(300);
Instead of:
$('p').width(300);
$('p').height(300);
--------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------Selectors: addClass() / removeClass() / toggleClass()
great for in response of a mouse over, you might want to add or subtract something

$('a[href^=http://]')
selects every link that points to an outside page
this grabs all hrefs that start with http://

$('a[href^=http://]').toggleClass('extLink');
---------------------------------------------------------------------css()
(this is a function)
1. We can find out what a particular css property is for an element.
Then maybe we might want to add some conditionals.
2. Set CSS property on element
3. Set multiple CSS properties at once

We have to pass in some arguments to make it do something.

To do this:

var bgColor = $('#header').css('background-color');

For 1. When you trying to find out something you will have to be very specific, like if you want to know the border you will have to say border top instead of border. (when setting the property you can use the short hand of just border)

For 2. This is how you set 1 property. (you don't use the colon, it only looks for 2 arguments cause you don't have the curly brackets)

$('#header').css('background-color', 'red');

For3. We have to use curly braces, to indicate that you are sending in a list.

$('#header').css({

'background-color': '#FF0000',

'border': '2 px solid #000000'

});

You could use the above for rollovers.
-------------------------------------------------------------------Read, Set, Removeattr()
HTML Attributes

You could check all the img for alt tags and if there are none you could add alt tags.

1. Getting the attribute:

var imageFile=$('#header img').attr('src');

2. Replacing:

var imageFile=$('#header img').attr('src', 'newImage.jpg');

for example: You set the above to a mouse event
<img src="lolcat.jpg" />
becomes <img src="newImage.jpg" />

---------------------------------------------------------- each()$('img').fadeOut();
If we something custom that looks for only certain images:

each()
is a special kind of argument
anonymous function (it doesn't have a name)
because they don't have a name you can't call them

Attaching Events to Elements
1. Select one or more elements (selectors)
2. Assign an event
3. Pass a function to the event
4. Add necessary action to the function (our code)

Example of toggle:

//first have to select the thing that you want to toggle

//add the event to the thing

//pass in an anonymous function inside the click parenthesis
$('#idname').click( function () {//now add the thing that you want to have effected
$("p").toggle("fast") //you can set the speed at which it toggles
});

//now have another type of toggle

$("$toggle02").click (function () {
$("#02 p").toggle("slow");
});

---------------------Document Ready
Javascript runs as it is loaded into the page. The problem is that say for example you add jQuery that effects images and that script is in the head of the page, but the images are down below in the body and they have not loaded yet. So you get an error because the it is trying to apply the script to images that aren't there yet.

$(document).ready(function () {

// all of your code

//99% of the time you are going to use this document ready

});

This says wait for the html to load before you load all the javascript

Wednesday, May 11, 2011

Regular Expressions
For picking out the days of the week.
For picking out the weekend we can look for the days that start with S, because the only days that start with S are weekend days. /\b[S]/i
/ = open
\b = boundary character
[S] = what to look for
i = ignore the case (Sunday, sunday)

/^[S]/i;
this also works

function dayMessage(){

var days = ['Sunday','Monday','Tuesday','Wednesday',
'Thursday','Friday','Saturday'];
var now = new Date ();
var dayOfWeek = days[now.getDay()]; //on the now object we created we assign the string to dayOfWeek
document.write(dayOfWeek);

//everything abov eis just to get the day, we had to convert the number to a string

var dayMatch = /^[S]/i;

if (dayOfWeek == dayMatch) {
document.write('Yay it is a weekend');
}else {
document.write('Boo hoo it is a weekday');
}

}

dayMessage();

------------------------------------Document Object Model"the DOM"
The browser has a idea/model of how all the pieces relate and fit to each other
This is important for CSS in terms of descendants and inheritance.
Can be thought of in terms of family tree.
The DOM is a W3C standard, it is separate from Javascript.
Each browser interprets the DOM differently.

Each tag or piece is called a "NODE"
In order for Javascript to manipulate the page it has to communicate with the nodes.

To select the paragraph tag: (this is not selecting the string/text inside the paragraph) getElementsByTagName('p');var myParas=document.getElementsByTagName('p');//in this example myParas will be an array cause it will hold multiple pieces of info

Descendant - $('p em') //all em tags that are children of the p tagChild - $('p >em')Adjacent - $('h1+p') //grabs only the paragraph next to the h1Attribute Selectors //the stuff in quotes in html like height width src alt - $('img[alt]'), $('a[href]'), $('img[height=42]') //this grabs images that have height="42" in the html attribute

^ = value starts
$ = value ends
* = value contains

$('img[alt*=happy]') // selects alt tags that contains the value happy
---------------------------------------2 Big Conceptsinner HTML
a way to scoop up all the stuff inside the html (not as simple as jQuery)

When we are writing jQuery you are not writing javascript and vice versa, in other words you can intermix.
You have to use the jQuery versions of ceil and floor, not the javascript versions.

The differences between DOM based and jQuery1. Automatic Loops: in jQuery your selector automatically loops for you.
$('p').hide(); //goes through all the p puts them into an array then hides all the pieces of the array
in jQ it automatically loops through everything and does what you want it to do

2. Chaining Functions: with jQ we can chain functions together and have it all in one line.
$('#popup').width(300).height(500).text("howdy!").fadeIn(1000);