Home » Posts filed under jQuery Selectors
Showing posts with label jQuery Selectors. Show all posts
Showing posts with label jQuery Selectors. Show all posts

List of selectors in jQuery

Posted by 20Fingers2Brains on Tags: ,




  1. jQuery selectors are the one of the most important aspects of the jQuery library.
  2. They allows you to select and manipulate HTML elements as a group or as a single element. jQuery selectors support the Cascading style Sheet (CSS) syntax to select HTML elements by element name, attribute name, or content. 
  3. jQuery also provides the CSS selector to change CSS properties of HTML elements.

The following are the selectors supported by jQuery:
  •  attribute - 
    returns all the elements from the group of elements matching specified attribute.

  • returns all the elements from the group of elements matching specified attribute value.
  •  attributeValueValue - 
    returns all the elements from the group of elements matching specified attribute value.
  •  animated - 
    returns elements on the page on which animation is performed.
  •  button - 
    returns all input elements with type button.
  •  checkbox - 
    returns all input elements with type checkbox.
  •  checked - 
    returns all the checked input elements from the group of elements.
  •  classclass - 
    returns all the element with the specified class names, use to select elements having multiple classes assigned.
  •  class - 
    returns all the element with the specified class.
  •  contains - 
    returns elements that contains text matching the specified text.
  •  disabled - 
    returns all disabled input elements.
  •  element - 
    returns all the element with the specified element name.
  •  empty - 
    returns all elements that do not have child element nodes.
  •  enabled - 
    returns all enabled input elements.
  •  equal - 
    returns the elements at the specified index in the page.
  •  even - 
    selects all the elements at even position in the page.
  •  file - 
    returns all input elements with type file.
  •  first - returns the first element from the group of elements.
  •  greater - 
    returns a list of element with index greater than specified index.
  •  header - 
    returns all the header elements on the page such as h3,h3,h5 etc.
  •  hidden - 
    returns all hidden elements in the page.
  •  id - 
    returns the element with the specified id.
  •  image - 
    returns all input elements with type image.
  •  input - 
    returns all input elements.
  •  last - 
    returns the last element from the group of elements.
  •  lessthan - 
    returns a list of element with index less than specified index.
  •  not - 
    returns elements that does not satisfy the specified condition.
  •  odd - 
    selects all the elements at odd position in the page.
  •  password - 
    returns all input elements with type password.
  •  radio - 
    returns all input elements with type radio.
  •  reset - 
    returns all input elements with type reset.
  •  selected - 
    returns all selected input elements.
  •  star - 
    selects all the elements in the page.
  •  submit - 
    returns all input elements with type submit.
  •  text - returns all input elements with type text.
  •  visible - 
    returns all visible elements, elements that are not hidden.

first selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


first selector returns the first element from the group of elements.


Example :

 
    <html>
    <head>
    <title>first Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $("p:first").css({'font-size':'20px','background-color':'Orange'});
    });
    });
    </script>
    </head>
    <body>
    <p>This is first paragraph element.</p>
    <p>This is Second paragraph element.</p>
    <p>This is Thire paragraph element.</p>
    <p>This is fourth paragraph element.</p>
    <p>This is five paragraph element.</p>
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :



In the above example, we have used first selector. First selector selects the first element from the group of elements. In above example, it selects the first p element and apply CSS to it.

visible selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


Visible selector returns all visible elements, elements that are not hidden.


Example :


<html>
<head>
<title>visible Selector</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#myButton").click(function () {
            $("p:visible").css({ 'background-color': 'Orange', 'font-size': '20px' });
        });
    });
</script>
</head>
<body>
<p id="hiddenP">This is paragraph element.</p>
<button id="myButton">Click Me</button>
</body>
</html>

Demo :



 In the above example, we have used visible selector. Visible selector return all elements that are not hidden. In the above example the visible selector selects the p element and applies CSS to it.

text selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


text selector returns all input elements with type text.


Example :

 
    <html>
    <head>
    <title>text Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $(":text").css({'font-family':'Comic sans ms','font-weight':'bold'});
    });
    });
    </script>
    </head>
    <body>
    <input type="text" id="text1" Value="This is textbox">
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :



In the above example, we have used text selector. Text selector return all input elements with type text. In the above example the text selector selects the textbox element and changes font-family of the text.

submit selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


Submit selector returns all input elements with type submit.


Example :

 

    <html>
    <head>
    <title>submit Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $(":submit").text("Hello World");
    });
    });
    </script>
    </head>
    <body>
    <button type="submit" id="submitButton">Submit</button>
    <button type="button" id="myButton">Click Me</button>
    <button type="button" onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :



In the above example, we have used submit selector. Submit selector return all input elements with type submit. In the above example the submit selector selects the submit button and changes its text on button click.

star selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


* selector selects all the elements in the page.


Example :

 
    <html>
    <head>
    <title>star Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myButton").click(function () {
                $("*").css({ 'font-family': 'comic sans ms', 'background-color': 'Yellow' });
            });
        });
    </script>
    </head>
    <body>
    <div>This is div.</div>
    <p>This is paragraph.</p>
    <span>This is span.</span><br/>
    <button id="myButton" >Click ME</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :



In the above example, we have used star selector. Star selector selects all the elements on the page. In above example, it selects all the elements and applies CSS to all of them.
        Star selector can be used where we want to apply CSS or other text changes to all the elements on the page.


Example 2 :

 
    <html>
    <head>
    <title>star Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myButton").click(function () {
                $("*").css("font-family", "comic sans ms").wrap("<h2>");
            });
        });
    </script>
    </head>
    <body>
    <p>This is example for star selector.</p>
    <p>It is also known as Universal Selector.</p>
    <p>Star Selector selects all the elements on the document.</p>
    <input type="button" id="myButton" value="Click" /> 
    <input type="button" value="Reset" onclick="location.reload()" />
    </body>
    </html>

Demo :



In the above example, we have created 3 paragraph element. On button click, we are selecting all the elements on the page including buttons in a jQuery object.
     Star selector selects all the elements on the document. Then using css() method CSS for all the elements is changed and all the elements were rendered using h2 element using wrap() method.

selected selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


selected selector returns all selected input elements.


Example :

 
    <html>
    <head>
    <title>selected Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $("select option:selected").css("color", "Red");
    });
    });
    </script>
    </head>
    <body>
    <select name="players" multiple="multiple">
    <option>Henry</option>
    <option selected="selected">Messi</option>
    <option>Fabregas</option>
    <option selected="selected">Luiz</option>
    <option>Modric</option>
    <option>Wilshere</option>
    </select>
    <button id="myButton">Click</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :



In the above example, we have used selected selector. Selected selector returns all selected input elements. In above example, it selects the selected options and applies CSS to it.

reset selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


reset selector returns all input elements with type reset.


Example :

 
    <html>
    <head>
    <title>reset Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $(":reset").text("Hello World");
    });
    });
    </script>
    </head>
    <body>
    <button type="reset" id="submitButton">Reset</button>
    <button type="button" id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :




In the above example, we have used reset selector. Reset selector return all input elements with type reset. In the above example the reset selector selects the reset button and changes its text on button click.

radio selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


Radio selector returns all input elements with type radio.


 Example :


    <html>
    <head>
    <title>radio Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $(":radio[name=Gender]:nth(0)").attr("checked","checked");
    });
    });
    </script>
    </head>
    <body>
    Male<input type="radio" name="Gender" id="male">
    Female<input type="radio" name="Gender" id="female">
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :




In the above example, we have used radio selector. Radio selector return all input elements with type radio. In the above example the radio selector selects the first radio button.

password selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


Password selector returns all input elements with type password.


Example :

 

    <html>
    <head>
    <title>password Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $(":password").css("background-color","Orange");
    });
    });
    </script>
    </head>
    <body>
    <input type="password" id="text1" Value="This is textbox">
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :



In the above example, we have used password selector. Password selector return all input elements with type password. In the above example the password selector selects the textbox of type password and changes the background color of the textbox.

odd selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,




  1. odd selector selects all the elements at odd position in the page. 
  2. The odd selector can be used to apply CSS to odd tr's of a table.

Example :

    <html>
    <head>
    <title>odd Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $("p:odd").css({'font-size':'20px','background-color':'Orange'});
    });
    });
    </script>
    </head>
    <body>
    <p>This is first paragraph element.</p>
    <p>This is Second paragraph element.</p>
    <p>This is Thire paragraph element.</p>
    <p>This is fourth paragraph element.</p>
    <p>This is five paragraph element.</p>
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :



In the above example, we have used odd selector. Odd selector selects all the elements at odd place in the page. In above example, it selects all the p elements at odd position and applies CSS to all of them.

not selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


Not selector returns elements that does not satisfy the specified condition.


Example :

 
    <html>
    <head>
    <title>not Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $("ul li:not(:first)").css({'font-size':'20px','background-color':'Orange'});
    });
    });
    </script>
    </head>
    <body>
    <ul type="square">
    <li>Cesc Fabregas</li>
    <li>Thierry Henry</li>
    <li>Lionel Messi</li>
    <li>Ronaldinho</li>
    <li>Zinedine Zidane</li>
    </ul>
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :

lessthan selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


Less Than selector returns a list of element with index less than specified index.


Example :

 
    <html>
    <head>
    <title>less Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $("ul li:lt(2)").css({'font-size':'20px','background-color':'Orange'});
    });
    });
    </script>
    </head>
    <body>
    <ul type="square">
    <li>Cesc Fabregas</li>
    <li>Thierry Henry</li>
    <li>Lionel Messi</li>
    <li>Ronaldinho</li>
    <li>Zinedine Zidane</li>
    </ul>
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :



In the above example, we have used less than selector. Less Than selector select a list of elements with the index less than specified index. In above example, it selects the list elements with index less than 2 and applies CSS to it.

last selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


last selector returns the last element from the group of elements.


Example :

 

    <html>
    <head>
    <title>last Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $("p:last").css({'font-size':'20px','background-color':'Orange'});
    });
    });
    </script>
    </head>
    <body>
    <p>This is first paragraph element.</p>
    <p>This is Second paragraph element.</p>
    <p>This is Thire paragraph element.</p>
    <p>This is fourth paragraph element.</p>
    <p>This is five paragraph element.</p>
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :



In the above example, we have used last selector. Last selector selects the last element from the group of elements. In above example, it selects the last p element and apply CSS to it.

input selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


Input selector returns all input elements.


Example :

 
    <html>
    <head>
    <title>input Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $(":input").text("Hello World");
    });
    });
    </script>
    </head>
    <body>
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :




In the above example, we have used input selector. Input selector return all input elements. In the above example the input selector selects the button element and changes text of the button.

image selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


Image selector returns all input elements with type image.


Example :

 
    <html>
    <head>
    <title>image Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $(":image").css("height","20px");
    });
    });
    </script>
    </head>
    <body>
    <input type="image" src="k.jpg" />
    <button type="button" id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :



In the above example, we have used image selector. Image selector return all input elements with type image. In the above example the image selector selects the image and changes size of it.

id selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


id selector returns the element with the specified id.


Example :

 
    <html>
    <head>
    <title>ID Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
    </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $("#myDiv").css({'font-size':'20px','background-color':'Orange'});
    });
    });
    </script>
    </head>
    <body>
    <div id="myDiv">This is div.</div>
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :



In the above example, we have used ID selector. Id selector select the elements with the specified id on the page. In above example, it selects the elements with specified id and applies CSS to it.

hidden selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


Hidden selector returns all hidden elements in the page.


Example :

 
    <html>
    <head>
    <title>hidden Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $("p:hidden").removeAttr("hidden").css({'background-color':'Orange','font-size':'20px'});
    });
    });
    </script>
    </head>
    <body>
    <p id="hiddenP" hidden="hidden">This is paragraph element.</p>
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :




In the above example, we have used hidden selector. Hidden selector return all elements that are hidden. In the above example the hidden selector selects the hidden div and applies CSS to it.

header selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


Header selector returns all the header elements on the page such as h3, h3, h5 etc.



Example :

 

    <html>
    <head>
    <title>header Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $(":header").css({'font-size':'20px','background-color':'Orange'});
    });
    });
    </script>
    </head>
    <body>
    <h3>This is h3 element.</h3>
    <p>This is paragraph element.</p>
    <div>This is div element.</div>
    <span>This is span element.</span><br/>
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :



 In the above example, we have used header selector. Header selector selects header elements on the page. In the above example, the selector selects the h3 element and applies CSS to it.

greater selector in jQuery with example

Posted by 20Fingers2Brains on Tags: ,


Greater selector returns a list of element with index greater than specified index.


Example :

 
    <html>
    <head>
    <title>greater Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $("ul li:gt(2)").css({'font-size':'20px','background-color':'Orange'});
    });
    });
    </script>
    </head>
    <body>
    <ul type="square">
    <li>Cesc Fabregas</li>
    <li>Thierry Henry</li>
    <li>Lionel Messi</li>
    <li>Ronaldinho</li>
    <li>Zinedine Zidane</li>
    </ul>
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :

Copyright © 2014 20Fingers2Brains. All rights reserved. New Super Seo modified by CB Blogger. Powered by Blogger