In
this post jQuery attribute selector Example, we shall see the various type
selectors available in jQuery, and how to use them to filter out elements with specific attributes and values.
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 btnAttributeSelector button to view the selector Outputs.
<html xmlns="http://www.w3.org/1999/xhtml">
Build and run the application.
Click on the btnAttributeSelector 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() {
$('#btnAttributeSelector').click(function(event) {
event.preventDefault();
//
//
Attribute - ID Selector
$("#txtName").each(function() {
alert('ID Selector:' + $(this).attr('id') + ' => '
+ $(this).val());
});
//
//
Attribute - Class Selector
$(".FocusText").each(function() {
alert('Class
Selector:' + $(this).attr('id'));
});
//
//
Attribute - Attribute Exists Selector
$("[border]").each(function() {
alert('Attribute Exists Selector:' + $(this).attr('id'));
});
//
//
Attribute - Attribute Value In Selector
$("[border='0']").each(function() {
alert('Attribute Value In Selector:' + $(this).attr('id'));
});
//
//
Attribute - Attribute with Type (text) Selector
$("input[type=text][class]").each(function() {
alert('Attribute with Type Selector:' + $(this).attr('id'));
});
//
//
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'));
});
//
//
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'));
});
//
//
Attribute - Attribute with Type(dropdown) and Value IN Selector
$("select[class='RedText']").each(function() {
alert('Attribute with Type(dropdown) and Value IN Selector:'
+ $(this).attr('id'));
});
//
//
Attribute - Attribute with Type(dropdown) and Value Not IN Selector
$("select[class!='RedText']").each(function() {
alert('Attribute with Type(dropdown) and Value Not IN
Selector:' + $(this).attr('id'));
});
//
//
Attribute - Attribute with checkbox type Selector
$("input[type=checkbox][checked]").each(function() {
alert('Attribute
with checkbox type Selector:' + $(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:CheckboxList
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:CheckboxList>
</td>
</tr>
<tr>
<td>Country</td>
<td>
<asp:CheckboxList
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:CheckboxList>
</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
.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;
}
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 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
No comments:
Post a Comment