$(document).ready(function () {
var css = { 'font-family': 'comic sans ms',
'color': 'red'
};
$("#OnlyDiv").click(function () {
$("#targetDiv").css(css);
});
$("#OnlyP").click(function () {
$("#targetP").css(css);
});
$("#Both").click(function () {
$("#targetDiv").find("p").andSelf().css(css);
});
$("#reset").click(function () {
location.reload();
});
});
<html>
<head>
<title>andSelf</title>
</head>
<body>
<div id="targetDiv">
This is div<br/><br>
<p id="targetP">This is p element inside div element.</p>
</div><br /><br />
<input type="button" id="OnlyDiv" value="OnlyDiv"/>
<input type="button" id="OnlyP" value="Only Paragraph"/>
<input type="button" id="Both" value="Both (using addSelf())"/>
<input type="button" id="reset" value="Reset"/>
</body>
</html>
#targetDiv
{
width:200px;
height:100px;
background-color:yellow;
}
#targetP
{
background-color:skyblue;
}