Quick Contact

    jQuery Selectors

    Introduction

    JavaScript is most commonly used to retrieve or modify the contents or value of HTML elements present on a page, as well as to apply filters such as show, hide, animations, and so on. However, before you can take any action, you must first locate or select the target HTML element.

    Select Elements with jQuery

    Selecting the elements using a traditional JavaScript strategy could be repetitive, but jQuery appears to work like magic here. One of the most powerful features of jQuery is the ability to make DOM element selection simple and easy.

    jQuery supports nearly all of the selectors represented in the most recent CSS3 standards, together with its own custom selectors. These custom selectors significantly improve the functionality of selecting HTML components on a page.

    Here we will see some of the most common methods for selecting components on a page and doing something with them using jQuery.

    Select Elements by ID

    Users can utilize the ID selector to choose a specific element on the document that has a unique ID.

    Whenever the document is prepared to be manipulated, the mentioned jQuery code could very well select and illustrate an element with the ID attribute id=”mark.”

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Select Element by ID< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        // Highlight element with id mark
        $("#mark").css("background", "yellow");
    });
    < /script>
    < /head>
    < body>
    < p id="mark">This is a paragraph.< /p>
    < p>This is another paragraph.< /p>
    < p>This is one more paragraph.< /p>
    < p>< strong>Note:< /strong> The value of the id attribute must be unique in an HTML document.</ p>
    < /body>
    < /html>
    

    Output

    This is a paragraph.

    This is another paragraph.

    This is one more paragraph.

    Note:

    The value of the id attribute must be unique in an HTML document.

    In the preceding example, the $ (document). ready() is an occurrence that is utilized to safely manipulate a page with jQuery. This event’s code will not run until the page’s DOM is ready. In the following chapter, we’ll learn more about the events.

    Select Elements by Class Name

    The category selector can be utilized to select elements that belong to a specific class.

    When the document is complete, the following jQuery code will select and highlight the elements with the class attribute class=”mark.”

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Select Element by Class< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        // Highlight elements with class mark
        $(".mark").css("background", "yellow");
    });
    < /script>
    < /head>
    < body>
    < p class="mark">This is a paragraph.< /p>
    < p class="mark">This is another paragraph.< /p>
    < p>This is one more paragraph.< /p>
    < /body>
    < /html>
    

    Select Elements by Name

    The element selector is useful for selecting components based on their names.

    Whenever the document is ready, the following jQuery code will select and highlight all paragraphs, i.e. the < p> elements.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Select Element by Name< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        // Highlight paragraph elements
        $("p").css("background", "yellow");
    });
    < /script>
    < /head>
    < body>
    < h1>This is heading< /h1>
    < p>This is a paragraph.< /p>
    < p>This is another paragraph.< /p>
    < div>This is another block of text.< /div>
    < /body>
    < /html>
    

    Output

    This is heading

    This is a paragraph.

    This is another paragraph.

    This is another block of text.

    Select Elements by Attribute

    Users can utilize the feature selector to select an element based on one of its HTML qualities, such as the target variable of a link or the type attribute of an input, for example.

    When the document is prepared, the following jQuery code will select and identify all text inputs, i.e. < input> elements with the type=”text.”

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Select Element by Attribute< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        // Highlight paragraph elements
        $('input[type="text"]').css("background", "skyblue");
    });
    < /script>
    < /head>
    < body>
    < form>
    < label>Username: < input type="text">< /label>
    < label>Password: < input type="password">< /label>
    < input type="submit" value="Sign In">
    < /form>
    < /body>
    < /html>
    

    Output

    Select Elements by Compound CSS Selector

    Users can also integrate CSS selectors to narrow down your options even further.

    For example, you can use the class selector in conjunction with a component selector to find features in a document that are of a specific type and class.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Select Element by Compound Selector< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        // Highlight only paragraph elements with class mark
        $("p.mark").css("background", "yellow");
    
        // Highlight only span elements inside the element with ID mark
        $("#mark span").css("background", "yellow");
    
        // Highlight li elements inside the ul elements
        $("ul li").css("background", "yellow");
    
        // Highlight li elements only inside the ul element with id mark
        $("ul#mark li").css("background", "red");
    
        // Highlight li elements inside all the ul element with class mark
        $("ul.mark li").css("background", "green");
    
        // Highlight all anchor elements with target blank
        $('a[target="_blank"]').css("background", "yellow");
    });
    < /script>
    < /head>
    < body>
    < p>This is a paragraph.< /p>
    < p class="mark">This is another paragraph.< /p>
    < p>This is one more paragraph.< /p>
    < ul>
    < li>List item one< /li>
    < li>List item two< /li>
    < li>List item three< /li>
    < /ul>
    < ul id="mark">
    < li>List item one< /li>
    < li>List < span>item two< /span>< /li>
    < li>List item three< /li>
    < /ul>
    < ul class="mark">
    < li>List item one< /li>
    < li>List item two< /li>
    < li>List item three< /li>
    < /ul>
    < p>Go to < a href="https://www.tutorialrepublic.com/" target="_blank">Home page< /a>< /p>
    < /body>
    < /html>
    

    Output

    jQuery Custom Selector

    jQuery offers the own specially designed selector in furthermore to the CSS specified selectors to further enhance the capabilities of choosing elements on a page.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Custom Selector< /title>
    < style>
        /* Some custom style */
        *{
    padding: 5px;
        }
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        // Highlight table rows appearing at odd places
        $("tr:odd").css("background", "skyblue");
    
        // Highlight table rows appearing at even places
        $("tr:even").css("background", "orange");
    
        // Highlight first paragraph element
        $("p:first").css("background", "yellow");
    
        // Highlight last paragraph element
        $("p:last").css("background", "green");
    
        // Highlight all input elements with type text inside a form
        $("form :text").css("background", "purple");
    
        // Highlight all input elements with type password inside a form
        $("form :password").css("background", "blue");
    
        // Highlight all input elements with type submit inside a form
        $("form :submit").css("background", "grey");
    });
    < /script>
    < /head>
    < body>
    < table border="1">
    < thead>
    < tr>
    < th>No.< /th>
    < th>Name< /th>
    < th>Email< /th>
    	< th>Contact no< /th>
    < /tr>
    < /thead>
    < tbody>
    < tr>
    < td>1< /td>
    < td>Sachin Tendulkar< /td>
    < td>Sachintendulkar123@mail.com< /td>
    	< td>9999999999< /td>
    < /tr>
    < tr>
    < td>2< /td>
    < td>Rahul Dravid< /td>
    < td>Rahuldravid234@mail.com< /td>
    	< td>8888888888< /td>
    < /tr>
    < tr>
    < td>3< /td>
    < td>ViratKohli< /td>
    < td>Viratkohli345@mail.com< /td>
    	< td>7777777777< /td>
    < /tr>
    	< tr>
    < td>4< /td>
    < td>Rohit Sharma< /td>
    < td>Rohitsharma456@mail.com< /td>
    	< td>6666666666< /td>
    < /tr>
    < /tbody>
    < /table>
    < p>This is a paragraph1.< /p>
    < p>This is a paragraph2.< /p>
    < p>This is a paragraph3.< /p>
    < p>This is a paragraph4.< /p>
    < form>
    < label>Username: < input type="text">< /label>
    < label>Password: < input type="password">< /label>
    < input type="submit" value="Sign In">
    < /form>
    < /body>
    < /html>
    

    Output

    FAQS

    Q1. What is a * selector?

    To pick all things in an HTML file, be using the asterisk (*), also identified as the CSS universal selector. CSS identifiers can be used to choose which parts of the website to style.

    Q2. What is jQuery HTML?

    jQuery is a JavaScript library that allows you to “write less, do more.” jQuery’s objective is to make it much easier to be using JavaScript on your website. jQuery completes many common tasks that necessitate several more lines of JavaScript code into techniques that can be called with a single line of code.

    Q3. What is a tag selector?

    The Tag Selector is situated immediately below the RTE’s Editable Region and showcases the HTML tag hierarchical system for the current selection (or cursor position). By simply click any of the expressed tags, it is applied to the current tag and the Investigator Panel is updated to reflect the new properties.

    Q4. Why CSS selector is used?

    CSS selectors are used to choose which content to style. CSS selectors are a component of the CSS set of regulations. CSS selectors select HTML elements based on their id, class, type, characterize, and so on. CSS selectors are classified into several types.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.