Part 5 - Attribute Selectors in JQuery?
Selectors in JQuery?
A jQuery selectors selects or finds a DOM element in an HTML document. It is used to select HTML elements based on id, name, types, attributes, class etc.
popular selectors
Example: $(":input[type='button']") , $(":input[type='radio']")
Attribute Selectors in JQuery:
In this tutorial only Attribute selectors are explained. Attribute selectors are used to select element by attribute names. For example href, title, style, etc.
popular selectors
- Id selectors
- Class selectors
- Element selectors
- Attribute selectors
Example: $(":input[type='button']") , $(":input[type='radio']")
Attribute Selectors in JQuery:
In this tutorial only Attribute selectors are explained. Attribute selectors are used to select element by attribute names. For example href, title, style, etc.
# Example
Replace your html code with below code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
// $("span ").css({ "border": "2px solid red", "padding": "10px" });
// $("table th").css({ "background-color": "red", "color": "white" });
// $("table tr:even").css({ "background-color": "blue", "color": "white" });
//$("table tr:odd").css({ "background-color": "yellow", "color": "black" });
// $("p:first").css({ "border": "2px solid blue", "padding": "10px" });
// $("p:last").css({ "border": "2px solid blue", "padding": "10px" });
$("div[title]").css({ "border": "2px solid blue", "padding": "10px" });
$("a[href='google.com']").css({ "border": "2px solid red", "padding": "10px" });
})
</script>
</head>
<body>
<div title="div1" style="margin-bottom:50px;padding:10px">
<a href="google.com">click</a>
<span>child1 </span>
</div>
<div title="div2" style="margin-bottom: 50px;padding:10px">
<a title="mylink" href="technotipstutorial.blogspot.com">click</a>
<span>child2 </span>
</div>
<div title="div3" style="margin-bottom: 50px;padding:10px">
<table border="1" style="width:30%">
<tr>
<th>
Name
</th>
<th>Department</th>
</tr>
<tbody>
<tr><td>Ashish</td><td>Development</td></tr>
<tr><td>John</td><td>QA</td></tr>
<tr><td>Sara</td><td>Development</td></tr>
<tr><td>Lara</td><td>Implementation</td></tr>
<tr><td>Methew</td><td>Development</td></tr>
<tr><td>Ashish</td><td>Development</td></tr>
</tbody>
</table>
</div>
<span title="span1" style="margin-bottom: 50px;padding:10px">
span1
</span>
<span title="span2" style="margin-bottom: 50px;padding:10px">
span2
</span>
</body>
</html>
0 Response to "Part 5 - Attribute Selectors in JQuery?"
Post a Comment