jQuery Id Selector

Jquery Id Selector select html element with id attribute . Id is unique for all HTML element

Syntax for Id Selector

$("#id-name")

Id Selector select only first id if same name of id exists that mean same name multiple id exists

Example

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <p id="myP"> jquery is javascript light-weight library </p>
    <!---jQuery code with syntax--->
    <script>
      $("document").ready(function(){
        /*____get innerHTML of paragraph tag______**/
        var text = $("#myP").html();
        alert(text);
      })
    </script>
  </body>
</html>

Try it Yourself

Change style of Selected Id

jQuery change style of html selected element

Syntax to change style

$("myid").css(property,value)

Change the style of h1 heading

Example

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <h1 id="myh1"> this heading have blue color </h1>
    <script>
      $("document").ready(function(){
         var h1 = $("#myh1");
        h1.css("color","blue");
      })
    </script>
  </body>
</html>

Try it Yourself

Apply Multiple CSS Property by jQuery

Change style of HTML Element with multi CSS property

pass all css property in object form within

Syntax for Multi CSS Property

element.css({"property1":"value1","property2":"value2"})

Now apply jquery css property

Example

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <h1 id="myh1"> this heading color blue and background red </h1>
    <script>
      $("document").ready(function(){
         var h1 = $("#myh1");
        h1.css({"color":"blue","background":"red"});
      })
    </script>
  </body>
</html>

Try it Yourself

Related Articals

jQuery Syntax

jQuery ClassName Selector

jQuery TagName selector

HTML

CSS

jQuery