Class Notes

Selectors (chap 5)

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://]').addClass('extLink');
<a href="http://www.google.com" class="extLink">Google</a>

$('a[href^=http://]').removeClass('extLink');

$('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, Remove
attr()
    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

$('img').each(  function() {
                                   //do some stuff 
                                  alert('Hi, there, I'm an image');

                              }
);
----------------------------------------------------
this and this()
This is used to go through the code and point out that you want to effect this piece.

$(this)

often times when you use each() and you are making your own function
you will have to use $(this)
---------------------------------------------

Event
Now we want to take the selectors and have them trigger.
Any action that the user takes on the page is called and event.

Javascript is an event driven language.
We write scripts that respond to events.

An event represent the precise moment when something happens.
http://files.sawmac.com/js1e/chapter06/events.html

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

---------------------------------------------------

mouseOver()

http://api.jquery.com/mouseover/

$('#header').mouseover(   function () {

});

---------------------

hover: show and hide

$('#menu').hover (

      function() {

            $('#submenu').show();

                 },

     function() {

              $('#submenu).hide();

                 }

});