JQuery Notes

<script type="text/javascript">
 $(document).ready(function(){
   $("a.testclass").click(function(event){
     alert("the link no longer took you to jquery.com");
     event.preventDefault();
   });
 });
</script> 

<form>
<input type="button" value="make it bold" 
        onclick="makeitbold(); return(false);" />
<input type="button" value="unbold them" 
        onclick="makeitunbold(); return(false);" />
</form>

function makeitbold()
{
    $("a").addClass("makeitbold");
}
function makeitunbold()
{
    $("a").removeClass("makeitbold");
}

<style type="text/css">
    a.makeitbold { font-weight: bold; }
</style>

$(".hideme").click(function(event){
    event.preventDefault();
    $(this).hide("slow");
});

body.large {
  font-size: 1.5em;
}
body.narrow {
  width: 300px;
}
.selected {
  font-weight: bold;
}
//-----
function bindclicks()
{
	$('#switcher :button').bind('click', function() {   	// bind to click for every button in id switcher
		$('body').removeClass();                        // remove the classes from body element
		$('#switcher :button').removeClass('selected'); // remove 'selected' class from every button in switcher
		$(this).addClass('selected');			// for this button, add class 'selected'
	});
	$('#switcher-narrow').bind('click', function() {	// bind to click for id 'switcher-narrow'
		$('body').addClass('narrow');			// add class 'narrow' to the body element
	});
	$('#switcher-large').bind('click', function() {		// bind to click for id 'switcher-large'
		$('body').addClass('large');			// add class 'large' to body element
	});
};

<div id=dummyalert1 style="border: 1px solid black; 
    padding-left: 10px; padding-right: 10px; 
    background: silver; width: 100px; text-align: center;">
<form>
    <input value="alert" onclick="dummyalert(); 
        return(false);" type="button">
</form></div>
$(document).ready(function() {
    $('#dummyalert1').click(function(event) {
        if (event.target == this) { //make sure this item
                                    //not bubble
            $('#dummyalert1 :button').toggleClass('hidden');
        }
    });
});

<a id=dummyalert2 
    href="http://www.google.com">google or dummyalert2</a>

$(document).ready(function() {
    $('#dummyalert2').click(function(event) {
        alert("dummyalert2");
        event.stopPropagation();
        event.preventDefault();
    });
});

<div id=boxer1 style="...">
    <div id=subboxer1 style="background: silver; ...">
                                                  click 1<div>
    <div id=subboxer2 style="(no background) ...">click 2<div>
    <div id=subboxer3 style="...">click 3<div>
<div>

//boxer1 and subboxer1 2 and 3
$(document).ready(function() {
	$('#boxer1 div').hover(function() {
		$(this).addClass('hover');
	}, function() {
		$(this).removeClass('hover');
	});
    $('#boxer1').click(function(event) {
        if ($(event.target).is('#boxer1')) { 
            $('#boxer1 :div').toggleClass('hidden');     
        } 
        else if (event.target.id == 'subboxer1') {
            alert('clicked subboxer1');
        }
        else {
            alert('clicked ' + event.target.id);
        }
    });
});

<div id=updown style="border: 1px solid black; 
    background: silver; width: 200px; padding: 20px;">
    Press U or D.
    <div id=up1 style="border: 1px dotted black; 
        width: 200px;">&nbsp;</div>
    <div id=down1 style="border: 1px dotted black; 
        width: 200px;">&nbsp;</div>
</div>

$(document).ready(function() {
    $('#up1').addClass('hover');
    $(document).keyup(function(event) {
        switch (String.fromCharCode(event.keyCode)) {
            case 'U':
                $('#down1').removeClass('hover');
                $('#up1').addClass('hover');
                break;
            case 'D':
                $('#up1').removeClass('hover');
                $('#down1').addClass('hover');
                break;
        }
    });
});

<div id=demotext2 style="border: 1px solid black;">
...
</div>

<div id=prestochango>
	<div class="label">Text Size
		<button id=pc-default>Default</button>
		<button id=pc-larger>Larger</button>
		<button id=pc-smaller>Smaller</button>
	</div>
</div>

$(document).ready(function() {
	var $speech = $('div#demotext2');
		//$ is a reminder that we have a jQuery object
	var defsize = $speech.css('fontSize');
	$('#prestochango button').click(function() {
		var daNum = parseFloat( $speech.css('fontSize'), 10 );
			//parseFloat looks at string left to right until 
			//it encounters non-numeric char.  String is 
			//converted to floating-point.  10 makes sure it's
			//a base10 number.
		switch (this.id) {
			case 'pc-larger':
				daNum *= 1.4;
				break;
			case 'pc-smaller':
				daNum /= 1.4;
				break;
			case 'pc-default':
				daNum = parseFloat(defsize, 10);
		}
		$speech.css('fontSize', daNum + 'px');
	})
})

.animate({property1: 'val1', property2: 'val2'},
	speed, 
	easing, 
	callbackfunction()   //called after animation is complete
                             //can be function() { ... }
);
	OR
.animate({properties}, {options});
	WHICH TRANSLATES TO
.animate({
	prop1: 'val1',
	prop2: 'val2'
}, {
	duration: 'val',
	easing: 'val',
	complete: callbackfunction(),
	queue: boolean,
	step: callback
});

<div id=demotext4 style="border: 1px solid black;">
    <p>When, in the course ....</p>
    <p>We hold these truths to be self-evident,....</p>
    <a href="#" class=animateshowmore>animate show more</a> |
    <button id=dt4-default>Default</button>
    <button id=dt4-larger>Larger</button>
    <button id=dt4-smaller>Smaller</button>
</div>

$(document).ready(function() {
	var $daFirstPara = $('div#demotext4 p:eq(0)')
	var daFirstParaDefSize = $daFirstPara.css('fontSize');
	var $dasecondPara = $('div#demotext4 p:eq(1)')
	$dasecondPara.hide();
	$('a.animateshowmore').click(function() {
		$dasecondPara.animate({
			opacity: 'toggle',
			height: 'toggle'
		},
			1200);
		...
	});
	$('div#demotext4 button').click(function() {
		var num = parseFloat( $daFirstPara.css('fontSize'), 10 );
		switch (this.id) {
			case 'dt4-larger':
				num *= 1.4;
				break;
			case 'dt4-smaller':
				num /= 1.4;
				break;
			default:
				num = parseFloat(daFirstParaDefSize, 10);
		}
		$daFirstPara.animate({fontSize: num + 'px'}, 'slow');
	});
});

<div id=container1 style="border: 1px dotted silver;">
	<div id=label5 style="position: relative; 
			border: 1px solid black; background: aqua; 
			height: 50px; width: 170px;">
		Click me to move the div
	</div>
</div>

$(document).ready(function() {
	$('div#label5').click(function() {
		var daParaWidth = $('div#container1').width();
		var $daBox = $('div#label5');
		var daBoxWidth = $daBox.outerWidth();
		$daBox.animate({left: daParaWidth - daBoxWidth - 8, 
			height: '+=20px', borderWidth: '5px'}, '1500');		
	});
});

in the function for the second box...
var daParaWidth = $('div#container1').width();
var $daBox = $('div#label6');
var daBoxWidth = $daBox.outerWidth();
$daBox
	.fadeTo('fast',0.5)		//make sequential to queue
	.animate({
		'left': daParaWidth - daBoxWidth
		}, 'slow')
	.fadeTo('slow',1.0)
	.queue(function() {		//use queue function to queue
		$daBox			//things that shouldn't be able to
		    .css('backgroundColor', '#f00')
		    .dequeue();		//let the rest of the items queue
	})
	.slideUp('slow')
	.slideDown('slow');

$(document).ready(function() {
	var $firstPara = $('div#demotext7 p:eq(0)');
	var $secondPara = $('div#demotext7 p:eq(1)');
	$('button#dt7-animate').click(function() {
		$firstPara
			.css('border', '1px solid #333')
			.click(function() {
			    $(this).next().slideDown('slow',function() {
			        $firstPara.slideUp('slow');
			    });
			})
	});
	$secondPara.css('backgroundColor', '#ccc').hide();
});

$(document).ready(function() {
    $('div.chapter a[href=*=blah]').each(function(index) {
        var $thisLink = $(this);
        $(this).attr({  //set the attributes
            'rel': 'external',        //rel to external
            'id': 'wikilink' + index, //id to wikilink0, ..1,
            'title': 'check out more about '
                     + $thisLink.text() 
                     + ' at blah.'    //add custom title link
        });
    });
});

<div id=demotext9 style="border: 1px solid black;">
	<p>para 1</p>
	<span class=footnote>footnote a</span>
	<p>para 2</p>
	<span class=footnote>footnote b</span>
	<hr>
	<span id=footer></span>
</div>

$('div#demotext9 span.footnote').insertBefore('div#demotext9 #footer');

$(document).ready(function() {
  $('button#demobutton10').click(function() {
    $('<ol id="demo10notes"></ol>').insertAfter('div#demotext10');
    $('div#demotext10 span.footnote').each(function(index) {
      $(this)
        .before(
          ['<a href="#foot-note-',
            index+1,
            '" id="context-',
            index+1,
            '" class="context">',
              '<sup>' + (index+1) + '</sup>',
          '</a>'
          ].join('')
        )
        .appendTo('#demo10notes')
        .append( '&nbsp;(<a href="#context-' + (index+1) + '">context</a>)' )
        .wrap('<li id="foot-note-' + (index+1) + '"></li>');
    });
  });
});

<div id=DateAndTime 
    style="border: 1px solid blue; width: 300px;">
...
</div>

<form>
<input type="button" value="get time from server" 
    onclick="gettimefromserver(); return(false);" />
</form>
function gettimefromserver()
{
    $("#DateAndTime").load("DateAndTime.php");
}
<?php
$time = time();
echo date("m/d/y g:i:s a", $time);
?>

{
	"key"	: "value",
	"key 1"	: "value1",
	"key 2"	: [
		"array val 1",
		"array val 2",
		"array val 3",
	]
}
{ /* 2nd entry */
	"key"	: "value2",
	"key 1"	: "value3",
	"key 2"	: [
		"array val 4",
		"array val 5",
		"array val 6",
	]
}

$(document).ready(function() {
  $('#daButtonID').click(function() {
    $.getJSON('dafile.json', function(data) {
      $('#daDataDisplayDivID').empty() /* empty the div */
      $.each(data, function(daIndex, daEntries) {
	    var daHTML = '';
        daHTML += '<div>' + entry['key'] + '-' +
                            entry['key 1'] + '<br />';
        if (daEntries['key 2']) {
          $.each(daEntries['key 2']), function(daArrayIndex, daArrayLine) {
            daHTML += '<div class=indented>' + daArrayLine +
                      '</div>';
          }
        }
		daHTML += '</div>';
      }
	  $('#daDataDisplayDivID').html(daHTML);
    }
  }
}

$(document).ready(function() {
    $('#daID a').click(function() {
        $.getScript('blah.js');
        return false;
    });
});

$(document).ready(function() {
  $('#demobutton13').click(function() {
    $.get('demo13.php', {'text': $('#demotext13input')[0].value} , function(data) {
      $('#demotext13output').html(data);
    });
  });
});
//something like GET /AJAXDomJavaScript/demo13.php?text=demotext13 will be sent with the HTTP request

<?php
  $daInput = $_REQUEST['text'];
  echo '<span style="color: blue;">' . $daInput . '</span>';
  echo '<span style="color: red;">' . $daInput . '</span>';
?>

$(document).ready(function() {
    $('#demobutton14').click(function() {
        $.post('demo13.php', {'text': $('#demotext14input')[0].value} , function(data) {
            $('#demotext14output').html(data);
        }); 
        // PREVIOUS 3 LINES COULD ALSO BE
        $('#demotext14output').load('demo13.php', {'text': $('#demotext14input')[0].value});
    });
});

<?php
    while (list($key, $value) = each($_REQUEST)) {
        echo "$key => $value 
\n";
    }
?> 
$(document).ready(function() {
    $('#demobutton15').click(function() {
        $test15 = $('#demoform15').serialize();
        /* could be $.post, or could use .load ... */
        $.get('demo15.php', $('#demoform15').serialize(), function(data) {
            $('#demotext15output').html(data);
        });
    });
}); 

$(document).ready(function() {
    $('<div id="herewego">here we go</div>')
    .insertBefore('#daID')
    .ajaxStart(function() { 
        $(this).show(); 
    }); 
});

$(document).ready(function() {
    $('.daClass').live('click', function() {
        $(this).siblings('a').slideToggle();
    })
})

$(document.createElement('script'))
    .attr('src', 'http://asdf.com/example.js')
    .appendTo('head');

<?php
    print($_GET['callbackvar'] .'('. $data .')');
    /* $data is JSON data */
?>

(javascript)...
$.getJSON(foreignurl + '?callbackvar="', function(data) {
...
/* JQuery replaces ?, parses result, 
   passes success function as data coming 
   from local server */

$.ajax({
      url: 'blah.html',
      type: 'GET',
      dataType: 'html',
      success: function(data) {
        $('daID').html(data);
      }
});

$.ajaxSetup like above but sets 
vars for future calls