A jQuery #id selector selects elements with the id you have specified. After you select the required element, you can apply color or any other effects using jQuery.
The id is the value of the id attribute and the unique identifier of an HTML element.
JQuery #id Selector
For selecting any element, you have to get the value of id attribute of an element. You have to use the hash(#) before the id value as in the syntax given below.
Syntax
|
1 |
$(#id) |
Check the example given below which applies a color to the selected element and apply the CSS using jQuery.
Example
|
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function(){ $("#blockred").css("color", "red"); }); </script> <p>Welcome to our tutorial.</p> <p id="blockred">Tutorialdeep is the best way to learn everthing from jQuery Tutorial.</p> <em>Now, you can learn jQuery with live examples.</em> |
Output
Welcome to our tutorial.
Tutorialdeep is the best way to learn everthing from jQuery Tutorial.
Now, you can learn jQuery with live examples.
The example is given above converts the text color to red for the specified id. This changes the text for the single element by selecting only the single element. However, you can change the color for more than a single element using the next example.
Select Multiple ids Using jQuery
You can apply the color to more than one element by writing just a single line jQuery code. You have to use the jQuery multiple id selector and add multiple comma-separated ids.
See the syntax given below to get the use of multiple id selectors.
Syntax
|
1 |
$(#id1, #id2, #id3...) |
Let’s see an example to include multiple ids using the above syntax. It applies the color to more than one element using ids of different elements.
Example
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $("#paraone, #paratwo, #parathree").css("color", "yellow"); }); </script> <p id="paraone">Welcome to Tutorial! A best place to improve technical skills.</p> <p>It is the best place to learn web development and coding skills.</p> <p id="paratwo">You are learning jQuery.</p> <p>learn with live examples.</p> <p id="parathree">Get free downloads to quickstart.</p> |
Output
Welcome to Tutorial! A best place to improve technical skills.
It is the best place to learn web development and coding skills.
You are learning jQuery.
learn with live examples.
Get free downloads to quickstart.
The above example applies the yellow color to the multiple specified ids with the jQuery css().