Selectors are the way we tell jQuery which elements we want to work on. You can view the full list of jQuery selectors on their official documentation pages.
Syntax:
$("selector")
$ is jQuery symbol
Some of the most commonly used selectors.
- $("*") - Wildcard: selects every element on the page.
- $(this) - Current: selects the current element being operated on within a function.
- $("p") - Tag: selects every instance of the <p> tag.
- $(".example") - Class: selects every element that has the example class applied to it.
- $("#example") - Id: selects a single instance of the unique example id.
- $("[type='text']") - Attribute: selects any element with text applied to the type attribute.
- $("p:first-of-type") - Pseudo Element: selects the first <p>.
#example.html
<!doctype html>
<html lang="en">
<head>
<title>jQuery Tutorial</title>
</head>
<body>
<button id="click-me"></button>
<div id="i-am-div"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
//write your query code here
$(document).ready(function() {
$("#click-me").click(function() {
$("#i-am-div").html("Hello, World!");
});
});
</script>
</body>
</html>
here I am using ID selector and click event