Codelab Editor

Free Online HTML Editor

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>jQuery Selector Types Interactive Demo</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<style>
			body {
				font-family: Arial, sans-serif;
				background: #f9f9f9;
				padding: 20px;
			}
			h1 {
				text-align: center;
				color: #333;
			}
			.display-box {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				border: 1px solid #ddd;
				padding: 20px;
				margin-bottom: 20px;
				background: #fff;
			}
			.left-box, .right-box {
				width: 48%;
				min-height: 60px;
				padding: 10px;
				border: 1px dashed #ccc;
				background: #fcfcfc;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.buttons {
				text-align: center;
			}
			.buttons button {
				margin: 5px;
				padding: 10px 15px;
				border: none;
				background: #007acc;
				color: #fff;
				cursor: pointer;
				border-radius: 4px;
			}
			.buttons button:hover {
				background: #005fa3;
			}
			.highlight {
				background: yellow;
			}
			.border {
				border: 2px solid blue;
			}
			.red {
				color: red;
			}
			ul, p, div {
				margin: 15px 0;
			}
			#resetBtn {
				background: #333;
			}
		</style>
	</head>
	<body>

<h1>Interactive jQuery Selector Demo</h1>

<div class="display-box">
			<div class="left-box" id="selectorType">Selector type will appear here</div>
			<div class="right-box" id="output">Output/result will appear here</div>
		</div>

<ul>
			<li>Item One</li>
			<li>Item Two</li>
			<li>Item Three</li>
		</ul>
		<p class="intro">Introductory paragraph.</p>
		<div><span>Nested span inside div.</span></div>
		<input type="text" value="Text input here">
		<input type="checkbox" checked>
		<p style="display:none;">I am hidden text</p>

<div class="buttons">
			<button data-type="Basic Selector">Basic Selector</button>
			<button data-type="Basic Filter Selector">Basic Filter Selector</button>
			<button data-type="Child Filter Selector">Child Filter Selector</button>
			<button data-type="Content Filter Selector">Content Filter Selector</button>
			<button data-type="Form Selector">Form Selector</button>
			<button data-type="Attribute Selector">Attribute Selector</button>
			<button data-type="Hierarchy Selector">Hierarchy Selector</button>
			<button data-type="Visibility Filter">Visibility Filter</button>
			<button id="resetBtn">Reset</button>
		</div>

// Clear previous changes
					$("*").removeClass("highlight border red").css("background", "").css("font-weight", "").css("color", "");

switch(type) {
						case "Basic Selector":
							$("p").css("background", "#ffffcc");
							$("#output").text('All <p> elements highlighted.');
							break;
						case "Basic Filter Selector":
							$("li:first").text("First Item Changed");
							$("#output").text('First <li> text changed.');
							break;
						case "Child Filter Selector":
							$("ul > li").addClass("border");
							$("#output").text('Direct <li> children of <ul> got blue border.');
							break;
						case "Content Filter Selector":
							$("p:contains('Introductory')").css("font-weight", "bold");
							$("#output").text('Paragraphs containing "Introductory" made bold.');
							break;
						case "Form Selector":
							$(":checked").after("<span class='red'> (Checked)</span>");
							$("#output").text('Added "(Checked)" after checked checkbox.');
							break;
						case "Attribute Selector":
							$("input[type='text']").val("Changed by Attribute Selector");
							$("#output").text('Text input value changed.');
							break;
						case "Hierarchy Selector":
							$("div span").addClass("highlight");
							$("#output").text('Span inside <div> highlighted.');
							break;
						case "Visibility Filter":
							$("p:hidden").slideDown().css("color", "green");
							$("#output").text('Hidden <p> is now visible and green.');
							break;
					}
				});
				$("#resetBtn").on("click", function () {
					location.reload();
				});
			});
		</script>

</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