We have 2 parts:
-
Part 1:
STEP BY STEP TO LEARN JQUERY SELECTOR
-
Part 2:
STEP BY STEP TO LEARN JQUERY ATTRIBUTES
- Part 3: THE NEXT TIME I WILL POST MORE ....
JQUERY ATTRIBUTES
Create new Project ASP.NET Web Form Application is JQuery.Attributes
After create new project, we have jQuery available in this
JQUERY ATTRIBUTES ATTR
Attr – attr
Creating Attr_Attr.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - ATTRIBUTES Attr - Attr</title>
<script>
$(document).ready(function () {
var title = $("em").attr("title");
$("div").text(title);
});
</script>
<style>
em {
color: blue;
font-weight;
bold;
}
div {
color: red;
}
</style>
</head>
<body>
<p>
Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>
The title of the emphasis is:<div></div>
</body>
</html>
F5 to run
JQUERY ATTRIBUTES CLASS
Class - addClass
Creating Class_AddClass.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - ATTRIBUTES Class - AddClass</title>
<script>
$(document).ready(function () {
$("p:last").addClass("selected");
});
</script>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
.highlight {
background: yellow;
}
</style>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
</body>
</html>
F5 to run
Class – removeClass
Creating Class_RemoveClass.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - ATTRIBUTES Class - RemoveClass</title>
<script>
$(document).ready(function () {
$("p:even").removeClass("blue");
});
</script>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
}
.blue {
color: blue;
}
.under {
text-decoration: underline;
}
.highlight {
background: yellow;
}
</style>
</head>
<body>
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
</body>
</html>
F5 to run
JQUERY ATTRIBUTES HTML
HTML – html()
Creating HTML_Html.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - ATTRIBUTES HTML - Html</title>
<script>
$(document).ready(function () {
$("p").click(function () {
var htmlStr = $(this).html();
$(this).text(htmlStr);
});
});
</script>
<style>
p {
margin: 8px;
font-size: 20px;
color: blue;
cursor: pointer;
}
b {
text-decoration: underline;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<p>
<b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
to a <span id="text">text</span> node.
</p>
<p>
This <button name="nada">button</button> does nothing.
</p>
</body>
</html>
F5 to run
HTML – html(val)
Creating HTML _Html(val).html and add code
F5 to run
JQUERY ATTRIBUTES TEXT
Text – text()
Creating Text_Text().html and add code
F5 to run
Text – text(val)
Creating Text_Text(val)..html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - ATTRIBUTES HTML - Html(val)</title>
<script>
$(document).ready(function () {
$("div").html("<b>Welcome !</b> to microsofttechnology.net...");
});
</script>
<style>
div {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
F5 to run
JQUERY ATTRIBUTES VALUE
Val – val()
Creating Val_Val().html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - ATTRIBUTES VAL - val()</title>
<script>
$(document).ready(function () {
function displayValsSinggle() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("#pSingle").html("<b>Single:</b> " +
singleValues);
}
function displayValsMulti() {
var multipleValues = $("#multiple").val() || [];
$("#pMulti").html("<b>Multiple:</b> " + multipleValues.join(", "));
}
$("select").change(displayValsSinggle);
$("select").change(displayValsMulti);
displayValsSinggle();
displayValsMulti();
});
</script>
<style>
p {
color: red;
margin: 4px;
}
b {
color: blue;
}
</style>
</head>
<body>
<p id="pSingle"></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<br /><br /><br />
<p id="pMulti"></p>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
</body>
</html>
F5 to run
Val – val(val)
Creating Val_Val(val)..html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - ATTRIBUTES VAL - val(val)</title>
<script>
$(document).ready(function () {
$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});
});
</script>
<style>
button {
margin: 4px;
cursor: pointer;
}
input {
margin: 4px;
color: blue;
}
</style>
</head>
<body>
<div>
<button>Feed</button>
<button>the</button>
<button>Input</button>
</div>
<input type="text" value="click a button" />
</body>
</html>
F5 to run
