Know about Jquery Selectors with a simple example

5:45 PM in Java Script, jQuery Posted by Delicious Dot Net

Overview on JQuery Selectors

A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria.

The $() factory function:

The factory function $() makes use of following three building blocks while selecting elements in a given document:
Selectors are the key that make jQuery useful. You start by selecting content and then applying a jQuery function to it
We can select Elements in the following ways

Using Tag Name:
- $('p').css("border", "solid 1px
  red");
Using Tag ID
- $('#Some-Id').css("border", "solid 1px red");
Using Tag Class
- $('.Some-Class').css("border", "solid 1px red");
Using Universal (*)
- $('*').css("border", "solid 1px
  red");-------- Selects all the elements
- $("p > *").css("border", "solid 1px
  red"); ------ selects all the elements that are children of paragraph
  element.
Multiple elements selecting
- $("code, em, strong").css("border", "solid 1px red"); ------ Selects all the
 elements that are matched with <code> .

Example on selectors

This is example changes the color of the particular tageed data dynamically. Here you can enter the Tag Name or Tag ID or Tag Class or Multiple

Just Copy the below Html elements into your html page (Do forget to include JQuery library file in your header tag Other see here to know how to include).

<div id="selectors">
    
    <ul> 
    <li>Selector: <input type="text" id="selector" value="div"/> 
    <input type="button" id="btn" value="Run"/></li> 
    </ul> 
            
        
        <pre class="stocky"><div id="body"><span>&lt;div id="body"></span> 
  <h2><span>&lt;h2>Some Header&lt;/h2></span></h2> 
  <div class="contents"><span>&lt;div class="contents"></span> 
    <p><span>&lt;p></span>Paragraph 1<span>&lt;/p></span></p> 
    <p><span>&lt;p></span>Paragraph 2<span>&lt;/p></span></p> 
  <span>&lt;/div></span></div> 
<span>&lt;/div></span></div>

        </pre> 
            <div class="sample" style="float:left;"> 
            <div ID="body" style="float:left;"> 
                <h2>Heading</h2> 
                <div class="contents" style="float:left;"> 
                    <p>Paragraph content</p> 
                    <p>Paragraph content</p> 
                </div> 
            </div> 
            </div>
        </div>

This is the Script you need to include after the above.

<script type="text/javascript">
            $("#btn").click(function() {
                var selector = $("#selector").val();

                $("#selectors pre, #selectors div.sample")
                .find("*").removeClass("found").end()
                .find(selector).addClass("found");

                return false;
            });
         </script>

The Out puts will be like the following based on the selected item

Few More Examples:

$(".specialClass"): This selector gets all the elements that have the class of specialClass.
$("a#specialID.specialClass"): This selector matches links with an id of specialID and a class of specialClass.
$("p ~ ul"): Selects all elements matched by <ul> that follow a sibling element matched by .
$("div[p]"): Selects all elements matched by <div> that contain an element matched by
.
$("a[@rel]"): Selects all elements matched by <a> that have a rel attribute.
$("p[.myclass]"): Selects all elements matched by that contain an element with a class of myclass.
$(":radio"): Selects all radio buttons in the form.
$(":checked"): Selects all checked boxex in the form.
$(":input"): Selects only form elements (input, select, textarea, button)
$(":text"): Selects only text elements (input[type=text]).
$("li:first-child"): Selects all elements matched by <li> that are the first child of their parent.
$(":parent"): Selects all elements that are the parent of another element,
including text.