JQuery – Example Documents for Presentation

Daniel — Tue, 20 Apr 2010 16:30:58 +0000

I gave a presentation at work on JQuery.

So, I made a documentation page and a example html page with jquery calls at the bottom.

This should be able to help someone out there in internet land.

View the post to see code.

Here is the PDF Documentation:
jQuery Documentation

<html>
	<head>
		<script type="text/javascript" src="./jquery-1.4.2.min.js">script>
		<style>
			div {
				border: 1px solid black;
			}
.bottom2 {color:red;}
		style>
	head>
	<body>
		<div id="holder">
			<div id="alp_holder">
				<div id="aaa" class="top2">
					aaa
				div>
				<div id="bbb" class="top2">
					bbb
				div>
				<div id="ccc" class="bottom2">
					ccc<br/>
					<a href="#alynnlee.com">alynnlee.coma><br/>
					<a href="#alynnlee.com">alynnlee.coma><br/>
					<a href="#alynnlee.com">alynnlee.coma>
				div>
				<div id="ddd" class="bottom2">
					<form>
						<input type="text" name="name" /><br />
						<input type="text" name="password" /><br /><br />
 
						<input type="checkbox" name="option1" value="Milk"> Milk<br />
						<input type="checkbox" name="option2" value="Butter" checked="true"> Butter<br />
						<input type="checkbox" name="option3" value="Cheese" checked="true"> Cheese<br />
						<input type="submit" value="Submit" />
					form>
				div>
			div>
		div>
 
		<script>
		//SELECTORS
			$("*").css('padding', '4px');
			//$("div").css('border-size', 'solid thin black');
 
			//$("*").css('background-color', 'blue'); //– Select All
			//$("#aaa").css('background-color', 'red'); // – Select an object by ID
			//$(".bottom2").css('background-color', 'green'); // – select object(s) by Class name
			//$("#holder > #alp_holder > .bottom2").css('background-color', 'yellow');
			//$("input[name*='am']").val('name contains "am"');
		//ATTRIBUTES:
			//$('div').addClass('ALP_Class');
			//$('div').removeClass('bottom2');
			//$('div').toggleClass('bottom2');
			//$('a').attr('href','#http://google.com');  
			//alert( $('div.bottom2').html() )
			//$('div.bottom2').html('All new content. You bet!
'); 
		//FORMS:
			//$('select.foo option:selected').val();    // get the value from a dropdown select
			//$('select.foo').val();                    // get the value from a dropdown select even easier
			//alert($('input:checkbox:checked').val());        // get the value from a checked checkbox
			//$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons
			//$('input:text').val('hi'); 				  //sets all the TEXTBOX values to “hi”
			//$('input:checkbox:checked').attr('checked',false); //- UnCheck all checked checkboxes.
		//Traversing
			//$('a').each(function(index) {
			//	alert(index + ': ' + $(this).text());
			//});
			//$('#alp_holder div').last().css('background-color', 'red'); 
			//$('#ddd').parent().css('background-color', 'red'); 
		//ANIMATE
			//$("#ddd").animate( { fontSize:"1px" } , 1000 );
			//$("#aaa").animate( { height:"300px" } , 1000 );
			//$("#aaa").hide();
			//$("#aaa").hide(1000).show(1000).animate( { height:"300px" } , 1000 );
			$("#aaa").slideUp(1000)
			$("#aaa").slideDown(1000);   
		
	body>
html>

jQuery: Check All of the Checkboxes

Daniel — Tue, 15 Dec 2009 16:18:32 +0000

This will check all of the checkboxes inside of an element (div,span,table) with a class of outerClassName

$(".outerClassName :checkbox").attr('checked', true);

Tip: you must have the jQuery library referenced before using this line of code.

DanFolkes » Javascript

JQuery – Example Documents for Presentation

jQuery: Check All of the Checkboxes