Codelab Editor

Free Online HTML Editor

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>jQuery noConflict Example</title>
		
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		
		<script>
			var $ = function(selector) {
				console.log("This is another library using $:", selector);
			};
		</script>
		<script>
			// Relinquish $ back to the other library
			var $jq = jQuery.noConflict();

// Use $jq instead of $
			$jq(document).ready(function() {
				$jq("body").css("background", "#eee");
				$jq("h1").text("jQuery noConflict() is working!");
			});
		</script>
		<style>
			pre {
				background: #fff;
				padding: 20px;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<h1>Hello</h1>
		<p>This page demonstrates jQuery noConflict().</p>
		<pre>
// Relinquish $ back to the other library
var $jq = jQuery.noConflict();

// Use $jq instead of $
$jq(document).ready(function() {
	$jq("body").css("background", "#eee");
	$jq("h1").text("jQuery noConflict() is working!");
});
		</pre>
	</body>
</html>

Editor Commands

Ctrl

Find

Ctrl

Find Next

Ctrl

⇧

Find Previous

Ctrl

⇧

Find & Replace

Ctrl

]

Indent Code Right

Ctrl

[

Indent Code Left

⇧

Tab

Auto Indent Code

Ctrl

Line Comment

Ctrl

Alt

Block Comment

TutsInsider Actions

Alt

Run Code

Ctrl

Copy Editor Code

Ctrl

Select All Editor Code

Ctrl

Save/Download

Ctrl

Alt

Rotate

Ctrl

Alt

Switch Theme

Ctrl

⇧

Open Console

Esc

Close Console