donald

 $('#result h1', 'img.batman').show();

$('#result h1').show();  

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

<div id="result">
<h1> Cyberconrz, yeah boi!!</h1>
<img src="images/batman.jpg" alt="batman on a unicorn with dolphins" class="batman" />
<img src="images/wtf.jpg" alt="on drugs" class="wtf" />
</div>

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();

                 }

});

Booyah

CYBERCORNZZZ!!!!!!!!!!!!!!!!!!

Reading Notes - Ch. 6

Events

Each of the things that happen in a web page are Events.

Functions and Events

Inline Events
The simplest way to run a function when an event fires is called inline event registration.
 Assign an event handler.

<a href="page.html" onmouseover="alert('this is a link');">A link</a> 

You can even use the inline technique to call a previously created function, like this:
<body onload="startSlideShow()">


**You can add the event handler directly to the HTML but then it gets messy when trying to update the site in the future. It is a best practice to have a separate the Javascript.

Traditional Model

Assign (inside the head) an event handler  to a page element.

If you have a function and call it usually it looks like:
window.onload=message( );  
When you have parenthesis you are telling it to run immediatly

If you remove the parenthesis you are letting the onload handler know what to do when the time comes.
window.onload=message;  // the message loads after the page is finished loading




as

Class Notes

 Picking out days of week using Regular Expressions


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.

example:  

             html

head                body

                          div

                             p

<body>  
  <div id="content"> 
  <p>hello!</p> 
  <p>yeah, you.</p>  
   </div>  
</body>  
 

getElementById()  

If you have div id="content"
 document.getElementById("content");  

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

In the example hello! is the descendant of <p>

This grabs hello! :
var myVarKids = myVar.childNodes;  
var myVarText = myVarKids[0].nodeValue;  

other ways to grab:
.parentNode 
.nextSibling    
.previousSibling  




Javascript Libraries
Drop Down Menus
We don't have to use the crazy ol' Dom now-a-days.

You can use:
MooTools
prototype + scriptaculous
jQuery

These are "middle-ware" that allow us to talk to the DOM more easily, it figures out all the child node craps.

jQuery
piggybacks on CSS

example:
CSS :      #content  p
jQuery:   $(#content p)


---------------------------
jQuery Selector Test Bed
http://files.sawmac.com/js1e/chapter05/selectors.html

----

Selecting in jQuery

<p id="msg"> A message! </p>  
in the DOM: boooo
var msPara = document.getElementById('msg');  
in jQuery: yaaaay
var myPara = $('#msg');

We can grab:

ID  -  $('#stuff')
Element/tag - $('p')
Class -  $('.p')

Descendant  - $('p em') //all em tags that are children of the p tag
Child - $('p >em')
Adjacent - $('h1+p')   //grabs only the paragraph next to the h1
Attribute 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 Concepts
inner 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 jQuery
1. 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);

---------------------------------
Content Functions Test Bed
http://files.sawmac.com/js1e/chapter05/content_functions.html