jQuery for Basics I
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event…
jQuery for Basics I
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. The purpose of jQuery is to make it easier to use JavaScript on your website.
Here are some key points about jQuery:
- Simplifies JavaScript Code
- Cross-Browser Compatibility
- Event Handling
- Includes methods for sending and receiving data asynchronously
- Built-in animation effects to make the web pages interactive
- Vast range of plugins
Install jQuery
Basically, there are two ways to incorporate jQuery into your code.
- Local Installation: You can directly download jQuery library from their official website and include it in your HTML code
- Link to a CDN: You can add jQuery library in your HTML code from Content Delivery Network.
<html>
<head>
<title>jQuery Local Example</title>
<!-- Local jQuery -->
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- HTML Code -->
</body>
</html><html>
<head>
<title>jQuery CDN Example</title>
<!-- Local jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- HTML Code -->
</body>
</html>jQuery Syntax
$: used to access jQuery features.selector: A string to select HTML elements.action: A jQuery method to perform an operation on the selected elements.- Common Actions: CSS manipulation, content manipulation, attribute manipulation, event handling, and effects/animations.
Examples
Now let’s look at a simple example.
<!DOCTYPE html>
<html>
<head>
<title> jQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery Basics</h1>
</body>
<script>
$("h1").css("color", "red")
</script>
</html>$: This is the jQuery function, which is used to access jQuery's features.$("h1"): This is a jQuery selector. It selects allh1elements in the document..css("color", "red"): This is a jQuery method that sets the CSS propertycolortoredfor the selected elements.
Let’s look into another example.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>$(document).ready(function(){}: This ensures that the code inside it runs only after the DOM is fully loaded. This prevents any manipulation on elements that are not yet rendered.$("button").click(function(){ ... });: This attaches a click event handler to allbuttonelements. When a button is clicked, the function inside this handler is executed.$("#test").hide();: This selects the element with the idtest(i.e., the second paragraph) and hides it using the jQueryhide()method.
Reference: Checkout some examples related to jQuery in my github.
If you have any questions then feel free to comment/ reach out to me.
You can support me by buying me a coffee
I am a freelance software developer specializing in creating scalable software solutions and providing IT consulting services. Feel free to reach out to me at dharshithasrimal@gmail.com.
메타데이터
- post_id
- 5079f82c1082
- slug
- jquery-for-basics-i-5079f82c1082
- url
- https://medium.com/@dharshithasrimal/jquery-for-basics-i-5079f82c1082
- canonical_url
- https://medium.com/@dharshithasrimal/jquery-for-basics-i-5079f82c1082
- author_url
- https://medium.com/@dharshithasrimal
- status
- ok
- fetched_at
- 2026-08-28 18:12:51
