JQuery - Revision history

Scott: /* Manipulation */

2015-04-22T21:55:51Z

Manipulation

← Older revision		Revision as of 21:55, 22 April 2015
Line 38:		Line 38:
	=== Manipulation ===		=== Manipulation ===
	* <code>.addClass('even')</code>, <code>.removeClass(...)</code>, <code>.toggleClass(...)</code>		* <code>.addClass('even')</code>, <code>.removeClass(...)</code>, <code>.toggleClass(...)</code>
	* <code>.append('~~<span>*</span>~~')</code> add as last child of selected element		* <code>.append('...some html...')</code> add as last child of selected element
	* <code>.prepend(...)</code>, <code>.after(...)</code>, <code>.before(...)</code>		* <code>.prepend(...)</code>, <code>.after(...)</code>, <code>.before(...)</code>
	* <code>.remove(...)</code>, <code>.replaceWith(...)</code>, <code>.before(...)</code>		* <code>.remove(...)</code>, <code>.replaceWith(...)</code>, <code>.before(...)</code>

2015-04-22T21:55:17Z

Manipulation

← Older revision		Revision as of 21:55, 22 April 2015
Line 38:		Line 38:
	=== Manipulation ===		=== Manipulation ===
	* <code>.addClass('even')</code>, <code>.removeClass(...)</code>, <code>.toggleClass(...)</code>		* <code>.addClass('even')</code>, <code>.removeClass(...)</code>, <code>.toggleClass(...)</code>
	* <code>.append('<span>*</span>') add as last child of selected element		* <code>.append('<span>*</span>')</code> add as last child of selected element
	* <code>.prepend(...)</code>, <code>.after(...)</code>, <code>.before(...)</code>		* <code>.prepend(...)</code>, <code>.after(...)</code>, <code>.before(...)</code>
	* <code>.remove(...)</code>, <code>.replaceWith(...)</code>, <code>.before(...)</code>		* <code>.remove(...)</code>, <code>.replaceWith(...)</code>, <code>.before(...)</code>

2015-04-22T21:54:56Z

Combinations

@@ Line 28: / Line 28: @@
 * <code>$('section:eq(1) table tr:last td')</code> All table cells in the last row of all tables in the second section
 * <code>$('select[name="category"] > option')</code> All option elements that direct children of a particular select
 == Example ==

2015-04-21T20:26:19Z

Combinations

← Older revision		Revision as of 20:26, 21 April 2015
Line 22:		Line 22:

	=== Combinations ===		=== Combinations ===
			* <code>$('tr.even')</code> Rows with class 'even'
	* <code>$('#tasks tr:first')</code> The first row of a table with id 'tasks'		* <code>$('#tasks tr:first')</code> The first row of a table with id 'tasks'
	* <code>$('#tasks').find('tr:first')</code> Same thing		* <code>$('#tasks').find('tr:first')</code> Same thing

2015-04-21T20:25:13Z

Combinations

← Older revision		Revision as of 20:25, 21 April 2015
Line 25:		Line 25:
	* <code>$('#tasks').find('tr:first')</code> Same thing		* <code>$('#tasks').find('tr:first')</code> Same thing
	* <code>$('tr:first', '#tasks')</code> Same thing; second argument specifies DOM sub-tree to search		* <code>$('tr:first', '#tasks')</code> Same thing; second argument specifies DOM sub-tree to search
			* <code>$('section:eq(1) table tr:last td')</code> All table cells in the last row of all tables in the second section
			* <code>$('select[name="category"] > option')</code> All option elements that direct children of a particular select

	== Example ==		== Example ==

2015-04-21T20:19:41Z

Filters

← Older revision		Revision as of 20:19, 21 April 2015
Line 10:		Line 10:

	=== Filters ===		=== Filters ===
			* <code>$('tr:eq(0)')</code> finds the first row in a table
			* <code>$('tr:gt(0)')</code> finds all rows after the first
			* <code>:even</code> finds all even-numbered elements in a selection
			* <code>:odd</code> odd-numbered elements
			* <code>:last</code> last element
			* <code>:empty</code> elements that have no children
			* <code>:focus</code> the focused element
			* <code>:not(selection)</code> elements that don't match selection
			* <code>:contains(text)</code> element that contain certain text
			* input field selectors: <code>:hidden</code>, <code>:text</code>, <code>:checkbox</code>, <code>:password</code>

			=== Combinations ===
			* <code>$('#tasks tr:first')</code> The first row of a table with id 'tasks'
			* <code>$('#tasks').find('tr:first')</code> Same thing
			* <code>$('tr:first', '#tasks')</code> Same thing; second argument specifies DOM sub-tree to search

	== Example ==		== Example ==

2015-04-21T18:59:49Z

2015-04-21T18:55:02Z

HTML

← Older revision		Revision as of 18:55, 21 April 2015
Line 10:		Line 10:
	<html><head><title>Button Magic</title>		<html><head><title>Button Magic</title>
	<link rel='stylesheet' type='text/css' href='stylesheet.css'/>		<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
			<script type='text/javascript' src='jquery.js'></script>
	<script type='text/javascript' src='script.js'></script>		<script type='text/javascript' src='script.js'></script>
	</head><body>		</head><body>

2015-04-21T18:54:06Z

← Older revision		Revision as of 18:54, 21 April 2015
Line 7:		Line 7:

	==== HTML ====		==== HTML ====
	<~~pre~~>		<source lang="html4strict">
	<html><head><title>Button Magic</title>		<html><head><title>Button Magic</title>
	<link rel='stylesheet' type='text/css' href='stylesheet.css'/>		<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
Line 15:		Line 15:
	</body>		</body>
	</html>		</html>
	</~~pre~~>		</source>

	==== stylesheet.css ====		==== stylesheet.css ====
	<~~pre~~>		<source lang="css">
	div {		div {
	height: 60px;		height: 60px;
Line 29:		Line 29:
	opacity: 0.5;		opacity: 0.5;
	}		}
	</~~pre~~>		</source>

	==== script.js ====		==== script.js ====
	<~~pre~~>		<source lang="javascript">
	$(document).ready(function(){		$(document).ready(function(){
	$('div').mouseenter(function(){		$('div').mouseenter(function(){
Line 41:		Line 41:
	});		});
	});		});
	</~~pre~~>		</source>


	== To Do List Example ==		== To Do List Example ==
	==== HTML ====		==== HTML ====
	<~~pre~~>		<source lang="html4strict">
	<h2>To Do</h2>		<h2>To Do</h2>
	<form name="checkListForm">		<form name="checkListForm">
Line 54:		Line 54:
	<br/>		<br/>
	<div id="list"></div>		<div id="list"></div>
	</~~pre~~>		</source>

	==== script.js ====		==== script.js ====
	<~~pre~~>		<source lang="javascript">
	$(document).ready(function(){		$(document).ready(function(){
	$('#button').click(function(){		$('#button').click(function(){
Line 67:		Line 67:
	});		});
	});		});
	</~~pre~~>		</source>

2014-06-25T21:24:41Z

HTML

← Older revision		Revision as of 21:24, 25 June 2014
Line 47:		Line 47:
	==== HTML ====		==== HTML ====
	<pre>		<pre>
	~~<body>~~		<h2>To Do</h2>
	<h2>To Do</h2>		<form name="checkListForm">
	<form name="checkListForm">		<input type="text" name="checkListItem"/>
	<input type="text" name="checkListItem"/>		</form>
	</form>		<div id="button">Add!</div>
	<div id="button">Add!</div>		<br/>
	<br/>		<div id="list"></div>
	<div id="list"></div>
	~~</body~~>
	</pre>		</pre>