jQuery first selector

Asp.Net CS By Example 21 April 2021

jQuery first selector

In this post we are exploring more about jQuery first selector. jQuery lets we select the first of a set of page elements using the positional selector named first.If kwown more abount selector click Here.

For example, here is how to select the first <p> element in a page:

 $('p:first')

we can change the style of the selected <p> element with the css( ) function, which accepts a CSS style and its new setting like this, where we are making the first paragraph italic:

 $('p:first').css("font-style", "italic");

There is also a last selector that selects the last of a set of page elements.

 $('p:last').css("font-style", "italic");

Below code example puts for see above jQuery first selector working.

jqscript.html

<html>
<head>
    <title>
        Select the first of a set of
        elements
    </title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        function setStyle() {
            $('p:first').css("font-style","italic");
        }
    </script>
</head>
<body>
    <h1>
        Select the first of a set of
        elements
    </h1>
    <div>
        <p>This is paragraph 1.</p>
        <p>This is paragraph 2.</p>
        <p>This is paragraph 3.</p>
        <p>This is paragraph 4.</p>
    </div>
    <form>
        <input type="button"
               value="Style first paragraph"
               onclick="setStyle( )"
        </input>
    </form>
</body>
</html>

Output:

Thanks for reading jQuery first selector

21 April 2021

jQuery first selector

No comments:

Post a Comment