jQuery

Link to the jQuery library is better at the bottom of your page before the closing body tag.

$();

You pretty much always want your code to run when the document object has finished loading
(document).ready(Declare your function here(){
    SOme jQuery rIght hEre
});

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

$(document).ready
$(window).load
$(window).unload//Doesn't really work for me n chrome

var count = $('*').length;
alert('There are ' + count + ' elements on this page);

var count = $('#div-id').find('*').length;
alert('There are ' + count + ' elements in this div');

var e_id = $('#element-id').val();
alert("The value of the element is " + e_id);

//flyout window
$('#clickMe').click(function() {
alert('Annoying pop out')

}); 

//This button will change all the h1 p li & span to Polo
$('#polo').click(function() {
$('h1,p,li,span').text('Polo')

}); 

//This would only change the second paragraph
$('#polo').click(function() {
$('p:first').text('Polo')//or last

}); 

//If you want to be really annoying you could do this
$('#polo').click(function() {
$('p,p,p,p,p,p,p,p,p,p,p,p,p,p,p').text('Polo')

});

//Or change it by the elements Idizzle
$('#polo').click(function() {
$('#idizzle').text('Polo')

});


$(':submit').click(function() {
$(this).attr('value', 'Please Wait.......');

});

//This will change the color of the text field when clicked
$(':text').click(function() {
$(this).css('background-color', '#ccc');

});//Also :textarea or :input for both


$(':button').click(function() {
$('*').css('background-color', 'black').css('color', 'white');

});

//You can use an unlimited amount of handlers in one selector
$('id1, id2, id3').click(function() {
alert('Okay');

});

$('input:button, p').click(function() {
alert('Okay');

});

//This will target the element that you are clicking on
$('#button2').click(function() {
$(this).attr('value', 'They clicked me');
});

/*This will add the highlight class to the even rows of the p ad td elements of the rows class, beginning at row 0*/
$(document).ready(function() {
$('.rows p,tr:even').addClass('highlight');
});

//Populate the text field with var email_default
$(document).ready(function() {
var email_default = "Enter your email address....";
$('input[type="email"]').attr('value', email_default)//selector
});
/*Append another eventhandler onto the end to depopulate the text field when clicked*/
$(document).ready(function() {
var email_default = "Enter your email address....";
$('input[type="email"]').attr('value', email_default).focus(function() {
if ($(this).val() == email_default) {
$(this).attr('value', '');
}
});
});
/*Append yet another eventhandler onto the end to repopulate the field if empty when the user clicks away*/
$(document).ready(function() {
var email_default = "Enter your email address....";
$('input[type="email"]').attr('value', email_default).focus(function() {
if ($(this).val() == email_default) {
$(this).attr('value', '');
}
}).blur(function() {
if ($(this).val() == '') {
$(this).attr('value', email_default)
}
});
});
//or you could do something like this
$(document).ready(function() {
var email_default = "not currently available....";
$('a[href="http://www.deadlink.com"]')//selector
});




/*This will highlight words form the list that match any of the letters you enter into the text field*/
<style>
ul#beatles {
list-style: none;
padding: 0;
margin: 0;

}
</style>
<script>
$(document).ready(function() {
$('#search_names').keyup(function() {
search_names = $(this).val();
$('#beatles li').removeClass('highlight');
if (jQuery.trim(search_names) != '') {
$("#beatles li:contains('" + search_names + "')").addClass('highlight');
}
});

});
</script>
<p><input id="search_names" type="text"/></p>
    <ul id="beatles">
        <li>Paul McCartney</li>
        <li>Ringo Star</li>
        <li>George Harrison</li>
        <li>John Lennon</li>
</ul>


//Disable buttons
$(':button').click(function() {
$(this).attr('value', 'Please Wait...');
$(this).attr('disabled', true);
})


//Change the font-size
<p>Font size: <br>
<a href="javascript:;" id="smaller">Smaller</a> | <a href="javascript:;" id="bigger">Bigger</a>

</p>
<script>
function change_size(element, size) {
var current = parseInt(element.css('font-size'));
if (size == 'smaller') {
var new_size = current - 2;
} else if (size == 'bigger') {
var new_size = current + 2;
}
element.css('font-size', new_size + 'px');
}
$('#smaller').click(function() {
change_size($('*'), 'smaller');
});
$('#bigger').click(function() {
change_size($('*'), 'bigger');

});
</script>