jQuery attribute Selector

• The [attribute] selector selects each element with the specified attribute.

Syntax

$('[attribute]')
$('[attribute="value"]')

Ex:
$('[title]') :-  Selects all elements that have title attribute.
$('div[title]'):-  Selects all div elements that have title attribute.
$('[title="divtitle"]') :-  Selects all elements that have title attribute value - divtitle.
$('div[title="divtitle"]') :-  Selects all div elements that have title attribute value - divtitle.
$('[title^='Ajay']') :- Selects  all elements with a title attribute value starting with "Ajay".
$("[title~='welcome']") :- Selects  all elements with a title attribute value containing the specific word "welcome".
$("[title*='welcome']") :- Selects all elements with a title attribute value containing the word "welcome".


$('[title]') :-  Selects all elements that have title attribute.

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript">

        $(document).ready(function () {

            $('[title]').css('border', '5px solid red');

        });

    </script>

  </head>

      <body>    

      <div title="dvTitle">

        DIV with Title

    </div>

    <br />

    <div title="dvTitle1">

        DIV with another Title

    </div>

      <span title="spanTitle">

        SPAN element

    </span>

    <p>I live in Mumbai.</p>

    </body>

</html>

output:

$('div[title]'):-  Selects all div elements that have title attribute.

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript">

        $(document).ready(function () {

            $('div[title]').css('border', '5px solid red');

        });

    </script>

  </head>

      <body>    

      <div title="dvTitle">

        DIV with Title

    </div>

    <br />

    <div title="dvTitle1">

        DIV with another Title

    </div>

      <span title="spanTitle">

        SPAN element

    </span>

    <p>I live in Mumbai.</p>

    </body>

</html>

output:

JQuery class Selectors

Class Selectors

• class selector finds elements with a specific class.
• period character use to find specific class.
• In one page multiple controls or element have same class then select select all the element corresponding to that class.

Ex:  $(".cssclass")

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $(".cssclass").hide();

    });

});

</script>

</head>

<body>

<p class="cssclass">This is a paragraph.</p>

<p class="cssclass">This is a paragraph.</p>

<p class="Param">This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

JQuery Element Selectors

• The Element Selectors selects all elements with the specific element name in html. 

ex:

$("element") 

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

$(document).ready(function()

{

    $("p").css("background-color", "red");

});

</script>

  </head>

      <body>

       <h1>Home</h1>

        <p class="intro">introduction </p>

        <p>I live in Mumbai.</p>

        <p>india is best country in the world.</p>

    Who is your favorite:

         <ul id="choose">

             <li>facebook</li>

             <li>whatapp</li>

             <li>twitter</li>

         </ul>

    </body>

</html>

OUTPUT:

jQuery id Selector

• The id selector selects the element with specific id in html. 
• It is work same as function as document.getelementbyid() in JavaScript
• jQuery selectors start with the dollar sign and parentheses().

ex:
$("#id") 


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

<h1>Home</h1>
<p id="intro">This paragrap apply jquery css</p>
<p>This paragrap without css</p>
</body>
</html>


Output: