BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery id Selector

Last Updated: April 20, 2019 by Chaitanya Singh | Filed Under: jQuery

We already discussed a little bit about jQuery id selector when we discussed the jQuery Selectors in detail. In this guide, we will focus only on jQuery element id selector and take few examples to understand the usage of this selector.

jQuery id Selector Syntax

$ sign followed by parenthesis and the id is mentioned inside the parenthesis prefixed with # sign.

$("#myid")

This will select the element that has the id equals to the myid.

jQuery id Selector Example

In the following example we are selecting the element with the id value equals to "gid" and then we are changing the background colour of that selected element to green when the Click Me! button is clicked.

Here we have a paragraph with the id value as "gid" so the background colour of this para is changed to green when the button is clicked.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#gid").css("background-color", "green");
  });
});
</script>
</head>
<body>

<h2>jQuery #id selector example</h2>
<div>
<p id="gid">This jQuery #id selector example is published on
beginnersbook.com</p>
<p>This is another paragraph. It contains some plain text</p>
</div>
<button>Click Me!</button>

</body>
</html>

Output: The following two screenshots show the output screen before and after the button is clicked.

Before the button click event:
jQuery id selector example
After the button click event:
jQuery id selector output

❮ PreviousNext ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery val()
  3. jQuery Selectors
  4. jQuery removeClass() Method
  5. jQuery multiple classes Selector

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap