JQuery Selector

What is jQuery Selectors?

jQuery selectors are one of the most vital and important parts o the jQuery library.

jQuery Selectors

jQuery selectors help to select the HTML elements and it also allows manipulating those HTML elements. JQuery selectors are used for the purpose to “find” HTML elements which are based on their id, classes, types, attributes, values of attributes.It is fully based on the CSS Selectors which already exist.It has some of the own custom selectors also.The selectors which are in the JQuery start with dollar sign and are parentheses: $().

The element Selector

The main purpose of the jQuery element selector is to select the elements which are based on the element name.The elements on the page can be selected.

Example:
HTML Document (element.html)
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>CP Tutorials</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").hide();
            });
        });
    </script>
</head>
<body>
<h1>Example of jQuery</h1>
<p>About CP Tutorials</p>
<p>tutorialscenterpoint.com is one of the best idea and a website which contains tutorials about web designing, web
    development, mobile app development, programming, java programming, software engineering, network engineering
    courses and other skills.</p>
<button>Click</button>
<p>Click to see effect</p>
</body>
</html>

The #id selector

The id attribute of the HTML tag is used by the jQuery #id attribute for the purpose of finding the specific element.The idmust be unique within a pageand it should use the #idselector when there is a need to find a single or the unique element.For the purpose of finding an element which has a specific idhas a character is needed to be written which should be followed by the id of the HTML element.

Example:
HTML Document (selector.html)
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>CP Tutorials</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#content").hide();
            });
        });
    </script>
</head>
<body>
<h1>Example of jQuery</h1>
<p>About CP Tutorials</p>
<p id="content">tutorialscenterpoint.com is one of the best idea and a website which contains tutorials about web designing, web
    development, mobile app development, programming, java programming, software engineering, network engineering
    courses and other skills.</p>
<button>Click</button>
<p>Click to see effect</p>
</body>
</html>

The .class Selector

The main purpose of using the jQuery class selector is to find the element which has a specific class.For the purpose of finding elements which has a specific class a period character is needed to be writtenwhich should be followed by the name of the class.

The main purpose of using the jQuery class selector is to find the element which has a specific class.For the purpose of finding elements which has a specific class a period character is needed to be writtenwhich should be followed by the name of the class.

Example:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>CP Tutorials</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $(".content").hide();
            });
        });
    </script>
</head>
<body>
<h1>Example of jQuery</h1>
<p>About CP Tutorials</p>
<p class="content">tutorialscenterpoint.com is one of the best idea and a website which contains tutorials about web designing, web
    development, mobile app development, programming, java programming, software engineering, network engineering
    courses and other skills.</p>
<button>Click</button>
<p class="content">Click to see effect</p>
</body>
</html>