Jquery syntax with example
In this article, we will see jquery syntax with example.
Most of the time we find the jquery statement returns something like the below syntax code. The second code is easier, so many people use it more. You should understand each and every part of the below syntax and statements.
Syntax:
Jquery (expression).action(parameter); or
$(expression).action(parameters);Table of Contents
Jquery(expression) or $(expression);
- Used to query or select or target HTML elements,
- Based on the given expression, it selects and returns an array of all matching HTML elements.
Expression
- can be a “CSS selector”, or JS object for selection.
- can also pass JS function for execution
- can also pass “HTML code” to create elemnets dynamically at runtime.
action(parameters):
can be another jquery method (function)
indicates the action to be performed on a selected HTML element,
Parameters:
Indicate the requirements of the action
Ex:
jQuery("#headingone").css("border", "2px solid red");
OR
$("#headingone").css("border", "2px solid red");It selects any HTML element whose ID attribute value is set to “headingone and applies the CSS style 2px solid red border.
Example code
<html>
<head>
<title>Jquery Demo</title>
<script src="./jquery-3.6.1.js" type="text/javascript">
</script>
</head>
<body>
<h1 id="headingone">Heading Text 1</h1>
<h1> Heading Text 2</h1>
<script type="text/javascript">
$("#headingone").css("border", "2px solid red");
</script>
</body>
</html>Output:
- In the above code, we have 2 <h1> tags inside the body. One h1 has an Id attribute with “headingone” name and another one is don’t have any attribute.
- We have linked the jquery file to the HTML document. In the script tag, we Select the Idname “headingone” using the jquery ID selector and add the border for only “headingone”. we need to use (.css) keyword to give CSS style in jquery.
