Valid XHTML 1.0 Transitional

Some jQuery JavaScript Framework Files - Visual Quick Start

Chapter 1: Essential jQuery
Chapter 2: Selecting Elements the jQuery way
Chapter 3: Working with Elements the jQuery way
Chapter 4: Working with Events in jQuery
Chapter 5: Visual Effects and Animation in jQuery
Chapter 6: jQuery Utility Functions
Chapter 7: Jumping into Ajax
Chapter 8: Using the full power of Ajax
Chapter 9: Using the jQuery Widgets

Chapter 1: Essential jQuery

count2.html Count paragraphs, $("p").size()
first2.html Select 1st of elements set, $('p:first')
id2.html Select paragraphs by ID, $('#first'), $('#second')
ready2.html Run code when page fully loaded, ready()
style2.html Select paragraph by style, $('div p.first')
hide2.html Hide/Show paragraphs, $('p:first').hide(); $('p:first').show();
innerHTML.html Hide/show paragraphs with innerHTML(), $('p')[0].innerHTML=""
hierarchy2.html Selecting elements in a hierarchy, $('body div p')
slide2.html Slide paragraphs up/down, $('#first').slideUp("slow");
create2.htm Create new elements, $("<p>text</p>").insertAfter("#first");

[Top]

Chapter 2: Selecting Elements the jQuery way

direct2.html Select direct descendents only (div > p)
firstlast2.html Select first and last children (p:first-child, p:last-child)
nth2.html Select nth child, $('p:nth-child(3)')
text2.html Selecting elements by contained text, $('p:contains("3")')
attribute2.html Selecting elements by attribute (lang), $('p[lang]')
attributevalue2.html Select elements by attribute value, $('p[lang="German"]')
is2.html Checking the types of matches, if ($('#p1').is('p'))
eq2.html Selecting one of a set, $("p:eq(0)"), $("p:eq(1)")
checked2.html Counting checked checkboxes, $("input:checked").length
selected2.html Counting selected items, $("select option:selected").length

[Top]

Chapter 3: Working with Elements the jQuery way

each2.html add custom title attribute to all IMG elements in a set
slice2.html get element from wrapped set using slice(), $("img").slice(2,3).attr("alt")
setattr2.html set img attributes with attr() function, $("img:first").attr("title", "These are flowers.");
getattr2.html examine img attributes, $("img").slice(0, 1).attr("alt")
html2.html Rewrite elements HTML with html() function, $("div").html( new value here)
append2.html Append content to slice, $("p").slice(1,2).append("$1,000,000!");
move2.html Moving elements with append, $("p:last").append($("p:first"));
width2.html resize IMG, $("img").width(486); $("img").height(365);
wrap2.html Wrapping elements, $("p").wrap("<h1></h1>");
insert2.html Insert elements, $("#target").before("<p>This is paragraph 1.5</p>");
val2.html Edit value attribute, $("#target").val("This is new text.");

[Top]

Chapter 4: Working with Events in jQuery

bind2.html Bind event handler to event, $('#target2').bind('dblclick',function(event) {
multiple2.html Bind multi event handlers to events, $('#target').bind('click',function(event) {
click2.html Use event name as binding function, $('#target').click(function(event) {
one2.html Allow event handlers call only once, $('#target').one('click',function(event) {
unbind2.html Unbind event handlers call only once, $('#target').unbind('click', clicker);
screenxy2.html Detect mouse click position, $('#p1').text('(screenX, screenY)
type2.html Getting event type, $('#p1').text('Event type: '+event.type);
keycode2.html Capturing key events, $('#target').bind('keyup', typer); [BROKEN]
hover2.html hover event, $('#target').hover(over, out);
target2.html Get event target, $('#p1').text("ID of target element: " + event.target.id);

[Top]

Chapter 5: Visual Effects and Animation in jQuery

showhide2.html Showing and hiding images, $('#target').show(); $('#target').hide();
showhidespeed2.html Showing/Hiding elements with duration, $('#target').show(2000); $('#target').hide(2000, hey);
toggle2.html toggle visibility, $("button").click(function() { $("h2").toggle(); });
togglespeed2.html toggle visibility, $("button").click(function() { $("h2").toggle(2000); });
fadeout.html Fade Out, $('#target').fadeOut(2000);
slideup.html Slide Up, $('#first').slideUp("slow");
slidetoggle.html Slide Toggle, $(document).ready(function() { $("button").click(function () { $("#first").slideToggle("slow"); [BROKEN]
fadeto.html Fade To (alpha), $('#target').fadeTo(2000, 0.333);
animate2.html Custom Animation, $("#target").animate({ width: "80%", opacity: 0.333, fontSize: "26pt", marginLeft: "0.5in",...

[Top]

Chapter 6: jQuery Utility Functions

each2.html Looping over an object with $.each(), $.each(obj, function(i, val) {...
browser2.html Browser type detection, jQuery.each($.browser, function(i, val) {...
marquee2.html Browser IE type detection, if($.browser.msie) {...[BROKEN]
support2.html Browser feature support, if($.support.boxModel) { etc
makearray2.html make an array, var array = jQuery.makeArray(document.getElementsByTagName("p"));
inarray2.html Search in an array, $("span:eq(0)").text($.inArray("banana", array));
grep2.html Search in an array, array = $.grep(array, function(n, i) {...
unique2.html Eliminating duplicate elements, array = jQuery.unique(array);
isarray2.html Check if data is Array, if($.isArray(array)) {...
map2.html Map an Array, array = jQuery.map(array, function (a) {...
trim2.html Trim Text Whitespace, text = jQuery.trim(text);

[Top]

Chapter 7: Jumping into Ajax

ajax2.html Hard Ajax, if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest();
load1b.html jQuery style Ajax, $("#first").load("message1.txt");
load2b.html Using the load() function with callbacks, $("#third").load("message1.txt", callback);
load3b.html Passing data to server, $("div").load("poster.php", {data: 1});
load4b.html Passing form data to server, $("div").load("poster.php", $("#targetForm").serializeArray());
poster2.html Using the jQuery $.post() function, $.post("poster.php", {data: 1}, function(data) { $("div").text(data); });
getter_b.html Using the jQuery $.get() function, $.get("message.txt", function(data) { $("div").text(data); });
getter2b.html Using the jQuery $.get() function with data, $.get("getter.php", {data: 1}, function(data) { $("div").text(data); });

[Top]

Chapter 8: Using the full power of Ajax

ajaxsuccess2.html Using the jQuery $.ajax() function, $.get("getter.php", {data: 1}, function(data) { $("div").text(data); });
ajaxpost2.html Using $.ajax() to post data, $.ajax( { type: "POST", url: "poster.php", data: {data: 1}, success: callback });
poster2.html Using $.ajax() to get data, $.ajax( { type: "GET", url: "poster.php", data: {data: 1}, success: callback });
ajaxerror2.html Handling Ajax errors, $.ajax( { type: "GET", url: "getterr.php", data: {data: 1}, success: callback, error: err });
timeout2.html Handling Ajax timeouts, $.ajax({ type: "GET", url: "getter.php", data: {data: 1}, success: callback, timeout: 10, error: err });
ajaxxml2.html Handling Ajax XML,
globals2.html Handling Ajax events, $("#starting").hide(); $("#starting").bind("ajaxStart", function() { $(this).show(); });

[Top]

Chapter 9: Using the jQuery Widgets

accordion2.html Using a jQuery accordion, $("#accordion").accordion();
datepicker2.html Using a jQuery Date Picker, $("#datepicker").datepicker( {
dialogb.html Using a jQuery Dialog, $("#dialog").dialog({
dialog2b.html Get Info From Dialog, $("#dialog").dialog({
progressbar2.html Get Info From Dialog, $("#dialog").dialog({
slider2.html slider2.html, $("#slider").slider({min: 0, max: 100, slide: function(event, ui) {
tabsb.html jQuery Tabs.html, $(document).ready(function() { $("#tabs").tabs(); });
tabs2b.html jQuery Show Hidden Tabs.html, function add() { $('#tabs').tabs('add','#fragment-4', 'Item four'); }