Tutorial:JavaScript - Revision history

66.214.240.97: /* jQuery */

2012-08-18T00:42:14Z

‎jQuery

2012-06-06T21:42:07Z

‎Function Chaining

2012-06-06T21:41:55Z

‎Advanced Examples

2012-06-06T21:33:27Z

‎HTML/CSS

2012-06-06T21:33:19Z

‎Selectors

2012-06-06T21:28:28Z

‎Selectors

2012-06-06T21:28:11Z

‎Hide all inputs that have a name property that is set to myinputname

2012-06-06T21:25:10Z

‎Hide all elements of the class "test" on the webpage

2012-06-06T21:16:35Z

‎jQuery

2012-06-06T21:03:02Z

‎jQuery

@@ Line 328: / Line 328: @@
   $(document).ready(function() {
     $(".preSelected").click(function(evt) {
-      $(this).removeClass("preSelected").val("").focus();
+      $(this).unbind("click").removeClass("preSelected").val("").focus();
     });
   });
   </script>

← Older revision		Revision as of 21:42, 6 June 2012
Line 307:		Line 307:

	$("#myinput").show().val("This is my default value").addClass("myClass").focus();		$("#myinput").show().val("This is my default value").addClass("myClass").focus();
−

	== Advanced Examples ==		== Advanced Examples ==

@@ Line 299: / Line 299: @@
   </script>
 == Advanced Examples ==
@@ Line 320: / Line 329: @@
   $(document).ready(function() {
     $(".preSelected").click(function(evt) {
-      $(this).removeClass(".preSelected").val("").focus();
+      $(this).removeClass("preSelected").val("").focus();
     });
   });
   </script>

@@ Line 311: / Line 311: @@
+  }
   </style>
-−
   <input type=text name=myname value="Please enter your name" class="preSelected">

← Older revision		Revision as of 21:33, 6 June 2012
Line 297:		Line 297:

	$("input", "#myform").hide();		$("input", "#myform").hide();
		+
		+	</script>
		+
		+	== Advanced Examples ==
		+
		+	=== Specify Input Text that disappears once clicked ===
		+
		+	==== HTML/CSS ====
		+
		+	<style>
		+	.preSelected {
		+	color: #AAA;
		+	}
		+	</style>
		+
		+	<input type=text name=myname value="Please enter your name" class="preSelected">
		+
		+	==== jQuery ====
		+
		+	<script>
		+
		+	$(document).ready(function() {
		+	$(".preSelected").click(function(evt) {
		+	$(this).removeClass(".preSelected").val("").focus();
		+	});
		+	});

	</script>		</script>

@@ Line 224: / Line 224: @@
 == Selectors ==
-jQuery is awesome at selecting HTML elements. The equivalent is very complex and error-prone to do in raw JavaScript. After selection, an action is normally performed, such as: hide(), show(), fadeIn(), fadeOut(), css(), etc.
+jQuery is awesome at selecting HTML elements. The equivalent is very complex and error-prone to do in raw JavaScript. After selection, an action is normally performed, such as: hide(), show(), fadeIn(), fadeOut(), css(), addClass(), removeClass(), etc.
 === Hide all Divs on the webpage ===

← Older revision		Revision as of 21:28, 6 June 2012
Line 287:		Line 287:

	$("input[name='myinputname']).hide();		$("input[name='myinputname']).hide();
		+
		+	</script>
		+
		+	=== Hide all inputs within a form of id=myform ===
		+
		+	You can refine your selection by referencing a context of another element.
		+
		+	<script>
		+
		+	$("input", "#myform").hide();

	</script>		</script>

← Older revision		Revision as of 21:25, 6 June 2012
Line 247:		Line 247:

	$(".test").hide();		$(".test").hide();
		+
		+	</script>
		+
		+	=== Hide all DIV elements of the class "test" on the webpage ===
		+
		+	<script>
		+
		+	$("div.test").hide();
		+
		+	</script>
		+
		+	=== Hide an element of ID test on the webpage ===
		+
		+	<script>
		+
		+	$("#id").hide();
		+
		+	</script>
		+
		+	=== Hide an DIV element of ID test on the webpage ===
		+
		+	<script>
		+
		+	$("div#id").hide();
		+
		+	</script>
		+
		+	=== Hide all inputs that have a type property ===
		+
		+	<script>
		+
		+	$("input[type]).hide();
		+
		+	</script>
		+
		+	=== Hide all inputs that have a name property that is set to myinputname ===
		+
		+	<script>
		+
		+	$("input[name='myinputname']).hide();

	</script>		</script>

← Older revision		Revision as of 21:16, 6 June 2012
Line 207:		Line 207:

	$("#testId").hide();		$("#testId").hide();
		+
		+	</script>
		+
		+	== document.ready ==
		+
		+	jQuery provides a great function document.ready which lets you execute code when the page is ready to be accessed by JavaScript. document.ready is different than onload because onload gets triggered after all static resources get loaded. In the example below, document.ready will not be used just to keep the examples shorter. It is a good rule of thumb, to always wrap any immediately executing code in a document.ready block.
		+
		+	=== Code ===
		+
		+	<script>
		+
		+	$(document).ready(function() {
		+	// add your code here
		+	});
		+	</script>
		+	== Selectors ==
		+
		+	jQuery is awesome at selecting HTML elements. The equivalent is very complex and error-prone to do in raw JavaScript. After selection, an action is normally performed, such as: hide(), show(), fadeIn(), fadeOut(), css(), etc.
		+
		+	=== Hide all Divs on the webpage ===
		+
		+	<script>
		+
		+	$("div").hide();
		+
		+	</script>
		+
		+	=== Hide all elements of the class "test" on the webpage ===
		+
		+	<script>
		+
		+	$(".test").hide();
		+
		+	</script>
		+
		+	=== Hide all elements of the class "test" on the webpage ===
		+
		+	<script>
		+
		+	$(".test").hide();

	</script>		</script>

@@ Line 187: / Line 187: @@
 jQuery is a library that makes working with javascript much easier.
-== Javascript Code ==
+== Less Error-prone ==
 Here is an example of hiding an element using JavaScript.
@@ Line 200: / Line 202: @@
 Notice any problem with that? What happens if the element testId doesn't exist? The code fails, which means the entire webpage stops functioning. jQuery is much more robust where you don't have to check if something exists... meaning simple problems like this don't sneak up when you least expect it (like friday night at midnight when your client is checking their website and no one is around to fix an easy error).
-== jQuery Code ==
+=== jQuery Code ===
   <script>