Friday, September 28, 2012

jQuery attribute with type and value NOT IN selector


The jQuery attribute with type and value NOT IN selector is used to filter out all elements in a page with a specific type, and have the specified attribute and NOT the specified value for the attribute, the syntax for this selector is.

$("input[type=<type name>][<attribute name> != <attribute value>]")

In this post we shall see on how to use the jQuery attribute with type and value NOT IN selector to select all text elements in a page which have the class attribute, and do not have a value of
RedText for the class attribute.

The following script lists out all the text elements in the page which have the attributeclass” which do not have the value “RedText
 
    $("input[type=text][class!='RedText']").each(function() {

        alert('Attribute with Type(text) and Value Not IN Selector:' + $(this).attr('id'));
    });

The following script lists out all the text elements in a page which have the class attribute and with do not have the value RedText for the class, on click of the btnAttributeSelector button.

$('#btnAttributeSelector).click(function(event) {
    event.preventDefault();
    //                          
    // Attribute - Attribute with Type(text) and Value Not IN Selector          
    $("input[type=text][class!='RedText']").each(function() {
        alert('Attribute with Type(text) and Value Not IN Selector:' + $(this).attr('id'));
    });
});

Related Post
jQuery attribute Selectors
jQuery id selector
jQuery class selector
jQuery attribute exists selector
jQuery attribute value selector
jQuery attribute with type selector
jQuery attribute with type and value IN selector
jQuery attribute with type and value NOT IN selector
jQuery attribute with dropdown type selector
jQuery attribute with checkbox type selector
jQuery attribute selector Example

jQuery attribute with type and value IN selector


The jQuery attribute with type and value IN selector is used to filter out all elements in a page with a specific type, and have the specified attribute with the specified value for the attribute, the syntax for this selector is.

$("input[type=<type name>][<attribute name> = <attribute value>]")

In this post we shall see on how to use the jQuery attribute with type and value IN selector to select all text elements in a page which have the class attribute, and a value of
RedText for the class.

The following script lists out all the text elements in the page which have the attributeclass” with the value “RedText
 
    $("input[type=text][class='RedText']").each(function() {

        alert('Attribute with Type(text) and Value IN Selector:' +            $(this).attr('id'));
    });

The following script lists out all the text elements in a page which have the class attribute with value RedText, on click of the btnAttributeSelector button.

$('#btnAttributeSelector).click(function(event) {
    event.preventDefault();
    //                          
    // Attribute - Attribute with Type(text) and Value IN Selector               
    $("input[type=text][class='RedText']").each(function() {
        alert('Attribute with Type(text) and Value IN Selector:' +            $(this).attr('id'));

Thursday, September 27, 2012

jQuery attribute with type selector


The jQuery attribute with type selector is used to filter out all elements in a page with a specific type, and have the specified attribute, the syntax for this selector is.

$("input[type=<type name>][<attribute name>]")

In this post we shall see on how to use the jQuery attribute with type selector to select all text elements in a page which have the class attribute.

The following script lists out all the text elements in the page which have the attributeclass
 

    $("input[type=text][class]").each(function() {
        alert('Attribute with Type Selector:' + $(this).attr('id'));
    });

The following script lists out all the text elements in a page which have the class attribute, on click of the btnAttributeSelector button.

$('#btnAttributeSelector).click(function(event) {
    event.preventDefault();
    //                          
    // Attribute - Attribute with Type (text) Selector               
    $("input[type=text][class]").each(function() {
        alert('Attribute with Type Selector:' + $(this).attr('id'));

jQuery attribute value selector


The jQuery attribute value selector is used to filter out all elements in a page which have the specified attribute and he specified value for the attribute, the syntax for this selector is.

$([attribute name = attribute value])

In this post we shall see on how to use the jQuery attribute value selector to select all elements in a page which have a specific attribute, with the specified value.

The following script lists out all the elements in the page which have the attributeborder”, and a value of 0 for the border attribute

    $("[border='0']").each(function() {
        alert('Attribute Value In Selector:' + $(this).attr('id'));
    });

The following script lists out all the elements in the page which have the attributeborder”, and a value of 0 for the border attribute, on click of the btnAttributeSelector button.

$('#btnAttributeSelector).click(function(event) {
    event.preventDefault();
    //                          
    // Attribute - Attribute Value In Selector
    $("[border='0']").each(function() {
        alert('Attribute Value In Selector:' + $(this).attr('id'));

jQuery attribute exists selector


The jQuery attribute exists selector is used to filter out all elements in a page which have the specified attribute, the syntax for this selector is.

$([attribute name])

In this post we shall see on how to use the jQuery attribute exists selector to select all elements in a page which have a specific attribute.

The following script lists out all the elements in the page which have the attributeborder

    $("[border]").each(function() {
        alert('Attribute Exists Selector:' + $(this).attr('id'));
    });

The following script lists out all the elements in the page which have a specific attribute on click of the btnAttributeSelector button.

$('#btnAttributeSelector).click(function(event) {
    event.preventDefault();               
    //
    // Attribute - Attribute Exists Selector
    $("[border]").each(function() {
        alert('Attribute Exists Selector:' + $(this).attr('id'));
    });
});

jQuery class selector


jquery, jquery selector, jquery attribute selector
The jQuery class selector is used to filter out all elements in a page with a specific class, the syntax for this selector is.

$(".className")

In this post we shall see on how to use the jQuery class selector to select all elements in a page which have a specific class.

The following script lists out all the elements in the page which have a classFocusText

    $(".FocusText").each(function() {
      alert('Class Selector:' + $(this).attr('id'));
    });

The following script lists out all the elements in the page which have a specific class on click of the btnAttributeSelector button.

$('#btnAttributeSelector).click(function(event) {
    event.preventDefault();               
    //
    // Attribute - Class Selector
    $(".FocusText").each(function() {
      alert('Class Selector:' + $(this).attr('id'));
    });
});

Related Post
jQuery attribute Selectors
jQuery id selector
jQuery class selector
jQuery attribute exists selector
jQuery attribute value selector
jQuery attribute with type selector
jQuery attribute with type and value IN selector
jQuery attribute with type and value NOT IN selector
jQuery attribute with dropdown type selector
jQuery attribute with checkbox type selector
jQuery attribute selector Example

jQuery id selector


The jQuery id selector is used to filter out all elements in a page with a specific ID, the syntax for this selector is.

$("#ID")

In this post we shall see on how to use the jQuery id selector to select all elements in a page which have a specific ID.

The following script lists out all the elements in the page which have an IDtxtName

    $("#txtName").each(function() {
        alert('ID Selector:' + $(this).attr('id') + ' => ' + $(this).val());
    }); 

The following script lists out all the elements in the page which have a specific ID on click of the btnAttributeSelector button.

$('#btnAttributeSelector).click(function(event) {
    event.preventDefault();               
    //
    // Attribute - ID Selector
    $("#txtName").each(function() {
        alert('ID Selector:' + $(this).attr('id') + ' => ' + $(this).val());

jQuery attribute selector


The jQuery attribute selectors are used to select elements from a page based on the attributes of the element. For example the “#” selector will select elements based on the ID of the elements.

In this post we shall see the various attribute selectors available in jQuery, and how to use them to filter out elements of specific type.

The following are the attribute selectors available in jQuery.

Selector
Type of Element selected
#
Selects elements based on the ID of the Element
.
Selects elements based on the class of the Element
[attribute]
Selects all elements which have the specific attribute
[attribute=value]
Selects all elements with the specified attribute and the specified value
[attribute!=value]
Selects all elements with the specified attribute and not the specified value
[type=value] [attribute=value]
Selects all elements of the specified type which have the specified value for the attribute.
[type=value] [attribute!=value]
Selects all elements of the specified type which do not have the specified value for the attribute.

Wednesday, September 26, 2012

jQuery type selector Example

In this post jQuery type selector Example, we shall see the various type selectors available in jQuery, and how to use them to filter out elements of specific type.





Running the Sample
To run the example code at your desk, create a new Asp.net page; copy the entire code below, change reference of the jQuery & Stylesheet files to point to your local directory.
Build and run the application.

Click on the
btnTypeSelector button to view the selector Outputs.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Selector</title>
    <script
        type="text/javascript"
        src="JavaScript/jquery-1.7.2.js"></script>
    <script
        type="text/javascript"
        src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
    <link
        type="text/css"
        href="Stylesheet.css"
        rel="Stylesheet" />
    <script
        type="text/javascript"
        language="javascript">
        $(document).ready(function() {
            $('#btnTypeSelector').click(function(event) {
                event.preventDefault();               
                //
                // TextBox - Type Selector
                $('input[type="text"]').each(function() {
                    alert('TextBox: ' + $(this).attr('id'));
                });
                //
                // TextArea - Type Selector
                $('textarea').each(function() {
                    alert('TextArea: ' + $(this).attr('id'));
                });
                //
                // Hidden - Type Selector
                $('input[type="hidden"]').each(function() {
                    alert('Hidden: ' + $(this).attr('id'));
                });               
                //
                // Dropdown - Type Selector
                $('select').each(function() {
                    alert('DropDown: ' + $(this).attr('id'));
                });
                //
                // Radio Button - Type Selector
                $('input[type="radio"]').each(function() {
                    alert('Radio Button: ' + $(this).attr('id'));
                });
                //
                // Check Box - Type Selector
                $('input[type="checkbox"]').each(function() {
                    alert('Check Box: ' + $(this).attr('id'));
                });
                //
                // Image - Type Selector
                $('image').each(function() {
                    alert('Image: ' + $(this).attr('id'));
                });
                //
                // HyperLink - Type Selector
                $('a').each(function() {
                    alert('HyperLink: ' + $(this).attr('id'));
                });               
                //
                // Submit Button - Type Selector
                $('input[type="submit"]').each(function() {
                    alert('Submit Button: ' + $(this).attr('id'));
                });
                //
                // Reset Button - Type Selector
                $('input[type="reset"]').each(function() {
                    alert('Reset Button: ' + $(this).attr('id'));
                });
                //
                // Button - Type Selector
                $('input[type="button"]').each(function() {
                    alert('Button: ' + $(this).attr('id'));
                });
            });           
        });
    </script>       
</head>
<body>
<form id="frmSelector" runat="server">
<table>
    <tr>           
        <td>Name</td>
        <td>
            <asp:TextBox
                ID="txtName"
                CssClass="RedText"
                runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>           
        <td>Age</td>
        <td>
            <asp:TextBox
                ID="txtAge"
                Enabled="false"
                CssClass="FocusText"
                runat="server"></asp:TextBox>
        </td>
    </tr>  
    <tr>           
        <td>Password</td>
        <td>
            <asp:TextBox
                ID="txtPassword"
                CssClass="FocusText"
                TextMode="Password"
                runat="server"></asp:TextBox>
        </td>
    </tr>  
    <tr>           
        <td>Address</td>
        <td>
            <asp:TextBox
                ID="txtAddress"
                CssClass="FocusText"
                TextMode="MultiLine"
                runat="server"></asp:TextBox>
        </td>
    </tr>           
    <tr>           
        <td>Gender</td>
        <td>
            <asp:DropDownList
                ID="drpGender"
                CssClass="RedText"
                runat="server">
                <asp:ListItem Value="" Text="-Select-"></asp:ListItem>   
                <asp:ListItem Value="M" Text="Male"></asp:ListItem>   
                <asp:ListItem Value="F" Text="Female"></asp:ListItem>   
            </asp:DropDownList>
        </td>
    </tr> 
    <tr>           
        <td>Country</td>
        <td>
            <asp:DropDownList
                ID="drpCountry"
                runat="server">
                <asp:ListItem Value="" Text="-Select-"></asp:ListItem>   
                <asp:ListItem Value="U" Text="USA"></asp:ListItem>   
                <asp:ListItem Value="K" Text="UK"></asp:ListItem>   
                <asp:ListItem Value="I" Text="India"></asp:ListItem>   
            </asp:DropDownList>
        </td>
    </tr>      
    <tr>           
        <td>Status</td>
        <td>
             <asp:RadioButtonList 
                ID="radListStatus"
                CssClass="RedText"
                RepeatDirection="Horizontal"
                runat="server">
                <asp:ListItem Value="A" Text="Active"></asp:ListItem>   
                <asp:ListItem Value="I" Text="InActive"></asp:ListItem>   
            </asp:RadioButtonList>
        </td>
    </tr> 
    <tr>           
        <td>Skill sets</td>
        <td>
             <asp:CheckBoxList
                ID="chkListSkills"
                CssClass="RedText"
                RepeatDirection="Horizontal"
                runat="server">
                <asp:ListItem Value="A" Text="Asp.Net"></asp:ListItem>   
                <asp:ListItem Value="C" Text="C#"></asp:ListItem>   
                <asp:ListItem Value="S" Text="SQL Server"></asp:ListItem>   
                <asp:ListItem Value="O" Text="Oracle"></asp:ListItem>   
                <asp:ListItem Value="M" Text="My SQL"></asp:ListItem>   
            </asp:CheckBoxList>
        </td>
    </tr>
    <tr>           
        <td>Icon</td>
        <td>
            <img
                src="images\Users.JPG"
                id="imgUsersIcon"
                border="0"
                class="FocusText" />
        </td>
    </tr>  
    <tr>           
        <td>Profile Link</td>
        <td>
            <asp:HyperLink
                id="lnkProfile"
                runat="server"
                NavigateUrl="#"
                Text="View Profile"></asp:HyperLink>
        </td>
    </tr>       
    <tr>           
        <td>Hidden Text</td>
        <td>
            <input type="hidden" id="txtHidden" />
        </td>
    </tr>           
    <tr>           
        <td>Submit</td>
        <td colspan="2">
            <asp:Button
                ID="cmdSubmitButton"
                Text="Save"
                runat="server"></asp:Button>
        </td>
    </tr> 
    <tr>           
        <td>Reset</td>
        <td colspan="2">
            <input type="reset" id="cmdResetButton" value="Reset" />
        </td>
    </tr> 
    <tr>           
        <td>Button</td>
        <td colspan="2">
            <input type="button" id="cmdButton" value="Button" />
        </td>
    </tr>       
    <tr>           
        <td colspan="2">
             
        </td>
    </tr>  
   <tr>           
        <td colspan="2">
            <asp:Button
                ID="btnTypeSelector"
                Text="Type Selector"
                runat="server"></asp:Button>
        </td>
    </tr> 
   <tr>           
        <td colspan="2">
            <asp:Button
                ID="btnIDSelector"
                Text="ID Selector"
                runat="server"></asp:Button>
        </td>
    </tr>                                     
   <tr>           
        <td colspan="2">
            <asp:Button
                ID="btnAttributeSelector"
                Text="Attribute Selector"
                runat="server"></asp:Button>
        </td>
    </tr> 
   <tr>           
        <td colspan="2">
            <asp:Button
                ID="btnClassSelector"
                Text="Class Selector"
                runat="server"></asp:Button>
        </td>
    </tr>                                        
   <tr>           
        <td colspan="2">
            <asp:Button
                ID="btnStateSelector"
                Text="State Selector"
                runat="server"></asp:Button>
        </td>
    </tr>                                        
   <tr>           
        <td colspan="2">
            <asp:Button
                ID="btnHierarchySelector"
                Text="Hierarchy Selector"
                runat="server"></asp:Button>
        </td>
    </tr>                                            
</table>
</form>
</body>
</html>


Stylesheet.css

.RedText
{
      color:Red;
      border: 1px solid black;  
      font-family:Verdana;
      font-size:9pt;
}
.FocusText
{
      border: 1px solid blue;
      background-color: #FEDCBA;
      font-family:Verdana;
      font-size:9pt;   
}
.waterMark
{     background-color:#fedcba;
      font-family:Verdana;
      font-size:10pt;
} 
.Label
{
      color:Maroon;
      font-family:Verdana;
      font-size:10pt;
}